I'm new in jqgrid and i have a problem with column filters in an mvc c# application. If i filter using filter tollbar it doesn't filter anyting, even with serch button. Somebody can help me? Here my code in the View (in Controller i've putted get method that return data from sql in json format)
<div>
<table id="grid"></table>
<div id="pager"></div>
</div>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.3/js/jquery.jqgrid.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.4/css/ui.jqgrid.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.4/js/jquery.jqgrid.min.js"></script>
<script>
$(function () {
$grid = $("#grid"),
initDatepicker = function (elem) {
$(elem).datepicker({
dateFormat: "dd-M-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
};
$grid.jqGrid
({
url: "/controller/jsonAction",
datatype: 'json',
mtype: 'Get',
//table header name
colNames: ['Id', 'colDate', 'colText', 'colText1', 'colText2', 'colText3', 'colText4', 'colChar', 'colChar1', 'colText5'],
//colModel takes the data from controller and binds to grid
colModel: [
{
key: true,
hidden: true,
name: 'ID',
editable: false
},
{
name: "col1DateType", sorttype: "date",
formatter: "date", formatoptions: { newformat: "d-M-Y" },
editoptions: { dataInit: initDatepicker },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDatepicker }
},
{
name: "col2TextType", width: 193, cellattr: function (rowId, tv, rawObject, cm, rdata) {
return 'style="white-space: normal;"';
}
},
{
name: "Col3Texttype", cellattr: function (rowId, tv, rawObject, cm, rdata) {
return 'style="white-space: normal;"';
}
},
{
name: "col4ComboTypeText", formatter: "select",
edittype: "select", editoptions: { value: "test:test;test1:test1;test2:test2", defaultValue: "IN" },
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":[All];test:test;test1:test1;test2:test2" }
},
{ name: "col5TypeText" },
{ name: "col6TypeText" },
{
name: "col7ComboTypeChar", width: 100, formatter: "select",
edittype: "select", editoptions: { value: "L:L;M:M;H:H", defaultValue: "IN" },
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":[All];L:L;M:M;H:H" }
},
{
name: "col8ComboTypeChar", width: 100, formatter: "select",
edittype: "select", editoptions: { value: "L:L;M:M;H:H", defaultValue: "IN" },
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":[All];L:L;M:M;H:H" }
},
{
name: "col9ComboTypeText", formatter: "select",
edittype: "select", editoptions: { value: "test3:test3;test4:test4;test5:test5", defaultValue: "IN" },
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":[All];test3:test3;test4:test4;test5:test5" }
}
],
cmTemplate: { autoResizable: true },
iconSet: "fontAwesome",
pager: true,
autoencode: true,
sortname: "invdate",
sortorder: "desc",
search: true,
shrinkToFit: false,
multiPageSelection: true,
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
width: '100%',
viewrecords: true,
loadonce: false,
emptyrecords: 'No records to display',
jsonReader:
{
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
},
autowidth: true,
multiselect: false,
searching: {
searchOnEnter: true,
stringResult: true,
defaultSearch: "cn",
multipleSearch: true,
multipleGroup: true,
searchOnEnter: true,
closeOnEscape: true
}
}).navGrid('#pager', { edit: false, add: false, del: false, search: true }
).jqGrid("filterToolbar");
});
</script>
I've tried a lot of suggestion from stackoverflow, but no one works for me. I'm probably doing something wrong, but I don't know what,