Related
I have simple kendo UI grid
$("#Grid").kendoGrid({
dataSource: {
serverPaging: true,
transport: {
read: "Course/Read",
dataType: "json"
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
pageSize: 10
},
pageable: true,
columns:
[
{ field: "CourseName", title: "Name", width: 100 },
{ field: "SpecialtyName", title: "Specialty", width: 100, filterable: false },
{ title: "Edit", template: '<span class="EditIcon"><i data-bind="click:Edit(#: Id#)" class="fa fa-edit"></i></span>', width: 50 },
]
});
the problem is when I am using:
data-bind="click:Edit(#: Id#)"
when click on edit calling function not work inside kendo grid notice that both the grid and function inside knockout viewmodel
function viewmodel() {
var self = this;
self.Load = function () {
$("#Grid").kendoGrid({
dataSource: {
type: "aspnetmvc-ajax",
serverPaging: true,
transport: {
read: "Course/Read",
dataType: "json"
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
pageSize: 10
},
pageable: true,
columns:
[
{ field: "CourseName", title: "Name", width: 100 },
{ field: "SpecialtyName", title: "Specialty", width: 100, filterable: false },
{ title: "Edit", template: '<span class="EditIcon"><i data-bind="click:Edit(#: Id#)" class="fa fa-edit"></i></span>', width: 50 },
]
});
}
self.Load();
self.Edit= function (Id) {
////////my code////////
}
}
everything work fine the binding retrieve data, extra except call knockout method inside kendo grid, appreciate any help thanks.
if anyone looking for answer or open this post, this is not related to kendo, this is because the grid render rows after knockout binding done, so you can take viewmodel object in temp var in javascript and use it like tempvar.callfunction().
I use free-jqGrid v4.14.0. I have a table, when I click on a row in this table, I execute a stored procedure and in another table I enter the result.
The problem is that when you first click on a row in the table, the data does not load into the second table, and when the second button is clicked, the data appears, and this problem occurs only once, the following clicks immediately load the data into the second table.
When you first click in the browser console, you can see that the url stored procedure is loading: '# Url.Action ("GetAccident")',
$(document).ready(function () {
$("#jqg").jqGrid({
url: '#Url.Action("GetAccident")',
datatype: "json",
colNames: ['id_Accident', .......],
colModel: [
{ name: 'id_Accident', index: 'id_Accident', autowidth: true, sortable: false },
.....................
.....................
],
guiStyle: "bootstrap",
iconSet: "fontAwesome",
pager: "#pager",
rowList: [10, 20, 30],
rowNum: 10,
loadonce: false,
onSelectRow:
function (idRow) {
celValue = $('#jqg').jqGrid('getCell', idRow, 'id_Accident');
jQuery("#jqg1").jqGrid('setGridParam', { url: '#Url.Action("GetOrganizationCulpritByIdAccident")?celValue=' + celValue, page: 1 }).trigger('reloadGrid');
}
});
jQuery("#jqg1").jqGrid({
url: '#Url.Action("GetOrganizationCulpritByIdAccident")?celValue=' + 0,
datatype: "json",
colNames: ['id_Accident', 'Name Organization'],
colModel: [
{ name: 'id_Accident', index: 'id_Accident', autowidth: true, stype: 'text', sortable: true },
{ name: 'Name', index: 'Name', autowidth: true, sortable: true }
],
guiStyle: "bootstrap",
pager: "#pager1",
rowList: [10, 20, 30],
rowNum: 10,
});
I can't reproduce the problem. You can examine Network traffic of the demo https://jsfiddle.net/OlegKi/ed0yLkce/1/. I uses
datatype: "local"
in the second grid as initial option to prevent unneeded Ajax requests. I use additionally idPrefix with different values in both grids to be sure that one will have no conflicts with duplicates of ids. You will see in Network tab of Developer Tools that the request to for example https://fiddle.jshell.net/echo/json?celValue=test2 will be send it the second row is selected.
i have a newbie question, but i’m scratching my head on this one. I have a grid, bound to a dataadapter. On the grid, paging and filtering is explicit disabled, but the GET-call from the dataadapter allways includes following parameters in the GET-url:
?filterscount=0&groupscount=0&pagenum=0&pagesize=10&recordstartindex=0&recordendindex=18&_=1386768031615
I want to get all data, then cache it clientside for paging and filtering, but in the first step i just want to get my data bound to the grid.
Here’s my code:
var source = {
type: "GET",
datatype: "json",
datafields: [
{ name: 'url' },
{ name: 'category', type: 'int' },
{ name: 'info' },
{ name: 'status', type: 'bool' }
],
url: '/api/redirects/Getallredirects',
id: 'id'
};
var dataAdapter = new $.jqx.dataAdapter(source, {
contentType: 'application/json; charset=utf-8',
loadError: function (xhr, status, error) {
alert(error);
},
downloadComplete: function (data) {
var returnData = {};
returnData.records = data.d;
return returnData;
}
});
$("#jqxgrid").jqxGrid({
source: dataAdapter,
filterable: false,
pageable: false,
virtualmode: false,
columns: [
{ text: 'URL', dataField: 'url', width: 100 },
{ text: 'Category', dataField: 'category', width: 100 },
{ text: 'Info', dataField: 'info', width: 180 },
{ text: 'Status', dataField: 'status', width: 80, cellsalign: 'right' },
]
});
I don’t get any data, the GET-call fails because of the automatically included parameters. How do i get rid of these parameters?
I just found in the jqxGrid documentation a reference to these parameters, but no example, how to remove them:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-extra-http-variables.htm
Thanks in advance for any help.
The below will remove the default parameters:
var dataAdapter = new $.jqx.dataAdapter(source,
{
formatData: function (data) {
return {};
}
}
);
I have a Jqgrid, In my MVC view, there is no problem in displaying the data in the grid. But I want to apply the custom paging in the grid, so i have created the method in my controller which takes two parameters (pageNumber and rowSize) and returns the data based on the these two parameters.
Now my question is that how can i send these two property of grid to the controller and get the changes reflected on the grid.
Note: i also tried to send the value of rowSize using ajax on the button click but after executing the code in the server there is no changes in the grid(as i expected).
View:
<table id="jQGridDemo">
</table>
<div id="jQGridDemoPager">
</div>
<script type="text/javascript">
jQuery("#jQGridDemo").jqGrid({
datatype: "json",
colNames: ['Id', 'First Name', 'Last Name', 'Last 4 SSN', 'Department',
'Age', 'Salary', "Address", 'Marital Status'],
colModel: [
{ name: 'ID', index: '_id', width: 20, stype: 'text' },
{ name: 'FirstName', index: 'FirstName', width: 150 },
{ name: 'LastName', index: 'LastName', width: 150 },
{ name: 'LastSSN', index: 'LastSSN', width: 100 },
{ name: 'Department', index: 'Department', width: 80, align: "right" },
{ name: 'Age', index: 'Salary', width: 80, align: "right" },
{ name: 'Salary', index: 'Salary', width: 80, align: "right" },
{ name: 'Address', index: 'Address', width: 150, sortable: false },
{ name: 'MaritalStatus', index: 'MaritalStatus', width: 100, sortable: false }
],
rowNum: 10,
loadonce: false,
rowList: [5, 10, 20, 50],
pager: "#jQGridDemoPager",
height: "100%",
sortname: 'ID',
viewrecords: true,
sortorder: "desc",
caption: "List Employee Details",
url: '/Home/Records'
});
$(".ui-pg-input").click(function () {
alert(this.value);
$.ajax({
type: 'POST',
url: window.location + "Home/Records",
data: {
pageNumber: this.value
},
success: function (data) {
alert("ajax call completed");
},
error: function () {
alert("Something went Wrong");
}
});
})
</script>
Controller
public JsonResult Records(int pageNumber=3, int rowSize = 5)
{
// code for custom paging
return json;
}
JSON Returned from Server:
[{"ID":1,"FirstName":"Alan","LastName":"Donald","LastSSN":"123","Department":"Bowler","Age":"44 ","Salary":"1000000 ","Address":"South Africa","MaritalStatus":"Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":1}],"IsTemporary":false}},{"ID":2,"FirstName":"Donald","LastName":"Duck","LastSSN":"345","Department":"Actor","Age":"98 ","Salary":"2000000 ","Address":"USA","MaritalStatus":null,"EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":2}],"IsTemporary":false}},{"ID":3,"FirstName":"Virat","LastName":"Kohli","LastSSN":"111","Department":"Batsman","Age":"28 ","Salary":"1000000 ","Address":"India","MaritalStatus":"Unknown ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":3}],"IsTemporary":false}},{"ID":4,"FirstName":"MS","LastName":"Dhoni","LastSSN":"112","Department":"Captain","Age":"31 ","Salary":"9000000 ","Address":"India","MaritalStatus":"Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":4}],"IsTemporary":false}},{"ID":5,"FirstName":"Sachin","LastName":"Tendulkar","LastSSN":"113","Department":"Superman","Age":"40 ","Salary":"90000000 ","Address":"India","MaritalStatus":"Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":5}],"IsTemporary":false}},{"ID":6,"FirstName":"Virendra","LastName":"Sehwag","LastSSN":"114","Department":"Batsman","Age":"36 ","Salary":"8000000 ","Address":"India","MaritalStatus":"Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":6}],"IsTemporary":false}},{"ID":7,"FirstName":"Zaheer","LastName":"Khan","LastSSN":"115","Department":"Bowler","Age":"36 ","Salary":"3000000 ","Address":"India","MaritalStatus":"Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":7}],"IsTemporary":false}},{"ID":8,"FirstName":"Demo","LastName":"Demo","LastSSN":"Demo","Department":"Demo","Age":"Demo ","Salary":"Demo ","Address":"Demo","MaritalStatus":"Demo ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":8}],"IsTemporary":false}},{"ID":9,"FirstName":"Demo","LastName":"Demo","LastSSN":"Demo","Department":"Demo","Age":"Demo ","Salary":"Demo ","Address":"Demo","MaritalStatus":"Demo ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":9}],"IsTemporary":false}},{"ID":10,"FirstName":"Demo","LastName":"Demo","LastSSN":"Demo","Department":"Demo","Age":"Demo ","Salary":"Demo ","Address":"Demo","MaritalStatus":"Demo ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":10}],"IsTemporary":false}}]
I think there are misunderstanding how jqGrid works. If you don't use loadonce: true option jqGrid send automatically request to url with additional parameters which specify the page size and the requested page. So you don't need to many any $.ajax and you don't need to bind $(".ui-pg-input").click. Default names of 1-based "page number" parameter is page and the name of "row size" parameter is rows. So you need just rename parameters of Records actions.
Alternatively you can use prmNames option of jqGrid (see the documentation) to inform jqGrid to use other parameter names as default page and rows. For example you can add the option
prmNames: {page: "pageNumber", rows: "rowSize"}
to solve your problem.
I've been trawling across the web for answers, and maybe it's a case of it being more complicated than I expect (or I just don't understand the solutions), but I am looking for a way to simply delete a selected row from my jqgrid by clicking the trash icon.
Currently my grid is being populated with Linq to SQL data.
Here is my grid:
jQuery("#grid").jqGrid({
url: '<%= ResolveUrl("~/Home/GetData") %>',
datatype: "json",
mtype: 'GET',
postData: { DDLid: function () { return jQuery("#DDL option:selected").val(); } },
colNames: ['Col1', 'Col2'],
colModel: [
{ name: 'Col1', index: 'Col1', width: 200, editable: false },
{ name: 'Col2', index: 'Col2', width: 200, editable: false }
],
jsonReader: {
repeatitems: false
},
rowNum: 10,
pager: jQuery('#gridpager'),
sortname: 'Type',
viewrecords: true,
sortorder: "asc",
caption: "Table"
}).navGrid('#gridpager', { del: true, add: false, edit: false, search: false }, {}, {}, {url: "Delete"});
Now the 'id' in post data is NOT the primary key in this table - I just need it to help populate the grid.
What I would like to get is the selected row id and pass it to the Delete method, but I can't find any way to do that.
I have tried using jQuery("#grid").getGridParam('selrow') in the postData but it always returns null.
Any help would be greatly appreciated.
Here is my delete method, for reference:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Delete(int DDLid)
{
int row = Convert.ToInt32(/*I NEED THIS ID*/);
var query = from x in _ctx.DataTable
where ((x.id == row))
select x;
_ctx.DataTable.DeleteOnSubmit(query.Single());
_ctx.SubmitChanges();
return Json(true);
}
This method is called and is fine, but I am getting the wrong id. I need the selected row's id. This breaks because the DDLid returns more than one row (since it is used to populate the grid).
I hope that makes sense.
I discovered where I would pass the selected index (but then I realised I was looking for the primary key, rather than selected index, but it is the same result regardless)
I needed to add this to my navGrid:
{url: "Delete", mtype: "POST", reloadAfterSubmit: true,
serializeDelData: function (postdata) {
var selectedrowindex = jQuery("#grid").jqGrid('getGridParam', 'selrow');
var dataFromCellByColumnIndex = jQuery('#grid').jqGrid ('getCell', selectedrowindex , 1);
return {DDLid: postdata.id, name: dataFromCellByColumnIndex};
}
});
So this passes a column value to my delete method as well as the DDLid, but I could easily swap dataFromCellByColumnIndex with selectedrowindex.
You should just implement Delete action having id parameter:
public JsonResult Delete(string id) {
...
}
To reference the action in the JavaScript code I would use 'url: <%= Url.Action("Delete") %>' instead of url: "Delete" which you use currently.
You can download here demo project which I created for the answer. The project implement deleting of the row together with many other features which you currently not need.
You can make another post inside delete method with your own params. After defining grid, you can define each action in detail. It is posting actual delete with correctid and original one is posting fake id. JQgrid is using row count for delete not the primary key. They may change it with recent versions, but this was working Jqgrid 3.8
jQuery("#ClientGrid").jqGrid('navGrid', '#ClientGridPager',
{ view: true, edit: true, search: false }, //options
{height: 240, caption: 'Edit Client', beforeShowForm: hideIDColumn, reloadAfterSubmit: true, mtype: 'POST', url: "/Settings/EditClient", jqModal: false, closeOnEscape: true, bottominfo: "Fields marked with (*) are required" }, // edit options
{height: 340, caption: 'Add Client', beforeShowForm: hideIDColumn, reloadAfterSubmit: true, mtype: 'POST', url: "/Settings/CreateClient", jqModal: false, closeOnEscape: true, bottominfo: "Fields marked with (*) are required", closeAfterAdd: true }, // add options
//delete method
{reloadAfterSubmit: true, beforeSubmit: function (postdata, formid)
{
var lastselectedID = -1;
if (ClientGridrow != null || typeof (ClientGridrow) != "undefined")
{
lastselectedID = $("#ClientGrid").getCell(ClientGridrow, 'ID_PK');
}
//CUSTOME delete to send taskid instead of rowid
$.ajax({ type: "POST", url: "/Settings/DeleteClient/?objid=" + lastselectedID,
data: "", success: function (response)
{
$("#ClientGrid").trigger("reloadGrid"); //reloadAfterSubmit: true is not working in Chrome
}
});
return [true, "Delete failed message"];
}, caption: 'Delete Client', datatype: 'local', url: "/Settings/DeleteClient/?objid=-1", jqModal: false, closeOnEscape: true
}, // del options..we make two posts
{closeOnEscape: true }, // search options
{height: 230, width: 350, jqModal: false, closeOnEscape: true} // view options
);