javascript - Persist additional dataSource.read parameters on paganation in Kendo data grid - Stack Overflow

admin管理员组

文章数量:1296393

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.

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.

• javascript
• jquery
• kendo-ui
• kendo-grid
• kendo-datasource

Share Improve this question Follow edited Jun 15, 2017 at 11:55 Rahul Gupta 10.2k77 gold badges6464 silver badges6969 bronze badges asked Jun 9, 2015 at 1:55 JeremyxJeremyx 26311 gold badge44 silver badges1010 bronze badges 2

• What does the code for your datasource look like? You might be able to use the datasource.transport.parameterMap to pass the parameter everytime it is read. – JFlox Commented Jun 9, 2015 at 3:46
• Jeremy, did you ever resolve this? I have the same problem. I cannot retain the information of an additional parameter after I navigate the grid – Jack Commented Nov 12, 2015 at 15:51

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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

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 ing from, but this is generally how I send extra parameters to the server.

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

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.

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

本文标签： javascriptPersist additional dataSourceread parameters on paganation in Kendo data gridStack Overflow