Please see my js code below
$(function () {
$("#grid").jqGrid({
url: "/Home/GetRoles",
dataType: 'json',
mtype: 'Get',
colNames: ['ID', 'Role Name', 'Active'],
colModel: [
{ key: true, hidden: true, name: 'RoleId', index: 'RoleId' },
{ key: true, name: 'RoleName', index: 'RoleName' },
{ key: true, name: 'Active', index: 'Active' }
],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
viewrecords: true,
caption: 'Roles',
emptyrecords: 'No records to display',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "0"
},
autowidth: true,
multiselect: false
});
});
and output of Get request
{"total":2,"page":1,"records":13,"rows":[{"RoleId":1,"RoleName":"Role1","Active":true},{"RoleId":2,"RoleName"
:"Role 2","Active":false},{"RoleId":13,"RoleName":"Role 3","Active":false},{"RoleId":3,"RoleName":"Role
4","Active":false},{"RoleId":4,"RoleName":"Role 5","Active":false},{"RoleId":5,"RoleName":"Role 6","Active"
:false},{"RoleId":6,"RoleName":"Role 7","Active":false},{"RoleId":7,"RoleName":"Role 8","Active":false
},{"RoleId":8,"RoleName":"Role 9","Active":false},{"RoleId":9,"RoleName":"Role 10","Active":false}]}
but grid is always empty
You should fix dataType: 'json' to datatype: 'json', the property key: true could be placed only in one column. You should remove it from columns RoleName and Active. Your JSON data contains line feed in the middle of the string "Role 4". Have the JSON data really new line character on the place? It would be the error too.
Moreover you should always write the information about the version of jqGrid you use and from which fork (free jqGrid, Guriddo jqGrid JS or an old jqGrid in version <=4.7). The problem existing in one version can not exist in another one. Moreover different version and forks have different options implemented and so to suggest you some workaround one need to know the version and the fork which you use. I develop free jqGrid fork, and can recommend you to you the latest version (4.13.0) of jqGrid from the fork.
Related
Though I have spent a lot of time on looking for similar QA here but Can't able to find out. If You think that I missed checking something please let me know.
question metadata:
So I am using free jqGrid 4.15.4 for showing data in view. I am able to do all things with awesome documentation. but one certain condition where I am not getting about steps.
In my grid, I have 4 columns named as Id, Name, Group, and Status. Group(Section A/ Section B....) are coming from database. Status(New/Pass /Fail) column consist dropdown and by default value is "New" for all records.
question statement :
There are 5 records and I have Selected "Pass" status for 2 out of 5. Now I want to see all 5 records if I select "New" in filter toolbar for that particular group(section A). Since I don't how many names belongs to that particular group, so I want to check this by filtering all records with "New" status. Is this possible with jqgrid? StudentGrid.png
Here is the code snippet:
$("#grid").jqGrid({
url: '/StudentsView/GetAllData',
mtype: "GET",
datatype: "json",
colNames: ['Id','Name', 'Group','Status'],
colModel: [
{label: "Id",name: 'Id',hidden: true,search: false,key:true},
{label: "Name",name: 'Name', search: true, stype: 'text'},
{label: "GroupNo",name: 'GroupNo',searchoptions: {searchOperators: true,sopt: ['eq', 'cn', 'nc'] }, search: true, multipleSearch: true, multipleGroup:true},
{
label: "Status",
name: 'Status',
cellEdit: true,
edittype: 'select',
editable: true,
editoptions: {
value: getStatusOptions(),
dataEvents: [{
type: 'change',
fn: function (e) {
if (statusid != 0)
{
ChangeStatus(row.Id, row.Name, row.Group, statusid);
}
}
}],
}
}
pager: jQuery('#pager'),
loadonce: true,
viewrecords: true,
gridview: true,
iconSet: "fontAwesome",
emptyrecords: "No records to display",
jsonReader:
{
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "Id"
}
});
$('#grid').jqGrid('filterToolbar', { stringResult: true,searchOnEnter:false, defaultSearch: "cn", multipleSearch: true, searchOperators: true,
search: true, loadFilterDefaults: true });
$('#grid').jqGrid('navGrid', "#pager", {
search: false, // show search button on the toolbar
add: false,
edit: false,
del: false,
refresh: true
});
I have added a diagram for better understanding. Thanks in Advance.
I have a jqgrid. I need to pull the json data from jqgrid after the client sorted the grid. Pulled json data should be the sorted version and not the original. How can I do this?
Here is my jqgrid source
jQuery("#myGrid").jqGrid({
datastr: jsonData,
datatype: 'jsonstring',
jsonReader: { repeatitems: false, root: function(obj) { return obj; }},
colNames: [ 'Column 1',
'Column 2'],
colModel: [
{ name: 'prop1', index: 'prop1'},
{ name: 'prop2', index: 'prop2'},
],
headertitles: true,
sortable: true,
pginput: true,
rownumbers: true,
rowNum: 5,
rowList: [5,20, 100, 10000],
pager: '#pager',
width:'600',
height:'300',
shrinkToFit:false,
viewrecords: true,
loadonce: true
});
Currently when I alert(jsonData) in the gridComplete it shows the original json data and not the sorted one.
For those who come across this problem, you can just take the data parameter passed to the loadComplete event of jqGrid. This data is the sorted version of the grid's data source.
in jqgrid for inline editing when we click the save icon, ** internally it calls the saveRow method, but i want to call my custom method where i will implement my save logic as well calling to controller method.**
i used below code for grid.
var grid = jQuery("#list5").jqGrid({
url: '/home1/GetUserData',
datatype: "json",
mtype: "POST",
colNames: ['Code', 'LoginID', 'Emailid', 'CreateDate', 'PostalCode', 'Mobile'],
colModel: [
{name: 'Code', index: 'Code', width: '16%', editable: true, sortable: true },
{ name: 'LoginID', index: 'LoginID', width: '16%', editable: true, sortable: true },
{ name: 'Emailid', index: 'Emailid', width: '16%', editable: true,
sortable: true },
],
rowNum: 10,
height: '100%',
scrollOffset: 0,
rowList: 10,
shrinkToFit: true,
pager: $("#pager2"),
editurl: "/home1/EditUserData",
caption: "Simple data manipulation"
});
jQuery("#list5").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: true, search: false, refresh: false }, {}, {}, { url: '/home1/DeleteUserData' });
jQuery('#list5').jqGrid('inlineNav', '#pager2', { edit: true, add: true},
});
});
so please anyone let me know how to implement it.
I don't really understand your requirements. saveRow has a lot of customization possibilities. You can rename all parameters which will be sent to the server using prmNames option of jqGrid. Using extraparam parameter of saveRow you can specify additional information which can be sent to the server. The callback serializeRowData can be used to implement your custom serialization. For example you can convert the data to JSON. Using aftersavefunc you can make some custom actions after the data will be successfully saved on the server. So I recommend you use the features instead of implementing your custom saveRow method.
UPDATED: If you want to have navigator icon which uses your custom saveRow you should don't add "Save" button by inlineNav. You can use save: false option of inlineNav. Then you can just use navButtonAdd and add your custom icon which look exactly like original "Save" button and make call of your "custom saveRow" in the onClickButton callback.
I'm using jqGrid with mvc 2 like this:
jQuery("#extension_grid").jqGrid({
url: '/Extension/Report',
datatype: "json",
direction: "rtl",
height: "auto",
jsonReader: { root: "rows", page: "page", total: "total", records: "records", repeatitems: false, userdata: "UserData" },
colModel:
[
{ name: 'id', label: 'داخلی', key: true, search: true, width: 55 },
{ name: 'assigned_user', label: 'کاربر', width: 90, editable: true },
{ name: 'creation_date', label: 'تاریخ ایجاد', width: 100, formatter: 'date', formatoptions: { newformat: 'Y-m-d H:i:s'} }
],
rowNum: -1,
pager: '#extension_pager',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption: "داخلیها",
editurl: '/Extension/MyEdit'
});
jQuery("#extension_grid").jqGrid('navGrid', '#extension_pager', { edit: true, add: true, del: true }, {}, {}, {}, { multipleSearch: true });
when I select a row and click the edit button a dialog appears and I can edit the row. after submit, data is posted to the editurl successfully. but changes are not saved to grid client side. should I save the changes client side manually?
I tried with datatype local and it works!!! what should I do? is there any problem with using json data and form editing?
The situation which you described seems me very strange. There are default setting reloadAfterSubmit:true for "Add" and "Edit" forms. It means that after submitting of the "Edit" form for example the grid contain will be reloaded. You can verify with respect of Fiddler or Firebug that the grid reloading take place. So either your server part '/Extension/MyEdit' not save the data or another the server '/Extension/Report' don't get the refreshed data. Do you have some kind of data caching on the server?
So you should analyse the problem which you have more exctly. If you would not solve the problem yourself you should update/append your question with more additional information.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jqgrid client side sorting with server side paging - data disappears
I have a jqGrid and trying to enable client side sorting w/ server side paging. Client side sorting will work if loadonce:true but paging will not work.
If loadonce:false and I try to sort, the data disappears from the grid. Any ideas what I am missing?
jQuery("#grid").jqGrid({
url: getUrl(), // url w/ querystring params
datatype: 'json',
mtype: "GET",
colNames: ['Name', 'Title', 'Office'],
colModel:
[
{ name: 'Employee.EmployeeName', index: 'Employee.EmployeeName', sortable: true, sorttype: 'text' },
{ name: 'Employee.EmployeeTitle', index: 'Employee.EmployeeTitle', sortable: true, sorttype: 'text'},
{ name: 'Employee.EmployeeOffice', index: 'Employee.EmployeeOffice', sortable: true, sorttype: 'text' }
],
width: 600,
height: 'auto',
scrollOffset: 0,
rowNum: 5,
pager: jQuery("#pager"),
rowList: [10, 25, 50],
sortname: 'Employee.EmployeeName',
sortorder: "asc",
loadtext: "Loading....",
emptyrecords: "No records to view",
//loadonce: true, // client side sorting works but paging doesn't work
sortable: true,
viewrecords: true,
jsonReader: {
repeatitems: false
},
loadComplete: function () {
jQuery("#grid").jqGrid('setGridParam', { datatype: 'local' });
jQuery("#grid").trigger("reloadGrid");
},
onPaging: function () {
jQuery("#grid").jqGrid('setGridParam', { datatype: 'json' });
}
});
In my experience, if you do anything server side in JQGrid using JQGrid events, you have to recreate the data on the server and rebind it to JQGrid control. The means you will have to capture the sorting information and account for that as well. The Trirand forums ( http://www.trirand.net/forum/ ) are monitored by the authors of JQGrid. You may get better help there.
Client side sorting will work if loadonce:true but also paging will work fine .
$(document).ready(function() {
$("#user-list").jqGrid({
datatype: "local",
height: "auto",
autowidth: true,
ignoreCase: true,
colNames: ['Emp Id', 'First Name', 'Last Name'],
colModel: [
{name:'emp_id', index:'emp_id', width:55, sorttype:"int"},
{name:'first_name',index:'first_name', width:160, sorttype:"text"},
{name:'last_name',index:'last_name', width:160, sorttype:"text"},
],
pager: '#user-list-pager',
rowNum:10,
rowList:[10,25,50,100],
sortname: 'first_name',
sortorder: 'asc',
viewrecords: true,
caption: 'Users',
data:<%= raw #users_jqgrid_data.to_json %>
});
jQuery("#user-list").jqGrid('navGrid','#user-list-pager',{del:false,add:false,edit:false},{},{},{},{multipleSearch:true});
} );
I just tried a smallcode an paging and sorting works fine here.hope it helps
Thanx