Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change kendo grid Datasource use JS

Tags:

I have Kendo grid and I set data source use this

.DataSource(dataSource => dataSource                                 .Ajax()                                 .PageSize(20)                                  .Read(read => read.Action("GetWorker", "Worker")) 

I have button on my page and I want change datasource when I press this button(use java script). I want do somwthing like this

.DataSource(dataSource => dataSource                                 .Ajax()                                 .PageSize(20)                                  .Read(read => read.Action("GetDisabled", "Worker")) 

I try do like this

var grid = $("grid").data("kenodGrid");             grid.dataSource().read() 

but I don't know what to do after grid.dataSource(). how can I change data source? Thnaks and hope for you help

like image 589
Std_Net Avatar asked May 27 '13 13:05

Std_Net


People also ask

How do I change my Kendo grid dataSource?

According to this question you could just set the dataSource Read url and refresh your grid data with something like that: var grid = $("#grid"). data("kendoGrid"); grid. dataSource.

What is dataSource in kendo grid?

The data source of the Grid holds the items that will be rendered inside the widget. An item can be a JavaScript object which represents a valid data source configuration, a JavaScript array, or an existing kendo. data. DataSource instance.

What is Pageable in kendo grid?

kendo:grid-pageable-messagesThe text messages displayed in pager. Use this option to customize or localize the pager messages. More documentation is available at kendo:grid-pageable-messages.


2 Answers

I think you should first create a new DataSource (see https://demos.telerik.com/kendo-ui/datasource/remote-data-binding for remote data)

var dataSource = new kendo.data.DataSource({     data: [         { name: "John Doe", age: 33 }     ] }); 

And then append it to the grid by using the setDataSource method (https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/setdatasource)

var grid = $("#grid").data("kendoGrid"); grid.setDataSource(dataSource); 
like image 98
Lopo Avatar answered Oct 09 '22 18:10

Lopo


Since you want to change the action for your read then you can just do that. According to this question you could just set the dataSource Read url and refresh your grid data with something like that:

var grid = $("#grid").data("kendoGrid"); grid.dataSource.transport.options.read.url = "newUrlPath"; grid.dataSource.read(); grid.refresh(); 

If you don't actually want to change your dataSource but your data and possibly get your list of items from some ajax request as json then I will write down the way I do it as an example in case someone wants it.

var jsonData = ... // From some ajax response var newKendoDatasource = newKendoDS(jsonData); $("#grid").data("kendoGrid").dataSource.data(newKendoDatasource._data); 

The function is like the above pretty much

function newKendoDS(ndata) {     var datasource = new kendo.data.DataSource({ data: ndata });     datasource.read(); // In order to refresh     return datasource; } 
like image 25
Anastasios Selmani Avatar answered Oct 09 '22 18:10

Anastasios Selmani