Passing array as a parameter on datasource read

[Alex]

Hello,

I'm using the following javascript method to remotely bind a datasource. I am trying to pass the "headers" array to the web service

function changeColumns() {

    var headers = new Array();

     

    $("#columns").children().each(function () {

        if ($(this).attr("checked") == "checked") {

            headers.push($(this).attr("id"));

        }

    });

 

    var grid = $("#GridTest").data("kendoGrid");

    var ds = grid.dataSource;

    grid.columns = [];

    grid.thead.remove();

    ds.data({

        transport: {

            read: {

                url: controller + "Test_Read",

                dataType: "json",

                data: { headers: headers }

            },

            parameterMap: function (options) {

                return kendo.stringify(options);

            },

            type: "json"

        },

        pageSize: 10,

        serverPaging: true,

        serverFiltering: true,

        serverSorting: true

    });

 

    $("#GridTest").kendoGrid({

        dataSource: ds,

        scrollable: true,

        sortable: true,

        reorderable: true,

        resizable: true

    }).data("kendoGrid");

}

At runtime, the headers parameter in the web service method (shown below)  is of type object. If I specify a type other than object in the method signature (eg: string[] or string), then headers is null.

public ActionResult Test_Read([DataSourceRequest] DataSourceRequest request, object headers = null)

{

    return Json(GetProductsDynamic(headers).ToDataSourceResult(request));

}

Can anyone help me get the values I'm sending in the format it was sent?
Thanks!

Edit: After looking in firebug, my POST parameters being sent are :
"sort=&page=1&pageSize=10&group=&filter="
So it seems the data isn't being sent at all.

[Enzo]

Did you ever find a solution for this?  We are having the same issue.

[Alex]

In the end I was never able to get the Razor code to work, I just worked around it by making a jQuery post request and sending the data through there:

$.post(controller + "SetColumnHeaders", { headers: colHeaders.join(',') }, function (data) {
// ...
});

[Phil]

I was running into a similar issue, so I thought I'd post my resolution in case someone else had my problem.  I'm using ASP.NET MVC and this is what fixed it for me.

When you do something like this in Kendo in a DataSource:

transport: {

    read: {

        url: "/controller/action",

        type: "POST",

        data: {

            myArray: [1, 2, 3]

        }

    }

}

It will post "myArray%5B%5D=1&myArray%5B%5D=2&myArray%5B%5D=3" to your controller action.  You can see this in an example at http://jsfiddle.net/pvanhouten/r5kfM/, use Fiddler or something like that to see the request.  If you unencode that value, it looks a little friendlier: myArray[]=1&myArray[]=2&myArray[]=3.  The problem is that my controller action is defined like this:

public JsonResult Get(List<int> myArray)

The model binding can't find the values in the form post, so you have to give it a little hint to pick up where to find those values.  Changing the action signature to this fixed it for me:

public JsonResult Get([Bind(Prefix="myArray[]")]List<int> myArray)

Hopefully this helps someone else.

[Karla]

thanks, this works!!! you saved me

[Alexandre Jobin]

another way to solve this problem is to tell jQuery via Kendo to use the old way to serialize array parameters.

from the jQuery documentation :
As of jQuery 1.4, the $.param() method serializes deep objects recursively to accommodate modern scripting languages and frameworks such as PHP and Ruby on Rails. You can disable this functionality globally by settingjQuery.ajaxSettings.traditional = true;.

by using this code:

transport: {
    read: {
        url: "/controller/action",
        type: "POST",
        data: {
            myArray: [1, 2, 3]
        }
    }
}

the params will be serialized this way

myArray[]=1&myArray[]=2&myArray[]=3

but if you use this code with the param traditional = true

transport: {
    read: {
        url: "/controller/action",
        type: "POST",
        traditional: true,
        data: {
            myArray: [1, 2, 3]
        }
    }
}

the params will be serialized that way, which MVC will recognize better:

myArray=1&myArray=2&myArray=3

what would be better is to override the DefaultModelBinding to support the new way to serialize things!

alex

[Tom]

This worked like a dream for me

.Update(update => update.Action("Grid_Update", "CustomData").Data("customDataFields"))

 function customDataFields() {
        return {
            fields: [{
                field1: 1,
                field1: 'Test'
            }],
            tom: 0
        }
    }

public ActionResult Grid_Update([DataSourceRequest] DataSourceRequest request, List<CustomDataFields> fields, int tom)

[Michael]

This was great!  thanks!