Develop Reference

jqGrid not filtering

I have implemented the autocomplete filter functionality in my jqGrid.
However this is not working, I believe there are 2 issues.
I have a column which uses a formatter. With this column included, the filtering will not trigger a load at all. Without this column, the filtering will trigger a load, however will not filter the results.
I have read that the index or jsonmap must be the same as the name in the colModel in order for filtering to work. I have ensured that these match, still with no luck.
Code:
loadData: function (someData) {
$(model.table).GridUnload();
$(model.table).jqGrid({
url: $(model.tableURL).val(),
datatype: 'JSON',
mtype: 'POST',
postData: {
someData: someData
},
emptyrecords: 'No Wholesalers',
viewrecords: true,
autowidth: true,
shirnkToFit: false,
rowNum: -1,
loadtext: 'Loading...',
multiselect: false,
width: "100%",
height: "100%",
colModel: [
{ label: 'Wholesaler', name: 'WholesalerName', jsonmap: 'WholesalerName', sortable: false, align: 'center', width: '250' },
{
label: 'Amount Complete', name: 'PercentageComplete', jsonmap:'PercentageComplete', search: false, sortable: false, align: 'center',
formatter: function (cellvalue, options, rowObj) {
return '<div class="progress progress-striped pos-rel" data-percent="' + rowObj.PercentageComplete + '%">' +
'<div class="progress-bar progress-bar-success" style="width:' + rowObj.PercentageComplete + '%;"></div></div>';
}
},
{ label: 'No of Customers', name: 'NoOfCustomers', jsonmap: 'NoOfCustomers', search: false, sortable: false, align: 'center' },
{ label: 'Last Updated', name: 'LastUpdated', jsonmap: 'LastUpdated', search: false, sortable: false, align: 'center' },
{ label: 'Last Update By', name: 'LastUpdateBy', jsonmap: 'LastUpdateBy', search: false, sortable: false, align: 'center' },
],
altrows: true,
loadComplete: function () {
var table = this;
//model.update()
},
loadError: function (xhr, st, err) {
alert(err);
}
}
).jqGrid('filterToolbar', {
stringResult: true, searchOnEnter: false, ignoreCase: true,
})
},

Turns out I didn't have loadonce: true set.
Therefore when filtering on keypress, the grid was being reloaded and re populated with data from the server.

Get Jqgrid Column checkbox cheked value using MVC

I have to implement one good looking Grid in MVC4+Razor. Till now I have done by using jqgrid. Since I am new to jQuery grid, can someone suggest how to get checked checkbox value in column of checkbox of some id? Can someone help me how I can get that checkbox checked values in jgrid? I am attaching my HTML and Javascript code. So please send me solution using sample code.
Javascript code:
(function ($) {
$('#JQGrid1').jqGrid({
url: '/ExamForm/GetSubjects/',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'GET',
width: 950,
height: 150,
colNames:['SubjectID', 'SubjectName', 'GroupName', ' SubjectCode'],
colModel:[
{name: "SubjectID", width: 70, align: "center",
formatter: "checkbox", formatoptions: { disabled: false},
edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "No"},
stype: "select", searchoptions: { sopt: ["eq", "ne"],
value: ":Any;true:Yes;false:No" },key:true },
{ name: 'SubjectName', index: 'SubjectName', width: 60 },
{
name: 'GroupName', index: 'GroupName', width: 60, editable: true,
editrules: {
required: true,
edithidden: true
},
hidden: true
},
{ name: 'SubjectUniversityCode', index: 'SubjectUniversityCode', width: 20 }
],
rowNum: 100,
//loadonce: true,
grouping: true,
groupingView: {
groupField: ['GroupName']
},
multiselect: true
});
})(jQuery);
Get Selected row i have use following function
function getSelectedRows() {
var grid = $("#JQGrid1");
var rowKey = grid.getGridParam("selrow");
if (!rowKey)
alert("No rows are selected");
else {
var selectedIDs = grid.getGridParam("selarrrow");
var result = "";
for (var i = 0; i < selectedIDs.length; i++) {
result += selectedIDs[i] + ",";
}
alert(result);
}
});

