jQGrid setGridParam function is not working with MVC Action

Question

I try to filter jQgrid data with a date field. Please see my below image.

There is a two text boxes and a button in my webpage. I try to filter the customer data

in between the selected date range. I call my setGridParam inside the button click event.

Please see my HTML below.

 $("#Button1").click(function () {

    var fromdate = $("#txtFrom").val();
    var todate = $("#txtTo").val();

    jQuery("#jQGridDemo").jqGrid('setGridParam', {
        url: "/Home/GetFilterData?sidx=" + fromdate + "&sord=" + todate, page: 1
    }).trigger("reloadGrid");

});

And this is my controller action

    [HttpPost]
    public JsonResult GetFilterData(string sidx, string sord)
    {
        using (jQGridDemoEntities db = new jQGridDemoEntities())
        {
            var customers = new List<Customer>();

            customers = db.Customers.ToList();

            return Json((
            from customer in customers
            orderby customer.Id descending
            select new[]{
                    customer.Id.ToString(CultureInfo.InvariantCulture),
                    customer.FirstName,
                    customer.LastName,
                    customer.IsMale.ToString(),
                    customer.Address,
                    customer.Email,
                    customer.Phone,
                    customer.Country.Name,
                    customer.Note,
                    customer.Created.ToString()
                }).ToArray(), JsonRequestBehavior.AllowGet);
        }
    }

I call this function in SetGridParam function but this action is not fired.

Answer 1

The parameters sidx and sord are build dynamically based on the options sortname and sortorder. So if you really need to set the parameters you should use setGridParam with object having sortname and sortorder properties.

You use fromdate and todate as the values for sidx and sord. So I suspect that you need just send some additional parameter to the server and you try to use existing parameters. It's not the best way. I would recommend you to introduce additional parameters fromDate and toDate and to use postData parameters with functions as jqGrid option:

// create jqGrid with additional postData parameter
$("#jQGridDemo").jqGrid({
    url: "/Home/GetFilterData",
    postData: {
        fromDate: function () {
            return $("#txtFrom").val();
        },
        toDate: function () {
            return $("#txtTo").val();
        }
    },
    ...
});

$("#Button1").click(function () {
    $("#jQGridDemo").trigger("reloadGrid", [{page: 1}]);
});

You need additionally to change the names of parameters of the GetFilterData actions corresponds to the names of properties of postData:

public JsonResult GetFilterData(string fromDate, string toDate)
{
    ...
}

I recommend you to read the answer and this one for additional information.