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,Sorry for the late reply! I did notice that selection will persist through paging when virtualization is enabled incorrectly and it does look somewhat similar to the screenshot you provided, however, I wasn't sure you actually switch between pages to reproduce it. In any case I logged the issue I noticed with a Development ID of 160027. It will get resolved with the next service release.About the previous points you raised -
Restoring the scroll position should be fairly straightforward with the updated "virtualScrollTo" grid method. For fixed virtualization you can store and pass it the index of the topmost rendered row. For continuous you should store the scrollTop position of the scroll container:
var a = $("#grid1_scrollContainer").scrollTop();
And then apply it with:
$("#grid1").igGrid("virtualScrollTo", a + "px");
The exception from calling updateRow on a row being out of view due to paging or filtering is a regression which has already been fixed and the fix will be available with the next service release. Until then you could check if the row you wish to update is rendered and if not - call the corresponding data source function directly. The update will then be available the next time the row comes into view. The solution might look similar to the following:
if ($("#grid1").find("tr[data-id='" + rowID + "']").length > 0) { // row can be updated directly ...} else { $("#grid1").data("igGrid").dataSource.updateRow(rowID, rowObject, true);}
I hope this helps! Please, let me know if you have any other questions and/or concerns!
Stamen Stoychev
Hello Stamen,
can you post your sample that you used to reproduce the problem?
I will look into it and match it to my code.
(My sample page is part of a Durandal app, uses TypeScript and a none-public OData source which makes it difficult to send it to you.)
If I cannot reproduce it with your sample, I will produce a new sample myself.
Hello Peter,
I've been trying to reproduce this exact fixed virtualization issue you are seeing but with no avail. I do believe I managed to get the important parts of your scenario based on your steps to reproduce, screenshot and feature options, however, there is probably something small I am missing and because of that I'll ask you to provide a small sample that is reproducing it on your side with the steps described which I can take a look at. Thanks in advance!
Version: Infragistics.Web.ClientUI Grid 13.2.20132.1010
To reproduce:
Grid:
features: [ { name: 'Paging', pageSize: 500, showPageSizeDropDown: false }, { name: 'Sorting', applySortedColumnCss: false, featureChooserSortAsc: 'Sort A to Z' }, { name: 'RowSelectors', enableCheckBoxes: true, enableRowNumbering: false}, { name: 'Selection', multipleSelection: true }, { name: 'Updating' }],
bound to OData with RESTDataSource
I have a button that updates the first row:
$('#grid1').igGridUpdating('updateRow', 1, { Name: 'Test 1' });
Steps:
- Scroll down one page
- Select a couple of rows
- Click the button that updates the row that is not visible
- The grid renders and it looks ok
- Select a different row
- The grid looks like the attached screenshot
I can't reproduce the issue you are experiencing with fixed virtualization. Which version of Ignite UI are you using?