to add button which will redirect to View Page of current row in JQGrid

I am trying to add button instead of View column but i tried with formatter still button is not loading but records are coming for the rest of the columns.
Below is my code:
$(function () {
$("#grid").jqGrid({
url: "/Location/LocationsList1",
datatype: 'json',
mtype: 'Get',
colNames: ['Id', 'Country Name', 'State Name', 'City Name', 'Location Name','View'],
colModel: [
{ key: true, hidden: true, name: 'Id', index: 'Id', editable: true },
{ key: false, name: 'CountryName', index: 'CountryName', editable: true },
{ key: false, name: 'StateName', index: 'StateName', editable: true },
{ key: false, name: 'CityName', index: 'CityName', editable: true },
{ key: false, name: 'Name', index: 'Name', editable: true },
{ key: false, name: 'View', index: 'View', editable: true,formatter:ViewButton }],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
viewrecords: true,
caption: 'Location',
emptyrecords: 'No records to display',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
},
});
});
function ViewButton(cellvalue, options, rowObject) {
var rowid= options.rowid;
var button = "<button class=\"viewLineItem\" id="+ rowid+">View Line Item</button>"
$('#' + rowid).die();
$('#' + rowid).live('click', function (rowId) {
alert("hi");
alert(rowId);
});
};
I am new to JqGrid and don't know how it works. Any guidance/Help will be appreciated.

The code has some problems
options has no rowid property, but it has rowId property. You should change options.rowid to options.rowId
The formatter will be called during building the HTML fragment of the grid body. No element of the grid exist at the moment on the page. Thus you can't use $('#' + rowid).live('click', ...); at the moment.
The formatter have to return the HTML fragment, which will be placed in the corresponding cell (inside of <td>). One misses return button; at the end of the formatter.
There are exist well-known name conversion in JavaScript. One should use functions, which starts with capital letter only if you define the constructor of the new class. You see that ViewButton will be displayed in the other color to distinguish classes from other function. You should rename ViewButton to viewButton to hold the standard name conversion of JavaScript.
It's better don't specify index property in colModel. In the same way one should not include the properties with the defaul value, like key: false. To specify common property for many columns you can use cmTemplate property.
One should reduce the number of global functions, because the functions will be considerd as the properties of window object.
instead of usage hidden column with name: 'Id' one can specify id: 'Id' property of jsonReader. You use repeatitems: false property, which means that every item of input data has properties CountryName, StateName and so on. The default name of the id property (the rowid - the id of <tr> elements) is id, but you use Id instead. The property id: "Id" informs jqGrid about it.
The modified code could be about the following
$(function () {
function viewButton(cellvalue, options, rowObject) {
return "<button class=\"viewLineItem\" id=\"" +
options.rowId + "\">View Line Item</button>";
}
$("#grid").jqGrid({
url: "/Location/LocationsList1",
datatype: 'json',
colNames: ['Id', 'Country Name', 'State Name', 'City Name', 'Location Name','View'],
colModel: [
{ name: 'Id', key: true, hidden: true },
{ name: 'CountryName' },
{ name: 'StateName' },
{ name: 'CityName' },
{ name: 'Name' },
{ name: 'View', editable: false, formatter: viewButton }
],
cmTemplate: { editable: true },
pager: '#pager',
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
viewrecords: true,
caption: 'Location',
emptyrecords: 'No records to display',
jsonReader: { repeatitems: false, id: "Id" }
});
$("#jqGridA").click(function (e) {
var $td = $(e.target).closest("tr.jqgrow>td"),
rowid = $td.parent().attr("id"),
p = $(this).jqGrid("getGridParam");
if ($td.length > 0 && p.colModel[$td[0].cellIndex].name === "View") {
alert(rowid);
}
});
});
The last part of the above code ($("#jqGridA").click(...);) register one click handler for the whole grid. If the user clicks on any cell then the event handler will be called because of event bubbling. The e.target gives as the DOM element, which was clicked (for example the <button>). By using closest we can go to the outer <td> element, which parent is the row (<tr>) of the grid. The .attr("id") of the row is the rowid. Such binding works more effectively as binding click handler to every button inside of the grid.
By the way jqGrid has already one click event handler. One can use beforeSelectRow callback, because it will be called inside of the click handler. One should only don't forget to return true from the beforeSelectRow callback to inform jqGrid that you allow to select the row. The callback beforeSelectRow has already rowid as the first parameter, which simplify our code a little. The final code will be
$(function () {
function viewButton(cellvalue, options, rowObject) {
return "<button class=\"viewLineItem\" id=\"" +
options.rowId + "\">View Line Item</button>";
}
$("#grid").jqGrid({
url: "/Location/LocationsList1",
datatype: 'json',
colNames: ['Id', 'Country Name', 'State Name', 'City Name', 'Location Name','View'],
colModel: [
{ name: 'CountryName' },
{ name: 'StateName' },
{ name: 'CityName' },
{ name: 'Name' },
{ name: 'View', editable: false, formatter: viewButton }
],
cmTemplate: { editable: true },
pager: '#pager',
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
viewrecords: true,
caption: 'Location',
emptyrecords: 'No records to display',
jsonReader: { repeatitems: false, id: "Id" },
beforeSelectRow: function (rowid, e) {
var $td = $(e.target).closest("tr.jqgrow>td"),
p = $(this).jqGrid("getGridParam");
if ($td.length > 0 && p.colModel[$td[0].cellIndex].name === "View") {
alert(rowid);
}
}
});
});

