Hi,
We are evaluating the igniteUI for our project and we are using the igGrid. Additionally, we are using Polymer web components and have 'polymerized' the grid. We populate the data for the igGrid using ajax call which returns the JSON data. This is set to the grid dataSource. Once the grid is bound, we also setup a real time update mechanism via web sockets. So as we receive a message on the websocket, the json object in the message is added to the datasource of the grid and the grid is rebound. We find that the grid retains its page index etc..however, if we have scrolled down the grid at the time real time update is received, the scroll position gets reset and the grid scrolls back up.
this.gridDataProvider.push(newItem); //The gridDataProvider is the datasource of the igGrid. We are adding the real time update to it. $("#gridContainer").igGrid("dataBind");
Similarly, if we are in the process of setting up the Advanced Filter (via the feature chooser) on the grid, the list of columns added to the filter vanishes if a real time update comes in.
Could you please advise if these issues can be handled via some API calls? Real time updates are very critical for us and form a major part of our POC.
Thanks
Hi Seena,
Actually the scrollbar doesn't reset to initial position, rather it scrolls several pixels up due to the adding new rows, which is expected. If you want to retain the scroll position, you may call scrollTop method of the grid scroll container with the desired height, for example:
$("#grid").igGrid("scrollContainer").scrollTop($("#grid").height());
This will ensure that the grid will be scrolled to the bottom while the real time update is on.
If I can provide you with further assistance regarding this matter, please let me know.
Regards,Tsanna
Hi Tsanna,
Setting the autocommit to false and commiting the row after receiving the real time update is reintroducing the issues that we originally faced with the scroll position getting reset to the beginning of the grid. Any thoughts here?
Thanks,
Seena
Hello Seena,
In order to retain the current page index without resetting it to the last one after real time update, you may disable autoCommit property and call grid commit API after adding the row, for instance:
function PushData(){ var arraylen = ds.length; var newProd = { "ProductID": arraylen+1, "ProductName": "Chai", "CategoryName": "Beverages" };//, "ImageUrl": "../../images/samples/nw/categories/1.png", "InStock": 39 }; $("#grid").igGridUpdating("addRow", {ProductID: newProd.ProductID, ProductName: newProd.ProductName, CategoryName: newProd.CategoryName}); $("#grid").igGrid("commit"); }
Please let me know if you have further questions.
Thank you Tsanna. This solution helped with the grid scrolling and the issue we were facing with the Advanced Filter box. However, we found that we are not able to select a page number from the dropdown in the grid footer. As everytime a real time update comes in, its either getting reset to the last page or the conbo box for selecting the page number just collapses. We found this issue with both the $("#grid").igGridUpdating approach as well as when we go for a complete grid rebind.
Are there any options we could explore here?
Calling dataBind causes the grid to re-render, hence its UI is refreshed and returned to its initial state. Instead I would suggest you to use updateRow/addRow/deleteRow API in order to update/add/delete your data in some interval according your requirement. For instance the code in your PushData function could be modified to something like this:
function PushData(){ var arraylen = ds.length; var newProd = { "ProductID": arraylen+1, "ProductName": "Chai", "CategoryName": "Beverages" }; $("#grid").igGridUpdating("addRow", {ProductID: newProd.ProductID, ProductName: newProd.ProductName, CategoryName: newProd.CategoryName}); }
Please let me know if this solution fits your requirement.