Question

I have a jqGrid on a view page and it is loaded based on gathering data from a few select lists.

The first time through all is fine. If I change one of the select lists the .change function is triggered but the .jqGrid doesnt fire so the Controller method isnt hit.

My jqGrid code

$("#Builds").change(function () {
    var programID = $("#ProgramID").val();
    var buildID =  $('#Builds').val();
     $("#UpdateBuild").show();

    // Set up the jquery grid
    $("#jqTable").jqGrid({
        // Ajax related configurations
        url: '@Url.Action("_CustomBinding")',
        datatype: "json",
        mtype: "POST",
        postData: {
            programID: programID,
            buildID: buildID
            },

        // Specify the column names
        colNames: ["Assembly ID", "Assembly Name", "Cost", "Order", "Budget Report", "Partner Request", "Display"],

        // Configure the columns
        colModel: [
        { name: "AssemblyID", index: "AssemblyID", width: 40, align: "left", editable: false },
        { name: "AssemblyName", index: "AssemblyName", width: 100, align: "left", editable: false },
        { name: "AssemblyCost", index: "AssemblyCost", width: 40, align: "left", formatter: "currency", editable: true },
        { name: "AssemblyOrder", index: "AssemblyOrder", width: 30, align: "left", editable: true },
        { name: "AddToBudgetReport", index: "AddToBudgetReport", width: 40, align: "left", formatter: "checkbox", editable:true, edittype:'checkbox'},
        { name: "AddToPartnerRequest", index: "AddToPartnerRequest", width: 45, align: "left", formatter: "checkbox", editable:true, edittype:'checkbox'},
        { name: "Show", index: "Show", width: 20, align: "left", formatter: "checkbox", editable:true, edittype:'checkbox'}],

        // Grid total width and height and formatting
        width: 650,
        height: 200,
        altrows: true,

        // Paging
        toppager: true,
        pager: $("#jqTablePager"),
        rowNum: 10,
        rowList: [10, 20, 30],
        viewrecords: true, // Specify if "total number of records" is displayed
        emptyrecords: 'No records to display',

        // Default sorting
        sortname: "AssemblyID",
        sortorder: "asc",

        // Grid caption
        caption: "Build Template"

    }).navGrid("#jqTablePager",
        { refresh: true, add: true, edit: true, del: true },
            {}, // settings for edit
            {}, // settings for add
            {}, // settings for delete
            {sopt: ["cn"]} // Search options. Some options can be set on column level
     );
});

My controller Code:

[HttpPost]
public JsonResult _CustomBinding(string programID, string buildID, int page, int rows)
{
    /* Variable Declarations */
    BuildsRepository br = new BuildsRepository();
    IEnumerable<ProgramsAssemblyBuilds> pab = br.GetProgramAssembliesBuilds(Convert.ToInt32(programID), Convert.ToInt32(buildID));

    // Calculate the total number of pages
    var totalRecords = pab.Count();
    var totalPages = (int)Math.Ceiling((double)totalRecords / (double)rows);

    var data = (from s in pab
                select new
                {
                    AssemblyID = s.AssemblyID,
                    cell = new object[] { s.AssemblyID, s.AssemblyName, s.AssemblyCost, s.AssemblyOrder, s.AddToBudgetReport, s.AddToPartnerRequest, s.Show}
                }).ToArray();

    var jsonData = new
    {
        total = totalPages,
        page = page,
        records = totalRecords,
        rows = data.Skip((page - 1) * rows).Take(rows)
    };
    return Json(jsonData, JsonRequestBehavior.AllowGet);
}

Anyone have any ideas on this one?

Thanks

Answer 1

You should create the grid only once. So you should place the code

 $("#jqTable").jqGrid({ ... });

outside of the change event handler.

To reload the grid you should use

$("#Builds").change(function () {
    $("#jqTable").trigger("reloadGrid", [{page: 1}]);
    $("#UpdateBuild").show();
});

At the end to have actual values from "#ProgramID" and '#Builds' you should use functions (methods) as the programID and buildID properties of postData:

// Set up the jquery grid
$("#jqTable").jqGrid({
    // Ajax related configurations
    url: '@Url.Action("_CustomBinding")',
    datatype: "json",
    mtype: "POST",
    postData: {
        programID: function() { return $("#ProgramID").val(); },
        buildID: function() { return $('#Builds').val(); }
    },
    ...
});

See more information here.