How to search (Filter) in a JQGrid by Jquery in cshtml file in MVC

Question

I am new to jquery and also web development and jqgrid. I am trying to implement "filter" or "Search any column values in JQGrid using Jquery.

The code is beow. Could someone pease assist me how to implement the filter by the 5 column values below?

<script>

        $(function() {
              $.ajax({
                cache: false, 
                url: "@Url.Action("GetMovies", "Home")",  
                dataType: "json",
                success: function (result) {

                    $("#list2").jqGrid(
                    {
                        datatype: "local",
                        colNames: ['MovieId', 'Title', 'Genre','ReleaseDate','Classification'],
                        colModel:
                        [
                            { name: 'MovieId', index: 'MovieId', width: 30},
                            { name: 'Title', index: 'Title', width: 190 },
                            { name: 'Genre', index: 'Genre', width: 130 },
                            { name: 'ReleaseDate', index: 'ReleaseDate', width: 100 },
                            { name: 'Classification', index: 'Classification', width: 130 }
                        ],
                        rowNum: 10,
                        rowList: [10, 20, 30,40],
                        pager: '#pager2',
                        sortname: 'MovieId', sortorder: "asc",
                        viewrecords: true, loadonce: true,
                        caption: "MoVies Collections",
                        findByName:"Title"
                    });

                    $("#list2").jqGrid('navGrid', '#pager2', { edit: true, add: true, del: false });
                    $("#list2").jqGrid("inlineNav", "#pager2", { addParams: { position: "last" } });

                    for (var i = 0; i <= result.length; i++)
                        $("#list2").jqGrid('addRowData', i + 1, result[i]);

                }
            });
        });
    </script>

Answer 1

You can use jqGrid "Toolbar" search or set search:true in 'navGrid'

$("#list2").jqGrid('navGrid', '#pager2', { edit: true, add: true, del: false,search:true });

A small search icon will be displayed on left side in bottom.

Or we can have toolbar search.

jQuery("#list2").jqGrid('filterToolbar', { searchOperators: true});

if you don't want search for particular column set 'search:false' in colModel

See sample demos under 'Searching' tab.

http://trirand.com/blog/jqgrid/jqgrid.html

For more jqGrid options, check below link.

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options