How to make the "jqGrid toolbar search" search for the at in any occurrence, not just the beginning

Question

I've implemented a jqGrid with a toolbar search enabled on it. The problem is that the search is working like '%search_criteria' (only matching from the beginning) but I need it to be like '%search_criteria%' (any occurrence in the column value).

e.g: The Grid has a column "Class" with values: Math-101, and Math-102 If searched for: "101" ==> get zero matches. I have to search for the whole word "Math-101".

I saw an example which working as I wont, and its not different from my Grid at all, and I don't how its working on the example below and not on mine!!! Ex: http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridWithSearchingToolbar.htm

My Grid:

var data = [[1, "Math-101", "OC", "INTEL", "09-02-15", "09-30-15", "A", 120, "General", 200]]
$("#grid").jqGrid({
                    datatype: "local",
                    height: 200,
                    colNames:['#','Class','Loc','Type','Start Dt','End Dt','Section','Dur','Gen/Priv','Fee'],
                    colModel: [
                    {name: 'scheduleID',    index: 'scheduleID',  width: 30},
                    {name: 'className',     index: 'className',   width: 60},
                    {name: 'Location',      index: 'Location',    width: 60},
                    {name: 'classType',     index: 'classType',   width: 60},
                    {name: 'startDt',       index: 'startDt',     width: 60,  sorttype: "date",
                    searchoptions:{dataInit:function(el){$(el).datepicker({dateFormat:'yy-mm-dd'});} }},
                    {name: 'endDt',         index: 'endDt',       width: 60,  sorttype: "date",
                    searchoptions:{dataInit:function(el){$(el).datepicker({dateFormat:'yy-mm-dd'});} }},
                    {name: 'section',       index: 'section',     width: 60},
                    {name: 'duration',      index: 'duration',    width: 60},
                    {name: 'scheduleType',  index: 'scheduleType',width: 60},
                    {name: 'Fee',           index: 'Fee',         width: 60, formatter:'number', align:'right'}
                    ],
                    pager: '#pager',
                    rowNum: 10,
                    rowList: [10, 20, 30],
                    rownumbers: true,
                    sortname: "Class",
                    sortorder: "desc",
                    viewrecords: true,
                    gridview: true,
                    ignoreCase: true,
                    autoencode: true,
                    autowidth: true,
                    ExpandColClick: true,
                    caption: "Schedule List"
            });
                    var names = ['scheduleID', 'className', 'Location', 'classType', 'startDt', 'endDt', 'Section', 'duration', 'scheduleType', 'Fee', 'CEU', 'Status', 'IFee', 'TCost', 'FCost', 'MCost', 'OMCost'];
                    var mydata = [];
                    for (var i = 0; i < data.length; i++) {
            mydata[i] = {};
                    for (var j = 0; j < data[i].length; j++) {
            mydata[i][names[j]] = data[i][j];
            }
            }

            for (var i = 0; i <= mydata.length; i++) {
            $("#grid").jqGrid('addRowData', i + 1, mydata[i]);
            }

            
        $("#grid").jqGrid('filterToolbar', { stringResult: true, searchOperators: false, searchOnEnter: false, autosearch: true, defaulySearch: "cn" });
        

Thanks for help.

Answer 1

You should replace defaulySearch: "cn" to defaultSearch: "cn". It should fix the main searching problem. You should consider to use ignoreCase: true option of jqGrid to force jqGrid uses case insensitive searching.

Additionally I would strictly recommend you don't use addRowData in the loop for filling of jqGrid. Instead of that you should just move the code which fill the grid data mydata before creating the grid and to use just the option data: mydata. It will create the data with filled data. The first page to the sorted data will be displayed. jqGrid will sort the data before it will be displayed.

Small additional remarks: you should fix sortname: "Class" to sortname: "className". I would recommend you to remove all index values from colModel. You can consider to use cmTemplate: { width: 60 } option (see the answer) which changes the default value of the property width in colModel from 150 to 60. After that you can remove all width: 60 from colModel. I recommend you to add sorttype: 'number' to the column which uses formatter:'number'. It will fix sorting in the column. You can consider to define template for two columns which contains dates (see the answer).