We Keep Coding

JQuery grid pager not visible

I have a Jquery grid which is formed on a html table.
i have added the required properties for the grid including the pager functionality.I have set my page size to 10.
The page up and page down buttons are no visible.
when i looked closely, i found that it is saying Page: 1 out of 1
But in the right corner it again says 1-10 of 257 records.
Here aremy html tags
<table class="table table-bordered" id="tblJQGrid"></table>
<div id="pager"></div>
And here is the code for binding the grid.
$("#tblJQGrid").jqGrid(
{url: "#Url.Action("GetGeographyBreakUpData", "GeoMap")"+ "?Parameters=" + Params + "",
datatype: "json",
//data: { "Parameters": Params },
mtype: 'GET',
cache: false,
colNames: ['Id','GeoGraphy', 'Completed', 'InProgress'],
colModel: [
{ name: 'Id', index: 'Id', width: 20, stype: 'text',hidden:true },
{ name: 'Geography', index: 'Geography', width: 150 },
{ name: 'Completed', index: 'Completed', width: 150 },
{ name: 'InProgress', index: 'InProgress', width: 150 },
],
pager:'#pager',
jsonReader: {cell:""},
rowNum: 10,
sortorder: "desc",
sortname: 'Id',
viewrecords: true,
caption: "Survey Status:Summary",
scrollOffset: 0});
$("#tblJQGrid").jqGrid('navGrid','#pager',{search:true});
Any suggestion on what i am missing or doing wrong?

Try using loadonce: true, forceClientSorting: true option.

Issue while loading the data in jqgrid

I'm developing a asp.net application using twitter bootstrap.
I'm trying create a jqgrid.
While loading the data im facing issues. I'm getting an error XML Parsing Error: no element found Location: moz-nullprincipal:....
Here is my code
$(document).ready(function () {
jQuery("#grid-container").jqGrid({
url: "test.url",
datatype: 'json',
mtype: 'POST',
colNames: ['Id', 'Text', 'Name'],
colModel: [
{ name: 'Id', index: 'Id', hidden: false, editable: true },
{ name: 'Text', index: 'Text', hidden: false, editable: true },
{ name: 'Name', index: 'Name', hidden: false, editable: true }
],
jsonReader: {
id: 'Id',
repeatitems: false
},
height: "100%",
pager: '#grid-pager',
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'Id',
sortorder: 'desc',
viewrecords: true,
caption: "Risk Register",
loadComplete: function () {
var table = this;
}
});
});
I found that data from dal is not converting into json type.. I'm not getting the response while debugging.
Please help me out.

Search and sorted doesn't work in JqGrid (json)

I am working with JqGrid.
I have some JSON from server
[{"Id":1,"Name":"product1","Price":234,"Size":"Small"},{"Id":18,"Name":"product2","Price":3242,"Size":"Large"}]
and Jquery code
$("#table").jqGrid({
url: '#Url.Action("GetProductsAtJSON", "Product")',
datatype: 'json',
mtype: 'GET',
colNames: ['Id', 'Name', 'Price', 'Size'],
colModel: [
{ name: 'Id', index: 'Id', width: 55, key: true, editable: true, editoptions: { readonly: true }, sortable: true, search:true },
{ name: 'Name', index: 'Name', width: 150, editable: true, editoptions: { size: 25 }, editrules: { required: true }, search: true },
{ name: 'Price', index: 'Price', width: 100, align: 'center', editable: true, editoptions: { size: 25 }, editrules: { required: true, number: true, minValue: 1, maxValue: 10000 } },
{ name: 'Size', index: 'Size', width: 150, editable: true, edittype: "select", editoptions: { value: "0:Large;1:Medium;2:Small" } }
],
pager: '#pager',
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'Id',
sortorder: "asc",
viewrecords: true,
caption: 'All product',
height: '400',
jsonReader: {
repeatitems: false,
loadonce: true,
id: "Id",
root: function (obj) { return obj; },
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.length; }
}
});
I have read the documentation and a lot of forums, but I don't understand why sorting and search doesn't work. Maybe my JSON format is incorrect and I must write total page records, but that's not working either. I use key: true from rows id, but it's not working.
What am I doing wrong?