Unable to set date format & dropdown text in jqGrid

I am using jqGrid to display data. Data is in xml format.
I am unable to format date column (source format : yyyyMMdd, target format : dd-mm-yyy).
My Grid is unable to display text value from select, It shows values instead of text.
Strange thing is it is working in some other screen.
<SalesOpportunitiesLines>
<row>
<LineNum>0</LineNum>
<SalesPerson>1</SalesPerson>
<StartDate>20131126</StartDate>
<ClosingDate>20131126</ClosingDate>
<StageKey>1</StageKey>
<PercentageRate>0.000000</PercentageRate>
<MaxLocalTotal>1000000.000000</MaxLocalTotal>
<DocumentType>bodt_MinusOne</DocumentType>
<BPChanelName>ACCM Services</BPChanelName>
<BPChanelCode>CLINAC0709</BPChanelCode>
<SequenceNo>366</SequenceNo>
<DataOwnershipfield>1</DataOwnershipfield>
<BPChannelContact>1212</BPChannelContact>
</row>
</SalesOpportunities>
$("#uxStages").jqGrid({
datatype: 'xmlstring',
datastr: xmlstring,
mtype: 'GET',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
xmlReader: { repeatitems: false, root: "BO>SalesOpportunitiesLines", row: 'row' },
colNames: ['LineNum', 'Star tDate', 'Clos Date', 'Sales Employee', 'Stage', 'Percentage', 'Potential Amount', 'Document Type', 'Doc. No.', 'Owner'],
colModel: [
{ name: 'LineNum', key: true, index: 'LineNum', hidden: true, sortable: false, width: 60 },
{ name: 'StartDate', key: false, index: 'StartDate', sortable: false, align: "left", width: 90,
editable: true,
formatter: 'date',
formatoptions: { srcformat: 'yyyyMMdd', newformat: 'd-M-y' },
editoptions: {
dataInit: function (elem) {
$(elem).datepicker({ dateFormat: 'dd-M-yy' });
}
}
},
{ name: 'ClosingDate', key: false, index: 'ClosingDate', sortable: false, align: "left", width: 90,
editable: true,
formatter: 'date',
formatoptions: { srcformat: 'yyyyMMdd', newformat: 'd-M-y' },
editoptions: {
dataInit: function (elem) {
$(elem).datepicker({ dateFormat: 'dd-M-yy' });
}
}
},
{ name: 'SalesPerson', key: false, index: 'SalesPerson', sortable: false, width: 80,
editable: true,
edittype: "select"
},
{ name: 'StageKey', key: false, index: 'StageKey', hidden: false, sortable: false, width:80,
editable: true,
edittype: "select"
},
{ name: 'PercentageRate', key: false, index: 'PercentageRate', sortable: false, width: 60 },
{ name: 'MaxLocalTotal', key: false, index: 'MaxLocalTotal', sortable: false, width: 100,
editable: true,
edittype: "text",
formatter: 'currency',
formatoptions: { thousandsSeparator: ',' }
},
{ name: 'DocumentType', key: false, index: 'DocumentType', sortable: false, width: 90,
editable: true,
edittype: 'select',
formatter: 'select',
editoptions: { value: "bodt_MinusOne:;bodt_Quotation:Sales Quotations;bodt_Order:Sales Orders;bodt_DeliveryNote:Deliveries;bodt_Invoice:A/R Invoice" }
},
{ name: 'DocumentNumber', key: false, index: 'DocumentNumber', sortable: false, width: 40 },
{ name: 'DataOwnershipfield', key: false, index: 'DataOwnershipfield', hidden: false, sortable: false, width: 60,
editable: true,
edittype: "select"
}
],
rowNum: 100,
viewrecords: true,
gridview: true,
rownumbers: true,
height: 150,
loadonce: true,
width: 1120,
scrollOffset: 0,
ondblClickRow: function (rowid) {
var grid = $("#uxStages");
var selectedRowId = grid.jqGrid('getGridParam', 'selrow');
lastSelection = selectedRowId;
grid.jqGrid('editRow', selectedRowId, true, null, null, null, null, OnSuccessEdit_Stages);
$('#' + selectedRowId + "_StageKey").css('width', '100%');
$('#' + selectedRowId + "_SalesPerson").css('width', '100%');
$('#' + selectedRowId + "_DataOwnershipfield").css('width', '100%');
},
loadComplete: function () {
var ids = $("#uxStages").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var id = ids[i];
if (i < ids.length - 1) {
$('#' + $.jgrid.jqID(id)).addClass('not-editable-row');
$('#' + $.jgrid.jqID(id)).addClass('ui-state-error');
}
}
},
onSelectRow: function (id) {
if (id && id !== lastSelection) {
var grid = $("#uxStages");
$('#uxStages').saveRow(lastSelection);
}
}
}).jqGrid('navGrid', { edit: true, edit: true, add: true, del: true, searchOnEnter: false, search: false }, {}, {}, {}, { multipleSearch: false }).trigger('reloadGrid');
$("#uxStages").setColProp('SalesPerson', { edittype: "select", editoptions: { value: GetSalesValues()} }); //Here i m fetching values in namedvalue pairs
$("#uxStages").setColProp('StageKey', { edittype: "select", editoptions: { value: GetStagesValues()} }); //Here i m fetching values in namedvalue pairs
$("#uxStages").setColProp('DataOwnershipfield', { edittype: "select", editoptions: { value: GetDataOwnershipValues()} }); //Here i m fetching values in namedvalue pairs
Can anybody help me out?

