JQGrid 'reloadGrid' does not trigger in ASP.Net MVC

Question

Please note that I have tried almost all the solutions I could find on various questions already available on Stack Overflow but no solution has worked for me.

So please do not mark this as duplicate or down vote. Kindly assist with the situation given below:

I have a JQGrid which initially loads all the data from some table (SQL Db). There is an option to filter the data by selecting the values from drop down list. Changing the drop down list triggers an ajax call to the server which returns filtered data from the server (MVC Controller). However, when the data is returned from the Controller, the data is correct but it is not reflecting in the JQGrid. I have tried all different methods for triggering the reload of JQGrid but nothing works.

Razor View/JQuery code:

@model IEnumerable



    
        
        @{
            List ddlistItems = new List();
            ddlistItems.Add(new SelectListItem { Text = "All Certificates", Value = "All", Selected = true });
            ddlistItems.Add(new SelectListItem { Text = "1 Day", Value = "1Day" });
            ddlistItems.Add(new SelectListItem { Text = "5 Days", Value = "5Days" });
            ddlistItems.Add(new SelectListItem { Text = "15 Days", Value = "15Days" });
            ddlistItems.Add(new SelectListItem { Text = "30 Days", Value = "30Days" });
        }
        
            Show certificates expiring in:  @Html.DropDownList("ddlTimeFrame", new SelectList(ddlistItems, "Value", "Text"))
            @**@

MVC Controller code:

public ActionResult GetCertDetails(string timeframe, string ddlTimeFrame)
{
    using (NetworkAutomationContext NAC = new NetworkAutomationContext())
    {
        List results = new List();
        try
        {
            if (timeframe != null)
                ViewData["TimeFrame"] = timeframe;
            else
                ViewData["TimeFrame"] = "All";

            // Fetch Grid data filtered according to time frame
            DateTime ExpiryDate = DateTime.Now.Date;
            switch (timeframe)
            {
                case "All":
                    results = NAC.NetworkCMDB_Certss.ToList();
                    break;
                case "1Day":
                    ExpiryDate = ExpiryDate.AddDays(1);
                    results = NAC.NetworkCMDB_Certss.Where(record => record.Expiry_Date < ExpiryDate).ToList();
                    break;
                case "5Days":
                    ExpiryDate = ExpiryDate.AddDays(5);
                    results = NAC.NetworkCMDB_Certss.Where(record => record.Expiry_Date < ExpiryDate).ToList();
                    break;
                case "15Days":
                    ExpiryDate = ExpiryDate.AddDays(15);
                    results = NAC.NetworkCMDB_Certss.Where(record => record.Expiry_Date < ExpiryDate).ToList();
                    break;
                case "30Days":
                    ExpiryDate = ExpiryDate.AddDays(30);
                    results = NAC.NetworkCMDB_Certss.Where(record => record.Expiry_Date < ExpiryDate).ToList();
                    break;
                default:
                    results = NAC.NetworkCMDB_Certss.ToList();
                    break;
            }
        }
        catch (Exception ex)
        {
            var ErrorObject = new NetworkCertsATC_SP
            {
                Common_Name = "Error",
                Certificate = ex.Message,
                Device = "NA",
                Expiry_Date = DateTime.Now.Date,
                Profile = "NA",
                Virtual = "NA",
                Partition = "NA",
                Pool = "NA",
                VIP = "NA",
                Virtual_Port = 0,
                Member_Name = "NA",
                MemberIPAddress = "NA",
                Member_Port = 0,
                ATCEmail = "NA",
                ATCName = "NA",
                EnvironmentType = "NA"
            };
            results.Add(ErrorObject);
        }
        return Json(results, JsonRequestBehavior.AllowGet);
    }
}

EDIT 1: Added screen-shot of the new data successfully received from the Controller but not updated in the jqGrid.

EDIT 2: Updated code as suggested by @Oleg. But still facing the same issue. MVC Controller is not called this time. Also, the second break point in JQuery is also not hit:

EDIT 3: Screen-shot of the next error after updating the code.

Oleg · Accepted Answer

If I correctly understand your problem, you should change the code of $("#ddlTimeFrame").change(...). You don't need to make $.ajax yourself. Inside of change event handler you need just call

jQuery("#jqGrid").trigger("reloadGrid", { fromServer: true });

if you use free jqGrid fork or to use

var $grid = jQuery("#jqGrid");
var p = $grid.jqGrid("getGridParam");

p.datatype = "json";
$grid.trigger("reloadGrid");

in case of using old version of jqGrid or commercial Guriddo jqGrid.

By the way. The code of beforeRefresh callback, which you use currently seems be wrong. If you use free jqGrid fork then you can remove it. If you use other jqGrid, then you should remove .trigger('reloadGrid') because jqGrid reloads grid itself after calling beforeRefresh callback. Additionally, grid variable seems be undefined. The fixed code could look like the following

beforeRefresh: function () {
    var p = $(this).jqGrid("getGridParam"); // get reference to internal parameters
    p.datatype = "json";
}

UPDATED: Be carefully in usage the case of ids: you used low case in HTML:

and the correct case during creating the grid (see jQuery("#jqgrid").jqGrid({...});). On the other side the code of change event handler (see $("#ddlTimeFrame").change(...);) uses wrong case of id (see jQuery("#jqGrid") instead of jQuery("#jqgrid")). It could be the origin of your problem.

JQGrid 'reloadGrid' does not trigger in ASP.Net MVC

Answers (1)

Related Questions

JQGrid &#39;reloadGrid&#39; does not trigger in ASP.Net MVC

Answers (1)

Related Questions

JQGrid 'reloadGrid' does not trigger in ASP.Net MVC