Question

Hi I am having problem displaying my search toolbar for the jqgird, I have tried several methods that were offered online, and I see several people have used what I am using successfully, can someone please look at my code and let me know where and what I might be missing, I did not add any code in the controller class for the search, also I am using those scripts:jquery-1.4.2.min.js, jquery.jqGrid.js, jquery.searchFilter.js, jqModal.js, jqDnR.js (orignially taken from PHill HAACK’s website) I am thinking maybe it is the scripts that I am using or maybe the css I am using the grid.css from the basic theme from the same website example mentioned above.

any advice will be appreciated.

jQuery(document).ready(function() {
    jQuery("#list").jqGrid({
        url: '/Home/DynamicGridData/',
        datatype: 'json',
        mtype: 'POST',
        ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
        search: true,
        multipleSearch: true,
        colNames: ['Edit', 'AlertId', 'Policy', 'PolicyRule', 'Alert Status', 'Alert Code', 'Message', 'Category'],
        colModel: [
      { name: 'Edit', edittype: 'select', formatter: 'showlink', sortable: false },
      { name: 'AlertId', index: 'AlertId', sortable: true, sorttype: 'int', autoFit: true, align: 'left', hidden: true },
      { name: 'Policy', index: 'Policy.Name', sortable: true, autoFit: true, align: 'left' },
      { name: 'Policy Rule', index: 'PolicyRule', sortable: true, sorttype: 'text', autoFit: true, align: 'left' },
      { name: 'Alert Status', index: 'AlertStatus.status', sortable: true, sorttype: 'text', autoFit: true, align: 'left' },
      { name: 'Alert Code', index: 'Code', sortable: true, sorttype: 'text', align: 'left', autoFit: true },
      { name: 'Message', index: 'Message', sortable: true, sorttype: 'text', autoFit: true },
      { name: 'Category', index: 'Category.name', sortable: true, sorttype: 'text', align: 'left', autoFit: true}],
        pager:  jQuery('#pager'),
        rowNum: 10,
        rowList: [10, 60, 100],
        scroll: true,
        sortname: 'AlertId',
        sortorder: 'asc',
        gridview: true,
        autowidth: true,
        rownumbers: true,
        viewrecords: true,
        imgpath: '/scripts/themes/basic/images',
        caption: 'Nebo System Alerts'
    });

    jQuery("#list").jqGrid('navGrid', '#pager', { add: false, edit: false, del: false }, {}, {}, {}, { multipleSearch: true, overlay: false });
    jQuery("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true });
    jQuery("#list").jqGrid('navButtonAdd', '#pager', { caption: "", title: "Toggle Search Bar", buttonicon: 'ui-icon-pin-s',
    onClickButton: function() { $("#list")[0].toggleToolbar() } 
});

Answer 1

If the searching toolbar are not displayed in your code then you choose not all jqGrid components which you need during jqGrid downloading (see here). You should check “Custom” base module to be able to use filterToolbar method.

You don’t include the whole HTML page with the order of jqGrid loading and not wrote which version of jqGrid you used and in which web browser you had tested. If you use the developer version of jqGrid I recommend you install the jqGrid modules directly (see here) and not to use jquery.jqGrid.js.

One more important problem in your code: you use columns in colModel with the name property having blanks (name: 'Policy Rule', name: 'Alert Status', name: 'Alert Code'). This can not work. You should choose any other names. If your JSON data has properties with blanks (which is not recommended) and you can’t change the server code then you should use jsonmap attribute with the corresponding name from the JSON input (like name: 'PolicyRule', jsonmap:'Policy Rule').