I have some problem with local data sorting in this example. Sorting doesn't work and I don't know reason of it. Could you explain problem in my code?
<table id="list" ></table>
<div id="pager"></div>
<script type="text/javascript">
var myData = [
{ id: "1", cell: ["1", "test"] },
{ id: "2", cell: ["2", "test2"] },
{ id: "3", cell: ["3", "test3"] },
{ id: "4", cell: ["4", "test4"] }
];
jQuery("#list").jqGrid({
data: myData,
datatype: "local",
colNames: ['MyId','Client'],
colModel: [{ name: 'MyId', index: 'MyId', width: 100, align: 'left' , sortable: true},
{ name: 'Client', index: 'Client', width: 100, align: 'left', sortable: true }],
rowNum:10,
rowList:[10,20,30,100],
pager: '#pager',
sortname: 'Id',
localReader: {repeatitems: true},
viewrecords: true,
sortable: true,
sortorder: "asc",
caption: "Tests",
loadonce: true
});
jQuery("#list").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false });
</script>
P.S. Sorting also doesn't work in this demo with local data. http://www.ok-soft-gmbh.com/jqGrid/LocalReader.htm
You are right: jqGrid have bug in usage datatype: "local" with data parameter in localReader: {repeatitems: true} format.
There are many ways to fix the bug. One from the most easy one seems me to replace the lines
if(locdata || ts.p.treeGrid===true) {
rd[locid] = $.jgrid.stripPref(ts.p.idPrefix, idr);
ts.p.data.push(rd);
ts.p._index[rd[locid]] = ts.p.data.length-1;
}
with the following
if(locdata || ts.p.treeGrid===true) {
rd[locid] = $.jgrid.stripPref(ts.p.idPrefix, idr);
ts.p.data.push(rd);
ts.p._index[rd[locid]] = ts.p.data.length-1;
} else if (ts.p.datatype === "local" && dReader.repeatitems) {
var idStripted = $.jgrid.stripPref(ts.p.idPrefix, idr),
iData = ts.p._index[idStripted];
if (iData !== undefined && ts.p.data != null && ts.p.data[iData] != null) {
$.extend(true, ts.p.data[iData], rd);
}
}
The demo uses the fixed code and it works correctly now. I will post later the corresponding pull request with suggested fix to trirand.
UPDATED: I posted better implementation of the fix in the pull request.
UPDATED 2: My pull request is already merged to the main code of jqGrid on the github. You can do the same changes on jquery.jqGrid.srs.js, download the modified file from here. In any way the next version of jqGrid (version higher as 4.6.0) will contains the fix of described problem.
Related
My jqgrid is working perfectly but now i am implementing the subgrid. It shows the + sign and when i click on it the blank row displayed with loading.... this is the client side code
$(document).ready(function () {
$("#Grid").jqGrid({
url: '/Home/GetDetails',
datatype: 'json',
myType: 'GET',
colNames: ['id','Name', 'Designation', 'Address', 'Salary'],
colModel: [
{ key: false, name: 'Id', index: 'Id', },
{ key: false, name: 'Name', index: 'Name', editable: true },
{ key: false, name: 'Designation', index: 'Designation', editable: true },
{ key: false, name: 'Address', index: 'Address', editable: true },
{ key: false, name: 'Salary', index: 'Salary', editable: true }
],
jsonReader: {
root: 'rows',
page: 'page',
total: 'total',
records: 'records',
id: '0',
repeatitems: true
},
pager: $('#pager'),
rowNum: 10,
rowList: [10, 20, 30],
width: 600,
viewrecords: true,
multiselect: true,
sortname: 'Id',
sortorder: "desc",
caption: 'Employee Records',
loadonce: true,
gridview: true,
autoencode: true,
subGrid: true,
subGridUrl: '/Home/Subgrid',
subGridModel: [{
name: ['No', 'Item','Quantity'],
width: [55, 55,55]
}
],
}).navGrid('#pager', { edit: true, add: true, del: true },
{
zIndex: 100,
url: '/Home/Edit',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
afterComplete: function (response) {
if (response.responseText)
{
alert(response.responseText);
}
}
},
{
zIndex: 10,
url: '/Home/Add',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
},
{
zIndex: 100,
url: '/Home/Delete',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
}
);
});
Subgrid url action method is as below:
public JsonResult Subgrid(String id)
{
Database1Entities db = new Database1Entities();
Product p= new Product {No=1,Item="Juice",Quantity=23};
var jsondata = new { rows=2,
cell = new string[] { p.No.ToString(),
p.Item,p.Quantity.ToString()}.ToArray()
};
return Json(jsondata, JsonRequestBehavior.AllowGet);
}
I am doing this first time. What is the mistake?Thanks in advance
I don't recommend you to use subGridModel. Instead of that it's much more flexible to use Subgrid as Grid. If the user clicks "+" icon (expand subgrid) then jqGrid just inserts empty row under selected with simple structure described in the answer for example. The id of the <div> where some custom "subgrid" information need be displayed will be the first parameter of subGridRowExpanded callback which you need to implement. The second parameter is the rowid of the expending row. By implementing the corresponding callback you can create any custom "subgrid". See the old answer for very simple demo.
So what you need to do is just write the code which creates grid which will be placed in subgrid row. It's only strictly recommended to use idPrefix parameter which used any values which depends from subgriddivid or parent rowid. Additionally you can consider to use autowidth: true option for subgrid, which will make the width of subgrid be exact correspond to the width of the main grid. Of cause to have rowid of the parent row send as id parameter to '/Home/Subgrid' you need use postData: { id: rowid }. See the code from the answer for example which I referenced previously.
I am new to jQuery, and I need to use jqGrid in my project.
I have one problem with edit/delete/insert; I have only one URL, editurl, then in the controller I am using the oper property to decide whether it is an insert or delete operation.
But I want to have a separate URL for the edit, delete and insert operations in jqGrid. Could you please let me know how to achieve that?
Client side code:
$(document).ready(function () {
var lastsel2;
var grid = jQuery("#list5").jqGrid({
url: '/home1/GetUserData',
datatype: "json",
mtype: "POST",
colNames: ['Code', 'LoginID', 'Emailid', 'CreateDate'],
colModel: [
// { name: 'act', index: 'act', width: 75, sortable: false },
{name: 'Code', index: 'Code', width: 55, editable: true },
{ name: 'LoginID', index: 'LoginID', width: 90, editable: true },
{ name: 'Emailid', index: 'Emailid', width: 100, editable: true },
{ name: 'CreateDate', index: 'CreateDate', width: 100, editable: true }
],
rowNum: 10,
width: 700,
height: 300,
rowList: 10,
pager: $("#pager2"),
editurl: "/home1/EditUserData",
onSelectRow: function (id) {
if (id && id !== lastsel2) {
if (id == "new_row") {
grid.setGridParam({ editurl: "/home1/InsertUserData" });
}
else {
grid.setGridParam({ editurl: "/home1/EditUserData" });
}
jQuery('#list5').restoreRow(lastsel2);
$("#list5_ilsave").addClass("ui-state-disabled");
$("#list5_ilcancel").addClass("ui-state-disabled");
$("#list5_iladd").removeClass("ui-state-disabled");
$("#list5_iledit").removeClass("ui-state-disabled");
lastsel2 = id;
}
},
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, del: true, search: false, refresh: false });
});
You can pass options for all the actions with navGrid method like this:
jQuery('#list5').jqGrid('navGrid', '#pager2', { edit: true, add: true, del: true },
//edit options
{ url: '/home1/EditUserData' },
//add options
{ url: '/home1/AddUserData' },
//delete options
{ url: '/home1/DeleteUserData' }
);
Please read more here and here.
UPDATE
In case of inlineNav method jqGrid is always passing the same set of parameters (editParams) to saveRow method. As the effect the edit/add request will be made to the same URL. You are sticked with checking oper to distinguish edit for add.
In the subject of reloading the grid you can use editParams to set aftersavefunc to trigger realoadGrid like this:
jQuery('#list5').jqGrid('inlineNav', '#pager2', { edit: true, add: true, editParams: {
aftersavefunc: function(rowId, response) { jQuery('#list5').trigger('reloadGrid'); }
}});
But you should remember that it will also cause a refresh after edit (because of the same reason as described above) - you may try to use response parameter to distinguish those two. I have also removed del, search and refresh from the code as inlineNav doesn't have those options.
I have an interesting issue. I have done this on multiple pages with multiple grids. The first grid works fine the second grid in this case fails to load. and give the following error:
this.p is undefined
...sArray(i)){P=true;h="last";U=f}else{i=[i];P=false}this.each(function(){var D=i.l... line 140 jquery.jqGrid.min.js
The user doble clicks on a row and that sets some variables and then calls the function locationGrid().
Like I said this has worked for me multiple times in the past, however on this page it fails. I have double checked and I am getting data back as shown below:
{"d":"{\"total\":1,\"page\":0,\"records\":1,\"rows\":[{\"invPartLocId\":1053,\"inventoryMasterId\":5,\"location\":null,\"itemType\":\"S\",\"currentQanity\":1,\"adjustedQauntity\":0,\"newLocationQty\":0,\"deptCode\":\"1401 \"}]}"}
Any help would be appreciated.
function locationGrid() {
$('#invLocAdjustGrid').jqgrid({
height: 290,
loadui: "block",
datatype: function (rdata) { getLocationData(rdata); },
colNames: ['invPartID', 'locationPartID', 'Loctaion', 'Type', 'Current QTY', 'Adjusted QTY', 'New Location QTY', 'Dept. Code'],
colModel: [
{ name: 'invPartLocId', width: 2, sortable: false, editable: false, hidden: true },
{ name: 'inventoryMasterId', width: 2, sortable: false, editable: false, hidden: true },
{ name: 'location', width: 250, editable: false, sortable: false },
{ name: 'itemType', width: 120, editable: false, sortable: false, align: 'center' },
{ name: 'currentQanity', width: 50, editable: false, sortable: false },
{ name: 'adjustedQauntity', width: 50, editable: false, sortable: false },
{ name: 'newLocationQty ', width: 50, editable: false, sortable: false },
{ name: 'deptCode', width: 50, editable: false, sortable: false }
],
pager: jQuery('#rptCodesPager'),
viewrecords: true,
width: 890,
gridComplete: function () {
$('#load_invLocAdjustGrid').hide();
$(this).prop('p').loadui = 'enable';
$('#lui_invLocAdjustGrid').hide();
},
afterInsertRow: function (rowid, aData) {
},
ondblClickRow: function (rowid) {
var myID = $('#invLocAdjustGrid').getCell(rowid, 'invPartLocId');
Ldclicked(myID);
}
});
}
function getLocationData(rdata) {
var theID = tempID;
tempID = "";
var myDTO = { 'id': theID };
var toPass = JSON.stringify(myDTO);
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "INV_Inventory_Adjustment.aspx/getInventoryLocationById",
data: toPass,
success: function (data, textStatus) {
if (textStatus == "success")
ReceivedLocationData(JSON.parse(getMain(data)).rows);
},
error: function (data, textStatus) { alert('An error has occured retrieving data!'); }
});
}
function ReceivedLocationData(data) {
var thegrid = $('#invLocAdjustGrid');
var isGood = data.length;
for (var i = 0; i < isGood; i++) {
thegrid.addRowData(i + 1, data[i]);
}
}
Sorry, but your code is buggy. Moreover I recommend you to rewrite the whole code and I try to explain why.
The first important error is that you use $('#invLocAdjustGrid').jqgrid({...}); in the locationGrid instead of $('#invLocAdjustGrid').jqGrid({...});. JavaScript is case sensitive, so it's very important to use jqGrid instead of jqgrid.
Next problem exist because you use some variables and functions tempID, Ldclicked and getMain which you not defined in the posted code.
After making minimal changes the demo works. I commented only "POST" to use HTTP GET because I get the JSON directly from the file and have no active components on the wed server.
One more problem which you clear have is that your server code serialize the results twice. Typically one have the problem because of wrong usage of ASMX WebMethods. One should not convert the object to JSON manually. Instead of that one need just return the object itself. Because of the problem the d property of the JSON are not the object itself and is a string which should be one more time be parsed:
{
"d": "{\"total\":1,\"page\":0,\"records\":1,\"rows\":[{\"invPartLocId\":1053,\"inventoryMasterId\":5,\"location\":null,\"itemType\":\"S\",\"currentQanity\":1,\"adjustedQauntity\":0,\"newLocationQty\":0,\"deptCode\":\"1401 \"}]}"
}
Even such wrong formatted data can be read by jqGrid without usage datatype as function. Moreover you should always use gridview: true and never use afterInsertRow and almost never use addRowData. The modified code can be about the following:
var tempID = "abc";
$('#invLocAdjustGrid').jqGrid({
url: "INV_Inventory_Adjustment.aspx/getInventoryLocationById",
mtype: "POST",
datatype: "json",
postData: {
id: function () { return tempID; } // ??? I don't know which data should be send
},
ajaxGridOptions: { contentType: "application/json" },
serializeRowData: function (data) {
return JSON.stringify(data);
},
beforeProcessing: function (data) {
$.extend (true, data, $.parseJSON(data.d));
},
jsonReader: {repeatitems: false},
loadonce: true,
colNames: ['invPartID', 'locationPartID', 'Loctaion', 'Type', 'Current QTY', 'Adjusted QTY', 'New Location QTY', 'Dept. Code'],
colModel: [
{ name: 'invPartLocId', width: 2, key: true, hidden: true },
{ name: 'inventoryMasterId', width: 2, hidden: true },
{ name: 'location', width: 250 },
{ name: 'itemType', width: 120, align: 'center' },
{ name: 'currentQanity' },
{ name: 'adjustedQauntity' },
{ name: 'newLocationQty ' },
{ name: 'deptCode' }
],
cmTemplate: {sortable: false, width: 50},
pager: '#rptCodesPager',
viewrecords: true,
gridview: true,
loadui: "block",
height: 290,
width: 890,
ondblClickRow: function (rowid) {
//Ldclicked(rowid);
}
});
The next demo demonstrate that the code work. I included in the demo the option loadonce: true which can be helpful for you too.
Ive got a jqGrid where i have a some columns and 1 of the columns is a dropdownlist(select) populated from database.
What i want is : When im not in editmode column with dropdowns just have to show text which have to be taken from query, and when im in edit mode it should show dropdown list.
exactly like here: http://www.trirand.com/blog/jqgrid/jqgrid.html go into row editing/input tipyes
here is the code for my grid:
<script type="text/javascript">
var lastsel;
$(document).ready(function () {
$.getJSON('#Url.Action("ConstructSelect")', function (data) {
setupGrid(data);
});
});
function setupGrid(data) {
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '#Url.Action("GetStoreList")',
datatype: 'json',
mtype: 'GET',
colNames: ['Butiks kategori', 'Butik Navn', 'By', 'Sælger'],
colModel: [
{ name: 'Id', index: 'Id', width: 50 },
{ name: 'Butiks Kategori', index: 'StoreId', width: 200, edittype: 'text', align: 'center', editable: false },
{ name: 'Buttiks Navn', index: 'StoreName', width: 200, edittype: 'text', align: 'center', editable: false },
{ name: 'Country', index: 'Country', width: 80, sortable: true, editable: true, edittype: "select", editoptions: { value: data }}],
onSelectRow: function (id) {
if (id && id !== lastsel) {
jQuery('#list').jqGrid('restoreRow', lastsel);
jQuery('#list').jqGrid('editRow', id, true);
lastsel = id;
}
},
editurl: '#Url.Action("GridSave")',
rowNum: 50000,
rowList: [5, 10, 20, 50],
pager: '#page',
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
height: "500px",
imgpath: '/scripts/themes/base/images'
});
jQuery("#list").jqGrid('navGrid', "#page", { edit: false, add: false, del: false });
});
}
</script>
P.S. Ill link code as soon as i am back home
UPDATED: Thanks for an answer, im new to jq, so im making alot of mistakes ofc., but now im back to where i was before, the dropdownlist is not populated with data. i cleaned up the code as u said, so it looks like this now:
btw. The ConstructSelect return a list of Strings
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '#Url.Action("GetStoreList")',
ajaxSelectOptions: { type: "POST", dataType: "json" },
datatype: 'json',
mtype: 'GET',
colNames: ['Butiks kategori', 'Butik Navn', 'By', 'Sælger'],
colModel: [
{ name: 'Kategori', index: 'Kategori', width: 50, key: false},
{ name: 'Navn', index: 'Navn', align: 'center', editable: false },
{ name: 'By', index: 'By', align: 'center', editable: false },
{ name: 'Sælger', index: 'Sælger', editable: true, edittype: "select",
editoptions: { dataUrl: '#Url.Action("ConstructSelect")',
buildSelect: function (data) {
var response = jQuery.parseJSON(data.responseText);
var s = '<select>';
if (response && response.length) {
for (var i = 0, l = response.length; i < l; i++) {
var ri = response[i];
s += '<option value="' + ri + '">' + ri + '</option>';
}
}
return s + "</select>";
}
}
}],
onSelectRow: function (id) {
if (id && id !== lastsel) {
jQuery('#list').jqGrid('restoreRow', lastsel);
jQuery('#list').jqGrid('editRow', id, true);
lastsel = id;
}
},
editurl: '#Url.Action("GridSave")',
rowNum: 50000,
rowList: [5, 10, 20, 50],
pager: '#page',
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
height: "900px"
});
jQuery("#list").jqGrid('navGrid', "#page", {edit:false, add:false, del:false});
});
Okay, slight modifications was needed to get it working :
var response = typeof(data) === "string" ? jQuery.parseJSON(data.responseText):data;
aparently u have to tell buildselect that the data u want to modify is String
But i still have the problem that it doesnt show from begining which sellers is already selected!
Okay after restart it mysticly worked... it is solved now
What you need to do is to use
editoptions: { dataUrl: '#Url.Action("ConstructSelect")' }
instead of
editoptions: { value: data }
Depend on the format of the output of the action ConstructSelect you can need to use an additional property buildSelect of the editoptions. jqGrid expected that the server response on the HTTP 'GET' request of dataUrl will be HTML fragment which represent <select>. For example:
<select>
<option value="de">Germany</option>
<option value="us">USA</option>
</select>
If the server return other formatted data, like JSON data
["Germany","USA"]
or
[{"code":"de","display":"Germany"},{"code":"us","display":"USA"}]
you can write JavaScript function which convert the server response to the HTML fragment of the <select> and set the value of the property buildSelect to the function.
In the answer you will find an example of the function.
If your action support only HTTP POST and no GET you will have to use ajaxSelectOptions: { type: "POST" } parameter additionally, to overwrite the type of the corresponding ajax requests. In the same way you can overwrite other ajax parameters. For example you can use
ajaxSelectOptions: { type: "POST", dataType: "json"}
(defaults are type : "GET" and dataType: "html")
Some other small remarks to the code:
you should not place $(document).ready(function () { inside of another $(document).ready(function () {.
You use 'Id' instead of 'id'. So jqGrid will not find the id property. You can a) rename
'Id' to 'id' b) include additional parameter jsonReader: {id: 'Id'} c) include additional property key: true in the definition of the column 'Id'. Any from the ways will solve the described problem.
You can remove default properties like edittype: 'text', sortable: true or editable: false. See jqGrid documentation which describes the default values of all colModel properties.
You should remove imgpath parameter of jqGrid. The parameter is not exist since many many versions of jqGrid (see here).
I want to display a combobox with add/edit dialog on Jqgrid. I could do it with hardcoded values. But now I want to populate data from database (controller action). Can anyone help me writting the controller code for DataUrl. (Does it need Json formatted string of Value & Text?). My Grid definition is as below.
My other url actions are working fine.
jQuery("#myGrid").jqGrid({
pager: jQuery('#myGridPager'),
sortname: 'Name',
rowNum: 10,
rowList: [10, 20, 50],
sortorder: "asc",
height: "auto",
autowidth: true,
colNames: ['Id', 'Name', 'Dept', 'Status', 'ParentNodeName'],
colModel: [
{ name: 'Id', index: 'Id', hidden: true, key : true },
{ name: 'Name', index: 'Name', width: 200, editable: true, edittype: "text", editrules: { required: true} },
{ name: 'Dept', index: 'Dept', width: 90, editable: true, editrules: { required: true} },
{ name: 'Status', index: 'Status', width: 25, editable: true, edittype: "select", editoptions: { value: "A:Active;I:Inactive"} },
{ name: 'ParentNodeName',
index: 'ParentNodeName',
editable: true,
edittype: "select",
editoptions: { dataUrl: "/MyEntity/GetMyEntitys" }
},
],
datatype: 'json',
viewrecords: true,
mtype: 'GET',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
userdata: "userdata"
},
url: "/MyEntity/GetMyEntitysData",
multiselect: false,
editurl: "/MyEntity/EditMyEntity?__SESSIONKEY=<%=Model.SessionKey %>",
caption: "Data Entry"
})
.navGrid('#myGridPager', { view: true, del: true, add: true, edit: true },
{ height: 150, reloadAfterSubmit: false, modal: true }, // default settings for edit
{ height: 150, reloadAfterSubmit: true, modal: true, url: "/MyEntity/AddMyEntity?__SESSIONKEY=<%=Model.SessionKey %>" }, // settings for add
{ height: "auto", reloadAfterSubmit: false, modal: true, url: "/MyEntity/DeleteMyEntity?__SESSIONKEY=<%=Model.SessionKey %>" }, // delete
{ closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options
{} /* view parameters*/
);
Call controller code in dataUrl using edit options as below:
.aspx/js code:
editoptions: { dataUrl: "/YourControllerName/TheFunction" }
The controller code here:
public string TheFunction()
{
return ConstructSelect(Model.YourList);
}
public string ConstructSelect(SelectList collection)
{
string result = "<select>";
foreach (var item in collection)
{
result = result + "<option value = '" + item.Value + "'>" + item.Text + "</option>";
}
result = result + "</select>";
return result;
}
jqGrid wait for HTML code fragment (a valid HTML <select> element with the desired <options>: <select><option value='1'>One</option>…</select>) as the data returned from the dataUrl: "/MyEntity/GetMyEntitys". Because you return the data in JSON format you have to convert the data returned from the server with respect of the editoptions buildSelect. You can see the corresponding code example in my old answer.
One more small remark. Look at the jqGrid documentation and verify which parameters which you use are default. For example multiselect: false is default parameter. If you remove the default parameters from the grid definition the code wil be easier to read and it will work a litle bit quickly. In more complex parameters like jsonReader you could include only the properties which you want to change. For example you can use jsonReader in the form jsonReader : { repeatitems: true} because repeatitems is the only property of jsonReader which you want to change from the default settings. In the same way you can reduce { view: true, del: true, add: true, edit: true } to { view: true }.