problem displaying the search toolbar in jqgrid

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() } 
});

score 2 · Accepted Answer · answered Mar 30 '11 at 21:01

2

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').

answered Mar 30 '11 at 21:01

Oleg

220,925
34
403
798

Thanks Oleg, this really helped, the thing is I am really new to jquery and jqgrid and I did alot of guessing. – Sue Mar 31 '11 at 00:59
Thanks Oleg, this really helped, the thing is I am really new to jquery and jqgrid and I did alot of guessing.I looked at your page and I added the scripts in my code the same way (development version) but I will download the link that you sent, in the case of jsonmap I will add that but I have my columns coming up right now as I used the index names in colmodel without the spaces, now that I added some changes my paging is not coming up and also the search is not working yet, can you direct me to an example that I can implement my jqgrid with a search for only one column ... thanks again – Sue Mar 31 '11 at 01:17
@Sue: You are welcome! The searching is mostly the question to the server side code. If you add `_search` and `filters` parameters to your controller you will see that the format of the `filters` values will be like descried for the [advanced searching](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:advanced_searching#options). You can use `JavaScriptSerializer` to decode `filters`. Another thing: If it is possible I would recommend you to use names on the server side `jsonmap` with values contains no blanks. You should choose the names which can be used as the variable names. – Oleg Mar 31 '11 at 05:55
Oleg I put together some code from the examples you sent, I am doing something wrong can you possibly have a look at this? – Sue Mar 31 '11 at 13:20
Oleg I started with the search following the sample on the link but I am sure I am missing something I opened another question in this page http://stackoverflow.com/questions/5500805/single-column-search-in-jqgrid can you have a look at that please ? – Sue Mar 31 '11 at 13:42

problem displaying the search toolbar in jqgrid

1 Answers1