We are using igGrid to display different data sources as grids. Since the grid data source is fetched dependent on the structure of a database table that is user controlled we cannot beforehand know the collection of columns or their data type. Due to this we are auto generating columns when binding the data to the grid.
This works fine so long as the user keeps looking at the same view (the same collection of columns). When changing views however the old views' columns aren't cleared. This means if the user was looking at a view with 10 columns and then switched to a view with 4 columns, the new view will have the first 4 columns from the current view and the following 6 columns from the old view.
When binding data to the grid we are using:
$("#dataGrid").igGrid({ schemaGenerated: generateSchema, columnsgenerated: generateColumns, autoGenerateColumns: true, defaultColumnWidth: "150px", width: "100%", dataSource: data, dataSourceType: "json", responseDataKey: "data", features: gridFeatures });
Is there a way to force refresh on the existing grid data source so that it completely drops the old columns?
----
A related issue is that we are using remote paging, sorting and filtering in our grids since the data source can become quite extensive. We are letting the database handle that part and return a controlled size subset of rows that we bind to the grid. The cost of this is that we need to re-bind data using the same code as shown above, after every paging, filtering or sorting activity. The problem is that after re-binding the data, the filtering and sorting properties seem to be cleared off the grid and we need to programmatically write them to the grid again. Is there a way to avoid doing this?
A simple example would be clicking a column header to sort it which would indeed sort the column as expected by re-binding with a new data source that contains a sorted subset of the grid data. But the graphical indicator that the column is sorted will be cleared when re-binding the grid so the user won't get the graphical feedback of the column being sorted. Same goes for filtering, the filter text field is cleared and so is the filter option.
Is there a way to handle remote paging, sorting and filtering without re-binding the data fully? Can you re-bind only the data partially so that it doesn't clear the filter and sorting properties?
We are using ASP.NET and igniteUI v. 13.1.
Hello Elin,
Thank you for posting in our forum.
It appears that the columns are generated only once on the original initialization of the grid and won’t be cleared and generated again when the data source changes.
One possible way to force them to clear and generate again would be to use the “renderMultiColumnHeader” method.
When called the method will re-render the whole grid and render the column object. It accepts and array of columns.
In general it was designed with a different purpose (to re-render multicolumn headers) but I can be used in this scenario as well.
I’ve attached an example for your reference where on click of a button the data source and columns will be changed.
Let me know if this approach would work in your scenario.
Regarding the remote operations. If the data source is set to be remote via the DataSourceURL setting , then the grid will make ajax request to that url on remote operation like sorting, filtering etc.
If your data source is retrieved remotely and you manually handle the returned json result in the related MVC action, then no additional databinding will need to occur for the grid.
I’ve also attached an MVC example where the remote paging and filtering are manually handled and the json result returned for the grid. The state of the control is properly persisted during that process.
Let me know if you have any questions or concerns.
Best Regards,
Maya Kirova
Developer Support Engineer II
Infragistics, Inc.
http://ko.infragistics.com/support
Hi Maya,
Thank you for the sample, it helps for the iggrid data rerended. i am trying to use the same option $("#tblHierachical").igGrid("option", "dataSource", myDataSource), The data display only at master layout, but the columnLayouts only load the header information, but the data.
Thanks,
Thomas Chai
I will try using renderMulticolumnHeader and get back to you on that.
Regarding the other issue we are not using remote via the DataSourceURL. Instead we are catching the columnSorting event and from there issuing an Ajax call back to the server for the filtereed/sorted/paged data. The server then passes on that request to the DB and we handle all filter, sort and paging in an SP in the DB. We do not wish to send the entire data set back to the server and handle the operations there since the data sets can be huge.
Looking at your MVC example it looks as if the server always fetches the full data set from the DB and then filters out before sending it to the client, which is not the behavior we are looking for. Can we use DataSourceURL with ASP.NET (we are using Ajax calls from the client to static WebMethods in our code behind) to fetch data anyway?
Could you please provide an ASP.NET example using remote filtering/sorting or paging with DataSourceURL. If possible, please also include how we can reach information about which column is being filtered/sorted and on what value/sort direction. I assume this can be fetched from the query string?
---
Also, as a side note. I did find this information:
"Sorting persistence is true by default. This is a breaking change. When you enable igGridSorting you are already using it in a persist mode. This means that after explicitly calls of dataBind(), that persistence is applied for UI and data source view (the sorting indicators and the CSS classes are applied, the data source remains sorted)"
(http://ko.infragistics.com/help/jquery/igGrid_Sorting_Overview.html)
So according to this even if we explicitly call dataBind() we should still not need to manually re-apply the GUI properties of the sorting, which it seems we have to do.