The predefined formatter: "date" of jqGrid don't support input fields without separators. So you have to use custom formatter. The implementation could be something like the following
formatter: function (cellValue, opts, rawdata, action) {
if (action === "edit") {
// input data have format "dd-mm-yy" format - "20-03-2015"
var input = cellValue.split("-");
if (input.length === 3) {
return input[0] + "-" + input[1] + "-" + input[2];
}
} else if (cellValue.length === 8) {
// input data have format "yymmdd" format - "20150320"
var year = cellValue.substr(0,4), month = cellValue.substr(4,2),
day = cellValue.substr(6,2);
return day + "-" + month + "-" + year;
}
return cellValue; // for empty input for example
}
Depend on other options (like the usage of loadonce: true) and depend on exact version of jqGrid which you use, you could need to implement additional callbacks in the column. For example if you use loadonce: true then the editing data will be saved locally. To hold the data in the same format as input data one can use saveLocally callback of free jqGrid (see here). In the case you can implement saveLocally callback in the column as the following
saveLocally: function (options) {
var input = String(options.newValue).split("-");
options.newItem[options.cmName] = input.length === 3 ?
input[2] + input[1] + input[0] :
options.newValue;
}
See the corresponding demo uses the above code. It uses local input data in the same format. The date will be displayed in the desired format, but the edited data will be saved locally in the same format like original date.

