Persist additional dataSource.read parameters on paganation in Kendo data grid

Question

I have a Kendo Grid that loads data via ajax with a call to server-side ASP.NET read method:

 public virtual JsonResult Read(DataSourceRequest request, string anotherParam)

In my client-side JS, I trigger a read when a button is clicked:

grid.dataSource.read( { anotherParam: 'foo' });
grid.refresh();

This works as expected, only I lose the additional param when I move through the pages of results in the grid, or use the refresh icon on the grid to reload the data.

How do I persist the additional parameter data in the grid?

I have tried setting

grid.dataSource.data

directly, but without much luck. I either get an error if I pass an object, or no effect if I pass the name of a JS function that returns data.

Answer 1

if you want to pass additional parameters to Read ajax datasource method (server side), you may use

.DataSource(dataSource => dataSource
            ...
            .Read(read => read.Action("Read", controllerName, new { anotherParam= "foo"}))
            ...
        )

if you want to pass additional parameters through client scripting you may use datasource.transport.parameterMap, something as below

parameterMap: function(data, type) {
  if (type == "read") {

     return { request:kendo.stringify(data), anotherParam:"foo" }
  }

Answer 2

Use the datasource.transport.parameterMap

parameterMap: function(data, type) {
  if (type == "read") {

     return kendo.stringify(data, anotherParam);
  }

I'm not sure where your other param is coming from, but this is generally how I send extra parameters to the server.

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.parameterMap

Answer 3

if use datasource object :

var dataSource = new kendo.data.DataSource({
            transport: {
                    read: {
                        url: '/Api/GetData',
                        contentType: "application/json; charset=utf-8", // optional
                        dataType: "json",
                        data: function () {
                            return {
                                additionalParam: value
                            };
                        }
                    },
                //parameterMap: function (data, type) {
                // and so use this property to send additional param
                //    return $.extend({ "additionalParam": value }, data);
                //}
                    },
            schema: {
                type: "json",
                data: function (data) {
                    return data.result;
            },
            },
            pageSize: 5,
            serverPaging: true,
            serverSorting: true
        });

and set options in grid:

$("#grid").kendoGrid({
    autoBind: false,
    dataSource: dataSource,
    selectable: "multiple cell",
    allowCopy: true,
    columns: [
        { field: "productName" },
        { field: "category" }
    ]
});

and in click event this code :

dataSource.read();

and in api web method this action:

[HttpGet]
public HttpResponseMessage GetData([FromUri]KendoGridParams/* define class to get parameter from javascript*/ _param)
        {
           // use _param to filtering, paging and other actions
            try
            {

                var result = Service.AllCustomers();
                return Request.CreateResponse(HttpStatusCode.OK, new { result = result });
            }
            catch (Exception ex)
            {
                return Request.CreateResponse(HttpStatusCode.BadRequest, new { result = string.Empty });
            }
        }

good luck.

Answer 4

To persist the updated value of the additional parameter through pagination, you will need to create a global variable and save the value to it.

var anotherParamValue= "";//declare a global variable at the top. Can be assigned some default value as well instead of blank

Then, when you trigger the datasource read event, you should save the value to the global variable we created earlier.

anotherParamValue = 'foo';//save the new value to the global variable
grid.dataSource.read( { anotherParam: anotherParamValue });
grid.refresh();

Now, this is important. In your datasource object transport.read.data must be set to use a function as shown below:

var dataSource = new kendo.data.DataSource({
            transport: {
                    read: {
                        url: '/Api/GetData',
                        contentType: "application/json; charset=utf-8", // optional
                        dataType: "json",
                        //Must be set to use a function, to pass dynamic values of the parameter
                        data: function () {
                            return {
                                additionalParam: anotherParamValue //get the value from the global variable
                            };
                        }
                    },

                    },
            schema: {
                type: "json",
                data: function (data) {
                    return data.result;
            },
            },
            pageSize: 5,
            serverPaging: true,
            serverSorting: true
        });

Now on every page button click, you should get the updated value of the anotherParam which is currently set to foo