I am trying to use TreeGrid's load on demand functionality as described here http://www.igniteui.com/tree-grid/load-on-demand
When the data source is set to a URL, it seems that my only option to pass some data to the server when a node is expanded is to rely on the autogenerated 'path' URL parameter, which lists a chain of row IDs up to the root, and also the node depth URL parameter. Is there any way to add any custom data to these calls besides what the widget does automatically? The data we are displaying is not homogeneous, so row IDs and depths are not sufficient when loading child rows.
Thank you!
Hello,
Thank you for contacting Infragistics!
If you use the igTreeHierarchicalDataSource you can use a customEncodeURlFunc to setup a custom call:
http://help.infragistics.com/jQuery/2015.2/ig.treehierarchicaldatasource#options:settings.treeDS.customEncodeUrlFunc
Hi Mike,
Thank you for pointing that object out. But how do I use it with TreeGrid? I tried something like that, and no call to the server occurs:
var ds = new $.ig.TreeHierarchicalDataSource({ treeDS: { dataSourceUrl: '/Home/GetTreeDataPlain', childDataKey: 'Employees' } }); $treegrid.igTreeGrid({ dataSource: ds, ... }); ds.dataBind();
Note that I got the same TreeGrid working with the following code:
$treegrid.igTreeGrid({ dataSource: '/Home/GetTreeDataPlain', childDataKey: 'Employees', ... });
Thanks again!
You can attach the sample to the forums by going to the Options tab when replying with an update. If you don’t want to share your code on the forums I can create a private case where you can upload the sample.
Mike,
I tried attaching the project ZIP file to my reply from 2 different browsers, but would consistently receive a 404 error after the upload. Here is a link instead:
https://www.dropbox.com/s/n7j861h3zja1ce9/IgniteUI_TreeGrid.zip?dl=0
First, look at Controllers/HomeController.cs. It has a menthod, GetTreeDataPlain(string path) that generates random child employee data for a parent ID and returns a JSON object. Note that I am not using Infragistics server-side assemblies or attributes for parsing the request; I simply parse the autogenerated 'path' URL parameter value to the get the parent ID.
Next, look at the Views/Home/Index.chtml, it has the actual JavaScript code. Note that there are 2 methods that initialize the TreeGrid 2 different ways: initTreeGridUrl and initTreeGridDs. initTreeGridUrl works fine, and initTreeGridDs does not.
Choose at the bottom of the script which method to use when the page loads.
Thank you for the update. I have done some looking into this matter and instead of setting the dataSourceUrl you will want to set the dataSource, for example:
var ds = new $.ig.TreeHierarchicalDataSource({ dataSource: '/Home/GetTreeDataPlain', });
That partially resolved the issue, although the TreedGrid only loads the first level of nodes. When I expand a node, the console shows a 404 error, as the call is issued to /Home/null?path=... instead of /Home/GetTreeDataPlain?path=...
Here is the code:
var ds = new $.ig.TreeHierarchicalDataSource({ dataSource: '/Home/GetTreeDataPlain' }); $treegrid.igTreeGrid({ dataSource: ds, childDataKey: 'Employees', ... }); ds.dataBind();
Thank you for your patience. I am currently looking into this behavior with my team to see why this happening and how to achieve the intended behavior. I will continue to look into this matter and update you with my progress.
Thank you, Mike!
The initial call to the server for the root level data is happening twice because you have you call databind after you setup the igTreeGrid. Like so:
ds.dataBind();
The igTreeGird will call databind itself, you do not need to call it an additional time. Currently there isn’t a way to access the dataLevel from the customEncodeUrlFunc, so the way to do this be to us the rowexpanded/rowexpanding.
Thank you! I came up with a pretty much the same solution:
var ds = new $.ig.TreeHierarchicalDataSource({ dataSource: '/Home/GetTreeDataPlain', treeDS: { customEncodeUrlFunc: function (rec, expand) { return '/Home/GetTreeDataPlain?id=' + rec.ID.toString() + '&name=' + rec.LastName; } } }); $treegrid.igTreeGrid({ dataSource: ds, childDataKey: 'Employees', ... }); ds.dataBind();
There is one issue with that, though: the initial call to the server for the root level nodes is issued twice for some reason. (A bug?)
One more question about customEncodeUrlFunc: is there a way to pull the current data level from the rec argument object? It seems that it's present inside that object (__ig_options.dataLevel), but I am not sure how to get that value. As a workaround I subscribed to rowExpanding event where I can pull it from ui.dataLevel and store in an external variable, but it seems like a hackey way of doing things.
I have done some further looking into this matter and it seems like the datasource is having an issue. As an alternate way to achieve the behavior you can do the following code after you initialize the treeGrid:
$treegrid.data("igTreeGrid").dataSource.settings.treeDS.customEncodeUrlFunc = function (record, expand) { return "/Home/GetTreeDataPlain?stuff='howdy'" }