jQgrid Search option is not working as expected

Question

I implement jQgrid free version in my MVC4 application.

Controller

public class HomeController : Controller
{
    public ActionResult GridAction()
    {
        return View();
    }

    public JsonResult FillGrid(string sidx, string sord, int page, int rows)
    {
        var models = new List<Master> {
                new Master { Id = 1, Name = "AAA",Description = "test description 1", Created = DateTime.Now },
                new Master { Id = 2, Name = "BBB",Description = "test description 2", Created = DateTime.Now },
                new Master { Id = 3, Name = "CCC",Description = "test description 3", Created = DateTime.Now },
                new Master { Id = 4, Name = "DDD",Description = "test description 4", Created = DateTime.Now },
                new Master { Id = 5, Name = "EEE",Description = "test description 5", Created = DateTime.Now },
                new Master { Id = 6, Name = "FFF",Description = "test description 6", Created = DateTime.Now },
                new Master { Id = 7, Name = "GGG",Description = "test description 7", Created = DateTime.Now },
                new Master { Id = 8, Name = "HHH",Description = "test description 8", Created = DateTime.Now },
                new Master { Id = 9, Name = "III",Description = "test description 9", Created = DateTime.Now },
                new Master { Id = 10, Name = "JJJ",Description = "test description 10", Created = DateTime.Now },
                new Master { Id = 11, Name = "KKK",Description = "test description 11", Created = DateTime.Now },
                new Master { Id = 12, Name = "LLL",Description = "test description 12", Created = DateTime.Now },
                new Master { Id = 13, Name = "MMM",Description = "test description 13", Created = DateTime.Now },
                new Master { Id = 14, Name = "NNN",Description = "test description 14", Created = DateTime.Now },
                new Master { Id = 15, Name = "OOO",Description = "test description 15", Created = DateTime.Now },
                new Master { Id = 16, Name = "PPP",Description = "test description 16", Created = DateTime.Now },
                new Master { Id = 17, Name = "QQQ",Description = "test description 17", Created = DateTime.Now },
                new Master { Id = 18, Name = "RRR",Description = "test description 18", Created = DateTime.Now },
                new Master { Id = 19, Name = "SSS",Description = "test description 19", Created = DateTime.Now },
                new Master { Id = 20, Name = "TTT",Description = "test description 20", Created = DateTime.Now },
                new Master { Id = 21, Name = "UUU",Description = "test description 21", Created = DateTime.Now },
                new Master { Id = 22, Name = "VVV",Description = "test description 22", Created = DateTime.Now },
                new Master { Id = 23, Name = "WWW",Description = "test description 23", Created = DateTime.Now },
                new Master { Id = 24, Name = "XXX",Description = "test description 24", Created = DateTime.Now },
                new Master { Id = 25, Name = "YYY",Description = "test description 25", Created = DateTime.Now },
                new Master { Id = 26, Name = "ZZZ",Description = "test description 26", Created = DateTime.Now },
            };

        return Json((
            from master in models
            orderby master.Id descending
            select new[] {
                       master.Id.ToString(CultureInfo.InvariantCulture),
                       master.Name,
                       master.Description,
                       master.Created == null ? "" : ((DateTime)master.Created).ToString("o")
                   }
        ).ToArray(), JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public ActionResult Add(string Name, string Description)
    {
        int ret = 2;
        return Json(ret);
    }

    [HttpPost]
    public ActionResult Update(string Name, string Description)
    {
        int ret = 2;
        return Json(ret);
    }

    [HttpPost]
    public ActionResult Delete(int Id)
    {
        int ret = 2;
        return Json(ret);
    }

    [HttpPost]
    public ActionResult Search()
    {
        return Json(1);
    }
}

.cshtml

@{
ViewBag.Title = "GridAction";
}

<h2>GridAction</h2>
<table id="jQGridDemo">
</table>
<div id="jQGridDemoPager">
</div>
<table id="search"></table>
<div id="filter"></div>
<script type="text/javascript">

jQuery("#jQGridDemo").jqGrid({
    url: '@Url.Action("FillGrid", "Home")',
    datatype: "json",
    mtype: "POST",
    colNames: ["Id", "Name", "Description", "Created"],
    colModel: [
        { name: "Id", width: 100, key: true, formatter: "integer", sorttype: "integer", hidden: true },
        { name: "Name", width: 200, sortable: true, editable: true, editrules: { required: true } },
        { name: "Description", width: 400, sortable: false, editable: true, editrules: { required: true } },
        { name: "Created", width: 120, formatter: "date", formatoptions: { srcformat: "ISO8601Long", newformat: "n/j/Y g:i:s A" }, align: "center", sorttype: "date" },
    ],
    loadtext: "Loading...",
    rowNum: 10,
    gridview: true,
    autoencode: true,
    loadonce: true,
    height: "auto",
    rownumbers: true,
    prmNames: { id: "Id" },
    rowList: [10, 20, 30],
    pager: '#jQGridDemoPager',
    sortname: 'id',
    sortorder: "asc",
    viewrecords: true,
    caption: "CRUD on Local Data",
    editurl: '@Url.Action("Update", "Home")',
});

jQuery("#jQGridDemo").jqGrid('navGrid', '#jQGridDemoPager',
    {
        searchtext: "Search",
        addtext: "Add",
        edittext: "Edit",
        deltext: "Delete"
    },
    {//EDIT
        url: '@Url.Action("Update", "Home")',
        width: "auto",
        jqModal: true,
        closeOnEscape: true,
        closeAfterEdit: true,
    },
    {//ADD
        width: "auto",
        // height: "auto"
        url: '@Url.Action("Add", "Home")',
        closeOnEscape: true,
        closeAfterAdd: true
    },
    {//DELETE
        url: '@Url.Action("Delete", "Home")',
        closeOnEscape: true
    },
    {//SEARCH
        closeOnEscape: true,
        searchOnEnter: true,
    });

jQuery("#jQGridDemo").jqGrid('searchGrid', {multipleSearch :true, caption: "Test caption" });

</script>

Add, Edit and Delete functions are works correctly in the toolbar. I implement the search option in the grid footer. When I click the search button, search option is appear correctly but the grid is not filtered correctly.

Answer 1

I suppose that the error exist because of including jQuery more as once. First you includes jQuery with respect of <script src="~/Scripts/jquery-1.9.1.min.js"></script>, then you includes jqGrid with respect of <script src="~/Scripts/jquery.jqGrid.src.js"></script>. It defines $.jgrid, jQuery.jgrid and other. After all you includes jQuery once more time as bundle with respect of @Scripts.Render("~/bundles/jquery"). It overwrites jQuery.jgrid, but not $.jgrid. During local searching or filtering the syntax jQuery.jgrid will be used and to jQuery.jgrid will be undefined and one will have exception in jQuery.jgrid.getAccessor.

To fix the problem you should include jQuery once. Just comment @Scripts.Render("~/bundles/jquery") if you use if after grid.locale-en.js and jquery.jqGrid.src.js. Ine should include <script src="~/Scripts/i18n/grid.locale-en.js"></script> and <script src="~/Scripts/jquery.jqGrid.src.js"></script> after jQuery.