A datasource inside a Viewmodel (observable) is used in a grid , trying to use same datasource but in a different grid(different sorting,filters )

Question

so i have a viewModel and a datasource inside it .

(HRSelectorDataSource,kendoHRBaseGrid are custom widgets dont worry about that)

var viewModel = kendo.observable({
        /* datasources */
        listDataSource: new kendo.ui.HRSelectorDataSource({
            ... options...
        }),

and i have the first grid1 where i use my datasource just fine

    var grid1 = $("#grid").kendoHRBaseGrid({
            dataSource: viewModel.get("listDataSource")
                            ...
    }).data("kendoHRBaseGrid");

now im trying to use a second grid ( grid2 ) that will get the same datasource(listDataSource) but it will have different sorting or filtering.

I tried to add some filtering in grid2 but it changes the filtering also in grid1.

so for a solution i was thinking

a) to make a copy of this datasource so it can be used in grid2

which i dont know how to do it and i dont know if its best practise to just get the data from server again.

b) somehow to make the filtering on grid2 and not on datasource

Has anyone any idea how to solve this?

Answer 1

You don't need to get the data from the server again, you only need to get the data from the datasource. What you could do when you go to initialize your kendoHRBaseGrid widget is create a new instance of a datasource, but set the data equal to the data from the original datasource:

var grid1 = $("#grid").kendoHRBaseGrid({
  dataSource: new kendo.data.DataSource({
    data: viewModel.get('listDataSource').data(),
    filter: { field: 'name', operator: 'startswith', value: 'foo' },
    sort: { field: 'name', dir: 'desc' }
  }),
  // etc...
}).data("kendoHRBaseGrid");

Now if your original datasource uses server-side filtering, paging, or sorting, then you would need to hit the server again. But if the datasource uses client-side operations then the example above should work.