Re-binding Data to igGrid Issues

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://www.infragistics.com/support

 

Hi Maya,

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://www.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.

 Hello Elin ,

 

The DataSourceUrl can point to any url, so you can set it to point to your WebMethod. The WebMethod should return json data.

When the grid is using remote sorting and you sort on the column the grid will automatically make an ajax call with some additional parameters that contain information on which column was sorted and what is the sorting direction.

 

You can get the additional parameters from the Query string that’s being passed as part of the request and based on that build the query to your database.

For example you can get how many records need to be skipped and how many taken and also how the records are currently sorted with:

 

//Get the current page index and page size from the QueryString

int skip = Convert.ToInt32(HttpContext.Current.Request.QueryString["$skip"]);

int take = Convert.ToInt32(HttpContext.Current.Request.QueryString["$top"]);

//Get the sorted column and direction

 string orderBy = HttpContext.Current.Request.QueryString["$orderBy"];

 

 

I’ve attached an example for your reference. Note that in order to keep the example simple the data is dynamically generated and manual sorting and paging is applied to it in order to get the correct data and return it to the grid.

In your application you could instead build and execute the request to your data base and directly return the sorted and paged data instead.

 

As for the persistence of the features state on data binding. This is a new functionality that was added in version 14.1. You can refer to our documentation on the new functionalities for 14.1 here for more details:

http://help.infragistics.com/Help/Doc/jQuery/2014.1/CLR4.0/html/Whats_New_In_2014_Volume1.html#_Ref383009875

 If you’re using 14.1 and you simply data bind the grid without changing the data source schema , then the sorting will be automatically persisted and applied.

You can refer to the following example:

http://www.igniteui.com/grid/feature-persistence

 

Let me know if you have any questions.

 

 

Best Regards,

Maya Kirova

Developer Support Engineer II

Infragistics, Inc.

http://www.infragistics.com/support

 

Thank you for all the help Maya, I will give this a try as soon as I can!

Hello Elin , 

Let me know if the suggested approach would work in your scenario once you’ve had the chance to test the sample.

Also if you have any additional questions or concerns don’t hesitate to let me know.

 

Best Regards,

Maya Kirova

Developer Support Engineer II

Infragistics, Inc.

http://www.infragistics.com/support

 

Hello Elin ,

 

I’m just following up to see if you’ve been able to resolve your issue. If you have any questions or concerns or if you need further assistance please let me know.

 

Best Regards,

Maya Kirova

Developer Support Engineer

Infragistics, Inc.

http://www.infragistics.com/support

 

Hey Maya,

The string sent from the server to the client side (preivously via an explicit ajax call and then bound to the grid via dataBind and now sent back from the function URL given to dataSourceURL) looks like this:

"{"totalRowCount":3,"pageRowCount":40,"rowSelectorVisible":"True","wordWrapGrid":"False","data":[{"Date":"\/Date(+1333324800000)\/","Id":"1"},{"Date":"\/Date(+1333324800000)\/","Id":"2"},{"Date":"\/Date(+1333324800000)\/","Id":"3"}]}"

Where the "data" property is what shold be bound to the grid. The other information is just meta data we need for other purposes. This return string looks the same as when we had the explicit ajax call and manually destroyed and re-bound the data on each interaction earlier, and during that time we set the responseDataKey to "data" and it worked fine.

But after switching to dataSourceUrl (without changing the server side so the same string is returned) and letting the responseDataKey still be "data" it doesn't work anymore. It reaches the server side method and the string is returned as expected, but then infragistics.core.js crashes cause _data is undefined saying:

"Unhandled exception at line 194, column 25748 in http://localhost:55765/igniteUI/js/infragistics.core.js

0x800a138f – JavaScript runtime error: Unable to get property 'length' of undefined or null reference"

So I have two questions:

– In what way to we need to modify our server side stringification of the data returned to the client, AND

– What if the data set should be empty for those user parameters, how can we return an empty set without getting a grid exception. Just return the headers?

Do you have any update on this?

Please take a look at my post from 06-02-2014 1:34 PM as we still have issues with this and are unable to continue until this is resolved.

Hello Elin ,

 

If you have any remote operations like remote paging you’ll need to also make sure that the recordCountKey is set.

Have you had the chance to test the sample I’ve previously attached ( on May 15)?

It returns the data in a similar format :

“

{"d":{"__type":"DataResult","Items":[{"ID":0,"Name":"Name0"},{"ID":1,"Name":"Name1"},{"ID":2,"Name":"Name2"},{"ID":3,"Name":"Name3"},{"ID":4,"Name":"Name4"}],"TotalRecordsCount":20}}

“

The response data key is : "d.Items"

 

And recordCountKey: "d.TotalRecordsCount"

 

Everything works as expected in that scenario.

 

Test it on your side and let me know if you’re getting a different result. If the sample is not an accurate demonstration of what you’re aiming to achieve please feel free to modify it so that it reproduces the issue you’re encountering, or attach a sample of your own if you have one.

 

Please let me know if I can provide any further assistance.

 

 

Best Regards,

Maya Kirova

Developer Support Engineer II

Infragistics, Inc.

http://www.infragistics.com/support

 

Your sample works if used as is but it seems to be some issues with the Infragistics scripts/version we use.

when changing the
//

// ]]>
script tags:

 <script src="http://cdn-na.infragistics.com/jquery/20141/latest/js/infragistics.core.js"></script&gt;
 <script src="http://cdn-na.infragistics.com/jquery/20141/latest/js/infragistics.lob.js"></script&gt;

To the Infragistics script files we use (another version):

<script type="text/javascript" src="scripts/infragistics.core.js"></script>
<script type="text/javascript" src="scripts/infragistics.lob.js"></script>

I get an error in your sample version saying:

Unhandled exception at line 194, column 29000 in http://localhost:56226/scripts/infragistics.core.js
0x800a138f – JavaScript runtime error: Unable to get property 'childNodes' of undefined or null reference

Changing back to the script files you originally used solves this error. We are using version 13.1.20131.1012.

I have updated the Infragistics script files to the latest ones we have, 2013.2 and that seems to have solved that problem. I can now successfully run your sample when integrated to our solution and I think I have targeted my main issue.

The original error I had was:
Unhandled exception at line 226, column 27387 in http://localhost:55765/igniteUI/js/infragistics.core.js
0x800a138f – JavaScript runtime error: Unable to get property 'length' of undefined or null reference

And I can replicate that in your sample by simply modifying your GetGridData method to return a string instead of a DataResult (I've attached a sample with these modifications).

The thing is that due to our dataset being generated by user input at runtime we cannot know what columns will exist or how many. The only thing we have to work with is a C# DataTable (which cannot be serialized "as is" due to circular references) so we are building our own JSON and hence we need to return a string, not an object from the server web method. Can you please look at this and provide a sample where the web method returns a string?

Thank you!

EDIT:

I obviously need to JSON.parse() the response from the server in the client, just as ou would in a normal AJAX call. Where would I add that logic?

Hi Maya,

Do you have any update on this issue?

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