Here is the Javascript code:
<script type="text/javascript">
$(function () {
$("#list").jqGrid({
url: "/Movies/GetAllMovies",
datatype: "json",
mtype: "GET",
colNames: ["Id", "Title", "Director", "Date"],
colModel: [
{ name: 'Id', index: 'Id', sorttype: "int" },
{ name: 'Title', index: 'Title', sortable: false },
{ name: 'Director', index: 'Director', sortable: false },
{ name: 'ReleaseDate', index: 'ReleaseDate', align: "right", sortable: false }
],
viewrecords: true,
pager: "#pager",
rowNum: 5,
rownumbers: true,
rowList: [5, 10, 15],
height: 'auto',
width: '500',
caption: "My first grid",
});
});
</script>
and the method which return the list of data is
[HttpGet]
public JsonResult GetAllMovies()
{
var jsonObj = Json(movieAccessLayer.GetAllMovies());
return Json(jsonObj, JsonRequestBehavior.AllowGet);
}
response string:
[{"Id":66,"Title":"BibUtt","Director":"Amal Neeradh","ReleaseDate":"2006-12-12T00:00:00"},{"Id":67,"Title":"Rojaa","Director":"ManiRathnam","ReleaseDate":"1992-05-11T00:00:00"},{"Id":71,"Title":"dwed","Director":"ece","ReleaseDate":"2012-12-12T00:00:00"},{"Id":72,"Title":"Test","Director":"qqwqww","ReleaseDate":"2015-02-09T00:00:00"}]
But the problem is: JQgrid and the header row is displaying but the remaining rows are not showing. The controller method is also correct and it will return a list of object.
Please help me.
I suppose that you posted not exact the data which returns the controller. You call Json twice which is the first error. The jsonObj have already System.Web.Mvc.JsonResult type. So it have the required data inside of Data property. Then you use Json(jsonObj, JsonRequestBehavior.AllowGet); which wraps the returned results and the GetAllMovies will returns the data like
{
"ContentEncoding":null,
"ContentType":null,
"Data":[{"Id":66,"Title":"BibUtt",...},...],
"JsonRequestBehavior":1,
"MaxJsonLength":null,
"RecursionLimit":null
}
instead of JSON data which you posted. So you should fix the code of GetAllMovies to the following
[HttpGet]
public JsonResult GetAllMovies()
{
return Json(movieAccessLayer.GetAllMovies(), JsonRequestBehavior.AllowGet);
}
After the fix you should already see the results. I would recommend you to make additionally some simple changes in the code which creates the grid. For example
$("#list").jqGrid({
url: "/Movies/GetAllMovies",
datatype: "json",
loadonce: true,
gridview: true,
autoencode: true,
jsonReader: { id: "Id" },
colNames: ["Id", "Title", "Director", "Date"],
colModel: [
{ name: "Id", sorttype: "int" },
{ name: "Title" },
{ name: "Director" },
{ name: "ReleaseDate", align: "right", formatter: "date", sorttype: "date" }
],
viewrecords: true,
pager: "#pager",
rowNum: 5,
rownumbers: true,
rowList: [5, 10, "10000:All"],
height: "auto",
width: 500,
caption: "My first grid",
});
Related
I want to get all row ids by use of row css class of a jqgrid in a method called in gridcomplete.But it is only returning rows of current page.
I want to get all row ids present in the jqgrid.
Below is my code.
function GetAllCompanyProducts(productData) {
/// <summary>method to load the Proposal grid</summary>
//Load the grid
var tabelWidth = $("#tblCompanyProducts").width();
jQuery("#tblCompanyProducts").jqGrid({
datatype: 'local',
data: productData,
jsonReader: { repeatitems: false },
loadui: "block",
autowidth: true,
mtype: 'get',
rowNum: 30,
rowList: [30, 100, 200],
viewrecords: true,
colNames: ['ProductId', 'ProductName', 'Price'],
colModel: [
{ name: 'ProductId', index: 'ProductId', width: '30%' },
{ name: 'ProductName', index: 'ProductName', width: '30%' },
{ name: 'Price', index: 'Price', width: '30%' }
],
sortname: 'ProductId',
sortorder: 'asc',
caption: "Product List",
width: tabelWidth - 10,
pager: '#divPager',
height: "100%",
hoverrows: true,
onPaging: function () {
$("#tblCompanyProducts").trigger('reloadGrid');
},
});
$("#tblCompanyProducts").jqGrid('setGridParam', { gridComplete: MakeGridRowsDraggable($("#" + this.id)) });
}
function MakeGridRowsDraggable(grid) {
/// <summary></summary>
/// <param name="grid" type=""></param>
//$("#tblCompanyProducts").val(new Date().getTime());
var searchResultsRows = $("#tblCompanyProducts .ui-row-ltr");
}
The above code returning only the rows set in the first page.
Can anybody help me on this..
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.
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.
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.
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");