Is there any way to fire rowExpanding event of igTreeGrid other than normal expansion from Grid(UI).
I'm trying to implement search functionality which takes text from user to find it in Grid. As it needs multiple level node expansion on single click, I need to fire rowExpanding event externally.
I'm using igTreeGrid, TreeHierarchical DataSource and customEncodeUrlFunc for Data on record expansion.
Hello rahul,
Thank you for posting in our forum
I would appreciate if you please elaborate some more on why you need to explicitly raise the rowExpanding event and what do you want to do in the handler before the row gets expanded? When the user searches for a given word, what is the grid behavior that you want to achieve?
The reason for API method calls not raising the corresponding events is the following: after the API method has finished executing, the developer could just call the same functions/methods that otherwise would have been called in the event handler itself.
Ignite UI has been designed to be as consistent as possible with jQuery UI, on which it depends, and which embraces the same approach.
If you need any additional assistance, feel free to contact me.
Thanks for the response.
I'm using TreeHierarchicalDataSource in the following way to get the data on demand using service calls:
var ds = new $.ig.TreeHierarchicalDataSource({ dataSource: configMap.base_url + 'Structure/UnitContract?unitContractId=' + stateMap.unit_contract_id.toString(), treeDS: {
customEncodeUrlFunc: function (rec, expand) { var url = ''; switch (stateMap.expanded_row_data_level) { case 0: url = configMap.base_url + 'Structure/FDivListIgniteUI?unitContractId=' + rec.Id.toString() + '&effectiveDateType=' + stateMap.effective_date_type + (stateMap.effective_date ? '&effectiveDate=' + stateMap.effective_date : ''); break; case 1: url = configMap.base_url + 'Structure/GroupListListIgniteUI?unitContractId=' + stateMap.unit_contract_id.toString() + '&functionalDivisionId=' + rec.Id.toString() + '&effectiveDateType=' + stateMap.effective_date_type + (stateMap.effective_date ? '&effectiveDate=' + stateMap.effective_date : '') break; default: url = configMap.base_url + 'Structure/PartListIgniteUI?parentId=' + rec.Id.toString() + '&effectiveDateType=' + stateMap.effective_date_type + (stateMap.effective_date ? '&effectiveDate=' + stateMap.effective_date : ''); break; } return url; }, propertyDataLevel: "dataLevel" } });
And the igTreeGrid as follows:
jqueryMap.$tree.igTreeGrid({ dataSource: ds, childDataKey: 'Subnodes', autoGenerateColumns: false, autoGenerateLayouts: false, mergeUnboundColumns: false, responseDataKey: 'Records', generateCompactJSONResponse: false, enableUTCDates: true, columns: [ { key: 'PrefixedName', dataType: 'string', headerText: 'Name', width: '300px', template: jqueryMap.$nameCellTemplate.html() }, { key: 'NodeId', dataType: 'string', headerText: 'Attr', width: '40px', template: jqueryMap.$attrButtonTemplate.html() }, { key: 'Id', dataType: 'number', headerText: '', width: '40px', template: jqueryMap.$edmButtonTemplate.html() }, ......... { key: 'Name', dataType: 'string', hidden: true }, ], listExpansionStatesKey: 'listExpansionStates', width: '100%', height: (jqueryMap.$window.height() - configMap.treeTopMargin).toString() + 'px', enableRemoteLoadOnDemand: true, primaryKey: 'NodeId', localSchemaTransform: true, //virtualization: true, //virtualizationMode: 'continuous', rowExpanding: function (event, ui) { stateMap.expanded_row_data_level = ui.dataLevel; },
features: [{ name: "Resizing", deferredResizing: false, allowDoubleClickToResize: true }]
});
Now i want to expand the corresponding rows in the grid based on searched text using explicit search button.
Could you please let us know if there is any way to handle these events explicitly.
Thank you for the provided code.
As far as I can see, the only thing you do in the rowExpanding event handler is update the StateMap object so that it would save the state of the row that is about to be expanded, am I correct?
In case your search method returns an array containing the rowIDs of the rows that contain the searched word, then the expandRow method from the API could be used to expand them all by iterating over the array. After each call to expandRow, just add the line that would otherwise be executed in the rowExpanding event handler:
stateMap.expanded_row_data_level = ui.dataLevel
This would have the same effect as expanding the rows programmatically and explicitly raising the rowExpanding event itself.
I noticed in the dataSource TreeDS you use the propertyDataLevel option that has been deprecated since Ignite UI 17.1.
In case you are using a newer version, please replace it with dataLevelKey instead.
Please let me know if I could be of any further assistance.
Hi Pavlov,
Thank you for the response.
Yes, I am using the rowExpanding event to update the statemap object.
As suggested i am trying to use the 'expandRow' method to expand any one row after the grid initialization as follows:
if(condition){
jqueryMap.$tree.igTreeGrid("expandRow",1);
stateMap.expanded_row_data_level = ui.dataLevel;
}
This doesn't work to expand the rows. And also could you please let me know if there is any option to highlight the searched text in the grid.
Thank you.
Do you get any error message in the browser console after you call the expandRow method?
Also, please make sure the rowId that you pass as an argument is the correct one?
Try setting a breakpoint in the “if” statement in order to see if it gets executed at all, the condition might never evaluate to "true", which would lead to the expandRow never executing?
Regarding the text search: since the igTreeGrid currently does not provide such kind of highlighting functionality, some third-party libraries like Mark.js, or plugins like jQuery.highlight, or the jQuery highlight effect might be useful for your scenario.
This Stack Overflow thread provides some solutions and more details regarding text highlighting:
https://stackoverflow.com/questions/8644428/how-to-highlight-text-using-javascript
When i am trying to trigger the expandRow method it is not using the DataSource instead it displays empty object.
Here's my code:var rows=$tree.igTreeGrid("allRows");for(var i=0;i<rows.lenght;i++){var row=$(rows[i]);$tree.igTreeGrid("expandRow",row)}
I have tried using the following code in the same function 'loadData' where my entire Grid gets displayed and also tried using in different function on button click. In both the cases expand button gets triggered and the data doesn't show up.
Regarding the highlighting of text when i tried to change the html data of Grid to highlight any word, it breaks the functionality of expansion of grid.
If this is the exact code you use, then try changing “i<rows.lenght” to “i<rows.length”. Otherwise it would not work, there won’t be any error message in the browser console either.
I tried it on my side and it expanded all parent rows of the igTreeGrid, as expected.
Here is a link to a JSFiddle if you want to test it as well:
https://jsfiddle.net/zh6dx3py/15/
Regarding the highlighting: I would appreciate if you please elaborate some more on what the approach that you decided to use was and what the issue with the expand functionality of the igTreeGrid is: do you get any error messages in the console, what is the exact behavior that you observe when trying to highlight the text?