There are some small errors in your code:
loadonce: true is jqGrid option and not the property of jsonReader
You should use sorttype property for columns which content should be interpreted not as a text. For example you should add sorttype: "integer" to the definition of 'Id' and 'Price' columns
I recommend you to consider whether the value editoptions: {value: "0:Large;1:Medium;2:Small"} is what you need. It will be important for edition only.
I recommend you additionally to use gridview: true to improve performance of the grid, use autoencode: true to interpret the values in JSON input as textes instead of HTML fragments and use height: 'auto' to have better look of the grid.
To have local searching of data you need either use navGrid or filterToolbar.
The demo is an example of fixing of your code.

Why does jqGrid refuses to call it's Ajax Call more than once using the OnSelectRow Event

I have a problem with my two jqGrid grids. First I have one grid with some data that works just fine. It has an loadComplete event which sets the first row as selected. This is so that the second jqGrid gets populated based on the selected row (id) on the first jqGrid.
I have an onSelectRow event on the first grid which calls a function which contains the $('#grid).jqGrid() call of the second grid. This second grid has en url which links to a method in a controller which gets some data from a database.
This works all fine for the first selectrow (which happends automatically after the loadComplete).
My problem is that the second jqGrid doesnt repopulate after I select a different row. The programm never gets to the method in the controller (I tested with some logging). I'm really stuck at this since it works for the first load but not the second and so on.
$("#fontsgrid").jqGrid({
url: 'getfonts',
mtype: "post",
datatype: "json",
sortable: true,
colNames: ['Name', 'Family', 'Cost', 'Lic', 'File', 'Added', 'Mod', 'Add', 'Edit'],
colModel: [
{ name: 'name', index: 'name', width: 90, sorttype: "text", sortable: true, align: 'left'},
{ name: 'family', index: 'family', width: 100, sorttype: "text", sortable: true},
{ name: 'cost', index: 'cost', width: 60, sorttype: "currency", sortable: true, formatter: 'currency', formatoptions: {decimalSeparator: ",", thousandsSeparator: ",", decimalPlaces: 2, prefix: "€ "}},
{ name: "licenses", index: "licenses", width: 30, sorttype: "int", sortable: true},
{ name: "filename", index: "filename", width: 90, sorttype: "text", sortable: true},
{ name: "date_upload", index: "date_upload", width: 80, sortable: true, sorttype: "date", formatter: "date", formatoptions: { newformat: 'Y-m-d' }},
{ name: "date_edit", index: "date_edit", width: 80, sortable: true, sorttype: "date", formatter: "date", formatoptions: { newformat: 'Y-m-d' }},
{name: "add_cart", index: 'add_cart', width: 70},
{name: "edit", index: "edit", width: 30}
],
rowNum: 100,
width: 580,
height: 359,
rowList: [100, 250, 500],
sortname: "name",
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: "Font List",
pager: $('#pager'),
loadComplete: function () {
$('#fontsgrid').jqGrid('setSelection', $("#fontsgrid tr[role]").next().attr("id"));
},
onSelectRow: function (id) {
loadInstallGridFonts(id);
}
}).navGrid('#pager', {edit: false, add: false, del: false});
function loadInstallGridFonts($fontid) {
$('#installGridFonts').jqGrid({
url: 'getinstallations',
mtype: "post",
datatype: "json",
sortable: true,
postData: {'fontid': $fontid},
colNames: ['Installation', 'Bedrijfsnaam', 'Date Installed', 'Edit'],
colModel: [
{ name: 'installation', index: 'installation', width: 90, sorttype: "text", sortable: true, align: 'left'},
{ name: 'bedrijf', index: 'bedrijf', width: 100, sorttype: "text", sortable: true},
{ name: "date_installed", index: "date_installed", width: 80, sortable: true, sorttype: "date", formatter: "date", formatoptions: { newformat: 'Y-m-d' }},
{name: "edit", index: "edit", width: 30}
],
rowNum: 50,
width: 480,
height: 359,
altRows: 'true',
rowList: [50, 75, 100],
sortname: "installation",
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: "Installation List",
pager: $('#pagerInstall')
}).navGrid('#pagerInstall', {edit: false, add: false, del: false});
}
'getfonts' and 'getinstallations' are both aliases for a controller/method used in routing (codeIgniter).
The problem is that the programm only goes to the method behind the 'getinstallations' once and not after a new rowselect.

I see many problems in your code. First of all it's important to understand that the code like
$('#installGridFonts').jqGrid({
...
});
create the grid. It means that it convert <table> element, which you placed initially on the page, to relatively complex structure of divs and tables (see here for examples). The consequence of it: you can make such call only once. If you try to create the same grid at the second time jqGrid verify that the grid already exist and do nothing. It's exactly what you can see.
One more important thing is the following: jqGrid creates the structure of divs and tables which represent the grid once, but it can fill the body of the grid (the data inside of the grid) multiple times. If you need to fill the grid with the data returned from the server you should just set parameters of the grid (url, datatype, postData and so on) and then make $("#installGridFonts").trigger("reloadGrid"). The reloading means executing new request to the server and loading the data in the the grid.
So the code could be about the following:
// we will use navGrid below more as once without editing buttons
// so we change defaults of navGrid with the folling settings
$.extend($.jgrid.nav, {edit: false, add: false, del: false});
// creates the second grid. because we don't want to make any request
// to the server at the time we will use datatype: "local"
$("#installGridFonts").jqGrid({
datatype: "local",
...
}).jqGrid("navGrid", "#pagerInstall");
// create the first grid
$("#fontsgrid").jqGrid({
...
onSelectRow: function (rowid) {
$("#installGridFonts").jqGrid("setGridParam", {
datatype: "json",
postData: {fontid: rowid}
}).trigger("reloadGrid");
}
}).jqGrid("navGrid", "#pager");
If it's required you can hide the second grid directly after creating and show it inside of onSelectRow callback.

Call Jquery grid inside a function

I have a jquery grid.
I want to change the data of jquery grid on dropdown change event.
So I need to call the jqgrid inside the change event.
below is my code
$("#ddlCategory").change(function () {
UserJqGrid();
GetMapDataOnChange();
});
The first function return a jqgrid and the 2nd function will return a map.
But only 1st time the jqgrid load.After that on change the dropdown list the data of the grid not updated.
my UserJqGrid() function is
$("#list").jqGrid({
url: "<?php echo base_url() ; ?>userController/GetUserGirdData?catIds=" + str + "&cityId=" + cityId,
datatype: 'json',
mtype: 'GET',
colNames: ['Object Id', 'Name', 'Longitute', 'Latitute', 'Country', 'City'],
colModel: [{
name: "id",
index: "id",
key: true,
width: 20,
editable: true,
key: true,
editoptions: {
readonly: true,
size: 10
}
}, {
name: "objName",
index: "objName",
width: 100,
editable: true
}, {
name: "longi",
index: "longi",
width: 30,
align: "left",
editable: true
}, {
name: "lati",
index: "lati",
width: 30,
align: "left",
editable: true
}, {
name: "countryName",
index: "countryName",
width: 50,
align: "left",
editable: true
}, {
name: "cityName",
index: "cityName",
width: 50,
align: "left",
sortable: false,
editable: true
}, ],
pager: '#pager',
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'id',
sortorder: 'desc',
viewrecords: true,
width: 900,
gridview: true,
shrinkToFit: true,
//rownumbers: true,
height: 200,
caption: 'Shipping Method',
editurl: '../php/EditShipping.php'
});
jQuery("#list").jqGrid('navGrid', '#pager', {
edit: true,
add: true,
del: false,
excel: false,
search: false
});

I solved my problem.
I call this reload event of grid.As the grid is already created so we don't need to call the whole function again.Just need to reload the grid with new data.
jQuery("#list")
.jqGrid('setGridParam',
{
url:"<?php echo base_url() ; ?>userController/GetUserGirdData?catIds=" + str + "&cityId=" +cityId,
datatype: 'json',
mtype: 'GET'
}).trigger("reloadGrid");