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
Hello Seena,
Please let me know about the product and build versions that you're using. Also an isolated sample will be very helpful for me, so that I can test it on my side. Do you see this behavior on all major browsers? Looking forward to your response.
Regards,Tsanna
Hi Tsanna,
It took me a while to get the sample ready to post here (its a modification of your demo code). Below is my sample code. The data push can be started by clicking on Push Data button. I have purposely kept the page size and grid small so that we need to scroll down to see the bottom most row. However, if an update comes in when I have scrolled down, the grid again resets to the first rows. We want the real time updates to be transparent to the user. Same with the Advanced Filter option. Any column setting I do vanishes when real time updates come in. Let me know if you require further information. I can see this on Chrome as well as IE11.
<!DOCTYPE html><html><head> <title></title>
<!-- Ignite UI Required Combined CSS Files --> <link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<!-- Ignite UI Required Combined JavaScript Files --> <script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.core.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.lob.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script><script src="underscore-observe.js"></script></head><body> <input type="button" onclick="StartPushData();" value="Push Data" > </input> <input type="button" onclick="clearInterval(myVar)" value="Stop Data Push" ></input> <table id="grid"></table>
<script src="http://www.igniteui.com/data-files/nw-products.js"></script> <script> var ds = northwindProducts; function PushData(){ var arraylen = ds.length; var newProd = { "ProductID": arraylen+1, "ProductName": "Chai", "CategoryName": "Beverages", "ImageUrl": "../../images/samples/nw/categories/1.png", "InStock": 39 }; ds.push(newProd); $("#grid").igGrid("dataBind"); } var myVar; function StartPushData(){ myVar =setInterval(PushData, 1000); } $(function () { for (var i = 0; i < northwindProducts.length; i++) { northwindProducts[i].ImageUrl = "http://lorempixel.com/50/50/food/" + (i % 10) + "/"; } $("#grid").igGrid({ primaryKey: "ProductID", width: '100%', height : "400px", autofitLastColumn: false, autoGenerateColumns: true, dataSource: ds, responseDataKey: "results", autoCommit: true, features: [ { name: "Sorting", type: "local", mode: "multi", sortingDialogContainment: "window" }, { name: "Filtering", type: "local", mode: "advanced", filterDialogContainment: "window", columnSettings: [ { columnKey: "ImageUrl", allowFiltering: false }, { columnKey: "InStock", condition: "greaterThan" } ] }, { name: "GroupBy", columnSettings: [ { columnKey: "CategoryName", isGroupBy: true } ] }, { name: "Selection" }, { name: "Paging", pageSize: 25 }, { name: "Resizing" }, { name: "Updating", editMode: "dialog", enableAddRow: false, columnSettings: [ { columnKey: "ImageUrl", readOnly: false } ] } ] }); }); </script></body></html>
Hi Seena,
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.
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?
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.
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
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.