How to get the particular cell value in JQgrid

I have written a JQGrid which was working fine but I need to fill the sub grid based on the selected row of main grid. How can I get the selected row cell value to pass in the url of subgrid.
columns in the main grid ---- Id,Firstname,Lastname,Gender.
I need to get selected row of "Id" value.
Here is my script
$(document).ready(function () {
jQuery("#EmpTable").jqGrid({
datatype: 'json',
url: "Default1.aspx?x=getGridData",
mtype: 'POST',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: { repeatitems: false, root: "rows", page: "page", total: "total", records: "records" },
colNames: ['PID', 'First Name', 'Last Name', 'Gender'],
colModel: [
{ name: 'PID', width: 60, align: "center", hidden: true, searchtype: "integer", editable: true },
{ name: 'FirstName', width: 180, sortable: true, hidden: false, editable: true, sorttype: 'string', searchoptions: { sopt: ['eq', 'bw']} },
{ name: 'LastName', width: 180, sortable: false, hidden: false, editable: true },
{ name: 'Gender', width: 180, sortable: false, hidden: false, editable: true, cellEdit: true, edittype: "select", formater: 'select', editrules: { required: true, edithidden: true }, editoptions: { value: getAllSelectOptions()}}],
loadonce: true,
pager: jQuery('#EmpPager'),
rowNum: 5,
rowList: [5, 10, 20, 50],
viewrecords: true,
sortname: 'PID',
sortorder: "asc",
height: "100%",
editurl: 'Default1.aspx?x=EditRow',
subGrid: true,
// subGridUrl: 'Default1.aspx?x=bindsubgrid',
subGridRowExpanded: function (subgrid_id, row_id) {
// var celValue = jQuery('#EmpTable').jqGrid('getCell', rowId, 'PID');
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id + "_t";
pager_id = "p_" + subgrid_table_id;
$("#" + subgrid_id).html("");
jQuery("#" + subgrid_table_id).jqGrid({
url: "Default1.aspx?x=bindsubgrid&PID=" + row_id + "",
datatype: "json",
mtype: 'POST',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: { repeatitems: false, root: "rows", page: "page", total: "total", records: "records" },
colNames: ['PID', 'First Name', 'Last Name', 'Gender'],
colModel: [
{ name: 'PID', width: 60, align: "center", hidden: true, searchtype: "integer", editable: true },
{ name: 'FirstName', width: 180, sortable: true, hidden: false, editable: true, sorttype: 'string', searchoptions: { sopt: ['eq', 'bw']} },
{ name: 'LastName', width: 180, sortable: false, hidden: false, editable: true },
{ name: 'Gender', width: 180, sortable: false, hidden: false, editable: true, cellEdit: true, edittype: "select", formater: 'select', editrules: { required: true, edithidden: true }, editoptions: { value: getAllSelectOptions()}}],
loadonce: true,
rowNum: 5,
rowList: [5, 10, 20, 50],
pager: pager_id,
sortname: 'PID',
sortorder: "asc",
height: '100%'
});
jQuery("#" + subgrid_table_id).jqGrid('navGrid', "#" + pager_id, { edit: false, add: false, del: false })
}
})
Please help to find the cell value.
Thanks
purna

If 'PID' column contains unique value which can be used as the rowid then you should add key: true in the definition of the 'PID' column in colModel. jqGrid will assign id attribute of <tr> elements (the rows of the grid) to the value from 'PID' column. After that row_id parameter of subGridRowExpanded will contain the value which you need and you will don't need to make any additional getCell call.
Additional remark: I strictly recommend you to use idPrefix parameter for subgrids and probably for the grids. In the case jqGrid will use the value of id attribute which have the specified prefix. If will allow to solve conflicts (id duplicates in HTML page). Currently you can have the same rowids for the rows of subgrids and to the rows of the main grid. See here more my old answers on the subject.