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>