Hello,
I need help with the following scenario:
I bind an igGrid to OData and use SignalR to get information about data changes.
I want to reflect those changes in the grid.
I tried Knockout but there are two problems. First, I cannot bind an igGrid with Knockout extensions to OData. Second, even if I fill an ObservableArray with JSON data manually, it is very slow when it reaches 1000 records.
I tried using "setCellValue" of igGridUpdating, but also two problems: First, the grid looses its selection when calling "setCellValue". (It should not have any impact on what the user is doing.) Second, it creates a transaction with is not nesseccary.
I tried changing the data in the data source (no OData for the test) and called "dataBind" - worse - selection, filter, sorting gets lost.
For my question, imagine the following example:
- A grid bound to OData: Id, Description, Value
JavaScript gets notified with a change:
- Id = 10, Value = 100
What I want to achieve:
- Lookup the record with Id = 10 in the DataSource and / or Grid, change its value to 100 and reflect this value in the visible grid, without affecting what the user has done or is doing with the grid - like selection(s), sorting.
I was thinking of implementing a custom DataSource but I have not found a way to tell the grid "the row with Id = 10 has changes - get its new values and update the DOM".
Any idea?
Btw, the same scenario should be quite common: Display some properties from the OData source in the grid (using $select), an Edit button opens a Dialog, fetches the complete object, the user edits the data, saves it to the data store... and then the grid should reflect the changes that the user just performed in the dialog.
Best regards,
Peter
Hello Peter,
You seem to have already tried a few different approaches and I'll try to go over them and possibly help you with implementing the most appropriate one.
First of all, I should say that if you simply obtain a new version of the OData data source on regular intervals, calling dataBind is the most straightforward and efficient method. Its downside is, as you observed, losing the sorting and filtering states. Those, however, can be stored and then restored using Grid's API. What's more, the ability to restore these states automatically is very high in priority on our backlog and we are looking to deliver this functionality as early as the 14.1 release. A sample of how to restore them manually is the following:
var grid = $("#grid1"), ds = $("#grid1").data("igGrid").dataSource, filtering = ds.settings.filtering.expressions; ds.dataBind(); grid.igGridFiltering("filter", filtering, true); grid.igGridSorting("sortMultiple");
Similarly you can restore the selection and scroll position (the latter achievable directly through the scrollTop() jQuery method). Please let me know if you need help with that!
Using Updating's API to apply the changes without data binding would be more efficient if you receive the differences between two subsequent calls directly and not having to find them by slow comparison methods. On a separate note, I couldn't reproduce the issue you described with setCellValue removing your Selection state. Could you please share which version of Ignite UI you are using?
Finally, to remove the unnecessary transaction log entry, you can follow the setCellValue call with a pop() call on the allTransacations array which is obtainable through Grid's API:
$("#grid1").igGridUpdating("setCellValue", <row id>, <column key>, 'some value');$("#grid1").igGrid("allTransactions").pop();
I hope this helps! I am looking forward to hearing from you!
Stamen Stoychev
Hello Stamen,
without actually trying it - but wouldn't your workaround
ds.dataBind(); grid.igGridFiltering("filter", filtering, true); grid.igGridSorting("sortMultiple");
produce two or three calls to the OData source? (One with each method call above)
Anyway, calling dataBind() is too slow and too performance expensive if I only want to update a single row and already have the data available.
I'll try the Updating API again and I will let you know when and how the grid lost selection.
I am wondering if the source of Ignite UI is available after purchasing the subscription? (I mean the source that is not minified and hopefully with some comments. The product description is not quite clear if C# source and / or JavaScript source is included.) At the end, I might implement my own data source and I could not find documentation - the Ignite UI source would help in those cases and when debugging. I also noticed that the RESTDataSource only produces PUT and does not support PATCH and MERGE updates on OData. So I might need to extend it as well and would like to look at the RESTDataSource source code.