jqgrid filter column doesn't work in mvc asp.net

96 Views Asked by At

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,

0

There are 0 best solutions below