Question

With some work i finally get my jQGrid work. I want it to have column filtering as in the demo.

My Grid is:

 $(function () {
        $("#list").jqGrid({
            url: '/Work/DynamicGridData/',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['Id', 'Job Title', 'Job Type','Job Priority','Rate','Creation Date','Deadline'],
            colModel: [
          { name: 'Id', index: 'JobDescriptionID', align: 'left' },
          { name: 'Job Title', index: 'JobTitle',align: 'left' },
          { name: 'Job Type', index: 'JobType.JobTypeName', align: 'left'},
          { name: 'Job Priority', index: 'JobPriority.JobPriorityName', align: 'left' },
          { name: 'Rate', index: 'JobType.Rate', align: 'left' },
          { name: 'Creation Date', index: 'CreationDate', align: 'left'},
          { name: 'Deadline', index: 'JobDeadline', align: 'left'}],
            pager: jQuery('#pager'),
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'JobDescriptionID',
            sortorder: "desc",
            viewrecords: true,
            imgpath: '',
            caption: 'My first grid'
        });
    }); 

What are the things i need to do for column filtering as shown?

Answer 1

To add the toolbar search you need to first declare that the grid will have the toolbar by doing this:

$("#list").jqGrid('filterToolbar', options);

Options is an object containing different configuration settings, and you can see a list of available options here.

The type of search filter that is displayed then depends on what you select as part of your column model. The options available are here.

The demos you are linking to are for the Paid Wrapper version of the jqGrid, however your code appears to be the standard free version of the the grid which is what my answer is based on. If you want to see demos for the free version then this page has plenty. The filter toolbar is demoed under:

New in version 3.7 -> Tooolbar search