Shared DataSource between multiple controls and filter in one

[Misiu]

Hello Kendo community,
this is my first post on this forum, so please be understanding :)

I'm building simple application that will display Gantt like data. To display it in that form I'm building custom Grid-like control.
But before I get further in development I would like to build sample using normal grid.
On my page I need to have 2 grids to display data.
Top one must display all data and must be read only, bottom must display filtered data.
For example I must have orders for all customers, but on bottom only for specific user id, so user will be able to edit only his orders.

I build simple jsfiddle: http://jsfiddle.net/Misiu/Fnsja/ that has 2 Grids and every time I update bottom grid top one is auto-updated.
What I need to do now is to apply filter on bottom grid.
Can this be done without having 2 data sources?

Hope my question in understandable :)

[Alexander Valchev]

Hello Misiu,

I am afraid that what you would like to achieve is not supported. By design the widgets listen for the change event of the DataSource and refresh automatically when it fires. Filtering one Grid will trigger the change event hence all the widgets bound to the same DataSource instance will rebind to display the change.

I am afraid that the behavior cannot be prevented. If your requirement is to have read-only and filterable grid please consider using different DataSources.

Regards,
Alexander Valchev
Telerik

[Misiu]

Thanks for such fast reply,
I searched forum couple of minutes ago and I found similar answer to similar question.

So my only option is to have 2 datasources?
First one remote - for read only grid and second-local that will be filled after first one get results from server.

But what about updating? I think that when I update my local datasource (for second grid) I will have to update corresponding row in remote datasource.
Is my idea correct?

What about error responses? If I update record in local datasource and then update handler (don't know correct event yet) I'll update remote datasource and server will return success everything will be fine, but what if it will return error? My local datasource will have correct save status, but my remote wont.

I don't mind having 2 datasources, I'm worried about syncing those two.
Any ideas or best practices about those?

In final application I'll have Gantt control with remote datasource and 3 or 4 smaller grids showing filtered results (subsets of that remote datasource) and I will need to be sure that syncing between those grids works correctly.

[Alexander Valchev]

Hello Misiu,

If I understood correctly, only one of the Grid components will be editable, the rest will display read-only filtered data. Is that correct?

In such case, the main dataSource should be the one that is used for editable Grid. Rest controls should operate with local data. Here is a small example:

• http://jsbin.com/eDOVEV/2/edit

Note that the local DataSources are updated at the change event of the main one. In this way they will reflect all the change that the user makes in the main Grid.

I hope this information will help.

Regards,
Alexander Valchev
Telerik

[Misiu]

Thank You so much for example, it helped me getting started.
Unfortunately I noticed one bug: when You start editing element that is appearing in first and second grid (something that starts with "C") and You cancel editing then element in first table has initial values, but is second it has all changes.
How to reproduce:
1. Open example
2. Find row "Chef Antons"
3. Click edit and update price and units (notice second grid changing)
4. Click cancel - both grids have different values for that row.

Second think are grids.
Main grid must have remote source (as it has now), second must be local (as it is now), but edits must be available only for second grid.
As I wrote before I'm creating gantt like control that will display events for list of users (like http://s3.amazonaws.com/crunchbase_prod_assets/assets/images/original/0020/5663/205663v2.png)
but I want to display events for specific user in bottom grid, so he will be able to edit only his events.

For now I want to use 2 grids to test mechanism of updates.
I've modified Your example a bit: http://jsbin.com/UguKalu/1
What I need now is after updating row in second grid I ant to update corresponding row in first grid.

I imagine it like this:
after clicking update in secord grid find corresponding element in first datasource and update it, wait for server reply, if everything is correct only then update rows in first and second grid, if there was error then don't update both datasources and show error.

Sorry for all problems but I'm new to Kendo.
BTW are there events in datasource like "beforeUpdate","beforeSave" that could be fired after user clicks save. but before grid refresh? Idea is to be able to call webservice to add some data or check something, and to be able to cancel that save.

Sorry for my english, I hope everything is understable :)

[Alexander Valchev]

Hello Misiu,

Thank you for pointing out that problem with the sample. In is happens because the change event of the DataSource does not triggers after cancel operation is performed. As a workaround I can suggest triggering the change event manually after cancel event of the Grid.

cancel: function() {
    setTimeout(function() { dataSource.trigger("change"); }, 0);
}

Note that the timeout is required in order to execute the code after current event loop.
Here is a link to the updated sample:

• http://jsbin.com/eDOVEV/7/edit
  
  

Regarding your second question, the workaround that I suggested is suitable only for cases when the user can perform edit operations through only one of the widgets. The widget that will be used for editing should be bound to the main dataSource, e.g. the one with remote transport.

Editing the data from a control that is bound to the local copy of the data is hard for configuring and will require a lot of 'hacks' so I would not recommend it.
If that is a requirement for you please consider using separate DataSource instances each one bound to remote data. You can force data update from the remove server by calling the read method of the DataSource. The downside of this approach is the amount of Ajax requests that will be issues to the server.

On a side note, I recommend you to look through the DataSource API and Grid reference as it will give you a brief overview of available events and features of those components.

• http://docs.kendoui.com/api/framework/datasource
• http://docs.kendoui.com/api/web/grid

Regards,
Alexander Valchev
Telerik