Passing array as a parameter on datasource read

6 posts, 0 answers
  1. Alex
    Alex avatar
    7 posts
    Member since:
    May 2012

    Posted 08 Jun 2012 Link to this post

    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.
  2. Vincenzo
    Vincenzo avatar
    2 posts
    Member since:
    Feb 2012

    Posted 19 Jun 2012 Link to this post

    Did you ever find a solution for this?  We are having the same issue.
  3. Alex
    Alex avatar
    7 posts
    Member since:
    May 2012

    Posted 29 Jun 2012 Link to this post

    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) {
    // ...
    });
  4. Phil
    Phil avatar
    4 posts
    Member since:
    Apr 2009

    Posted 07 Sep 2012 Link to this post

    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.
  5. Alexandre Jobin
    Alexandre Jobin avatar
    126 posts
    Member since:
    Jan 2010

    Posted 03 Dec 2013 Link to this post

    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
  6. Tom
    Tom avatar
    4 posts
    Member since:
    Sep 2017

    Posted 15 Nov Link to this post

    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)

Back to Top