JQuery Grid PostData is not passing values to the controller action method - MVC3

Question

I am using JQuery grid for displaying some data on the page. I have got a list of checkboxes for applying filter to the grid which I need to pass to the controller action method. My problem is eventhough the value of the selected checkboxes are correctly retrieved before passing it the post data , it is not showing up in the controller. Intersetingly, if I am loading the page with the checkboxes selected, in that case the value is getting passed. I am very confused why this is happening. I'll be really greatful for any help. Please see the code below which I am using for binding the grid:

    function BindGrid() {

        var selectedPriority = [];
        $('#priority input:checked').each(function () {
            selectedPriority.push($(this).val());
        });
        var selectedState = [];
        $('#state input:checked').each(function () {
            selectedState.push($(this).val());
        });
        var selectedAckState = [];
        $('#ackState input:checked').each(function () {
            selectedAckState.push($(this).val());
        });

        var x = convertIntArrayToString(selectedPriority);
        var y = convertIntArrayToString(selectedState);
        var z = convertIntArrayToString(selectedAckState);

        jqDataUrl = "Alarm/LoadjqData";
        // Set up the jquery grid
        //$("#jqTable").jqGrid('clearGridData');
        $("#jqTable").jqGrid({
            url: jqDataUrl,
            datatype: "json",
            mtype: "POST",
            postData: {
                sp: x,
                ss: y,
                sak: z
            },
            cache: false,
            // Specify the column names
            colNames: ["Id", "PointRef", "Value", "AlarmStateName", "AckStateName", "Priority", "AlarmDate"],

            // Configure the columns
            colModel: [
                { name: "AlarmId", index: "AlarmId", width: 70, align: "left" },
                { name: "PointRef", index: "PointRef", width: 200, align: "left" },
                { name: "Value", index: "Value", width: 200, align: "left" },
                { name: "AlarmStateName", index: "AlarmStateName", width: 150, align: "left" },
                { name: "AcknowledgementStateName", index: "AcknowledgementStateName", width: 170, align: "left" },
                { name: "Priority", index: "Priority", width: 100, align: "left" },
                { name: "AlarmDate", index: "AlarmDate", width: 250, align: "left" }
                ],

            // Grid total width and height
            width: 700,
            height: 250,

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

            // Default sorting
            sortname: "AlarmId",
            sortorder: "desc",

            // Grid caption
            caption: "Telemetry Alarms"
        }).navGrid("#jqTablePager",
                { refresh: true, add: false, edit: false, del: false },
                    {}, // settings for edit
                    {}, // settings for add
                    {}, // settings for delete
                    {sopt: ["cn"]} // Search options. Some options can be set on column level
             )
        //.trigger('reloadGrid', [{ page: 1}]); 
             .trigger('reloadGrid');

    }

    function convertIntArrayToString(data) {
        var x='';
        //alert(data.length);
         for(var i=0;i<data.length;i++) {
          x = x + data[i] + ",";
      }
      if (x != '') {
          x = x.substr(0, x.length - 1);
          //alert(x);
      }
      return x.toString();
    }

//Controller action method

 [HttpPost]
        public ActionResult LoadjqData(string sidx, string sord, int page, int rows, bool _search, string searchField, string searchOper,
            string searchString, string sp, string ss, string sak)
        {

            //code ommited.
            return Json(jsonData);
        }

value of sp, ss and sak parameters are not apprearing in the controller.

Try this post. http://stackoverflow.com/questions/9849469/variables-contain-values-but-in-action-they-equals-null/9849726#9849726 — naim shaikh, Apr 12 '12 at 12:02
Hi naim, thanks for the response but this post is not helping. What I have realised is grid is caching the parameters supplied via the 'PostData'. if I am unloading $("#jqTable").jqGrid('GridUnload'); the grid and then binding it then it is passing the parameters correctly. Is there any better way to stop Jquery from caching the parameters? Please suggest — binu, Apr 12 '12 at 12:26

score 0 · Accepted Answer · edited May 23 '17 at 11:49

This post solved my problem:

jqgrid not updating data on reload

I had to move the code for reading the checkboxes values into a separate function and accessed that function inside the PostData and it worked like a charm. Without this it was sending the same data everytime.

Updated code is below:

function BindGrid() {
    var jqDataUrl = null;
    jqDataUrl = "Alarm/LoadjqData" //+ x;
    $("#jqTable").jqGrid({
        url: jqDataUrl,
        cache: false,
        datatype: "json",
        mtype: "POST",
        postData: {
            sp: function () { return getPriority(); }
        },
        // Specify the column names
        colNames: ["Id", "PointRef", "Value", "AlarmStateName", "AckStateName", "Priority", "AlarmDate"],

        // Configure the columns
        colModel: [
            { name: "AlarmId", index: "AlarmId", width: 70, align: "left" },
            { name: "PointRef", index: "PointRef", width: 200, align: "left" },
            { name: "Value", index: "Value", width: 200, align: "left" },
            { name: "AlarmStateName", index: "AlarmStateName", width: 150, align: "left" },
            { name: "AcknowledgementStateName", index: "AcknowledgementStateName", width: 170, align: "left" },
            { name: "Priority", index: "Priority", width: 100, align: "left" },
            { name: "AlarmDate", index: "AlarmDate", width: 250, align: "left" }
            ],

        // Grid total width and height
        width: 700,
        height: 250,

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

        // Default sorting
        sortname: "AlarmId",
        sortorder: "desc",

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

}

function convertIntArrayToString(data) {
    var x = '';
    //alert(data.length);
    for (var i = 0; i < data.length; i++) {
        x = x + data[i] + ",";
    }
    if (x != '') {
        x = x.substr(0, x.length - 1);
        //alert(x);
    }
    return x.toString();
}

function getPriority()
{
 var selectedPriority = [];
    $('#priority input:checked').each(function () {
        selectedPriority.push($(this).val());
    });
    return convertIntArrayToString(selectedPriority);

}

JQuery Grid PostData is not passing values to the controller action method - MVC3

1 Answers1