CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-gridkendo-datasource
Jeremyx
Jeremyx

Reputation: 263

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

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.

Upvotes: 3

Views: 10773

Answers (4)

Rahul Gupta
Rahul Gupta

Reputation: 10141

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

Upvotes: 0

HamidReza
HamidReza

Reputation: 1934

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.

Upvotes: 0

Abbas Galiyakotwala
Abbas Galiyakotwala

Reputation: 3019

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" }
  }

Upvotes: 4

JFlox
JFlox

Reputation: 708

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

Upvotes: 2

Related Questions