Hi,Suppose the hierarchical grid structure is like-A1 --> A1B1 ---> C11
---> C12
---> A1B2 ----> C21
---> C22A2 --> A2B1 --.> C31
---> C32 ---> A2B2 --> C41
----> C42Where, A1 represnt the first row of topmost grid, A1B1 and A1B2 are its child and so onSuppose, I expand the A1 row, then A2 should be collapsed and vide versa, now inside A1, if A1B1 is expanded, A2 will remain collapsed but, and A1B2 will also be remain collapsed and similarly if A1B2 is expanded, then A1B1 is collapsed.. Going one more level down.. Suppose child 1 of A1B1 is expanded, then all other children of A1B1 should be collapsed, and so on.Hope I make myself clear.How can I achieve this functionality on level wise, i.e If a row of ith level is expanded then all other rows at same level will be collapsed and also all other rows at (i-1)th level should remain collapsed except the parent at (i-1)
Hello Amritesh,
I'm attaching a sample with the desired behavior for your reference.
If you have any questions, please let me know.
Regards,
Tsanna
HI Tsanna,Thanks for the answer. Beautifully working in my app, but One more question. HOW CAN I GET THE CHILD GRIDS ENTRIES. like, when the row is expanded, what are the children rows inside it, how can i get them?
You may access the respective child grid rows of the currently expanded row with the following code on rowExpanded event: args.owner.allChildren()
However please note that allChildren() function returns an array of child grids rows which populated on every expanded parent row. If you want to access a particular child grid row, then you may access it by id attribute, for instance: $("#Grid1_3_Developers_child"). If you have further questions, please let me know.
Hi Tsanna,How can I access the child grid ids? They are auto-created by the API, So, its not certainly a good idea accessing the particular child grids using id.
As I mentioned in my previous post, you may access an array containing the child grids of all consequently expanded parent rows with the following code: args.owner.allChildren(). And using that you may access certain child grid table element, then get its id, for example: args.owner.allChildren()[0].id. This will return the correct child grid id, without need of hardcoding it.
Do you need further assistance regarding this matter?
Hi Tsanna,This is not going to help me. What I need is get all the child rows when a particular row is expanded, so that I can plot a graph with child rows keys as my X-Axes and one of the columns of child row as Y-Axes. That's why I need the data.I am trying another method, in which I will be storing the value of child in a map that contains key as all the keys from first parent to the top level parent. How can i get all the parents? I tried var allParents = ui.owner.element.parents("tr[data-container='true']").prev(); var parent =allParents[i]; parent.getAttribute('data-id');
This is working in 'iggriddatabound' event, but not on row Expand eventSo, any of the way will solve my problem1) Get ONLY those data which are the child of the row which is expanded2) Get all the parents of that child upto top level, so that i can filter out the data
Yes,var data = $(ui.parentrow.context).find("table[data-childgrid=true]").data().igGrid.dataSource.data();http://stackoverflow.com/questions/28834146/getting-entries-of-child-grids-of-currently-expanded-row-in-ighierarchicalgrid/
Hi Amritesh,
Did you manage to resolve the issue? If you need further assistance please let me know.
Please try accessing the column layouts that belong to the expanded row using the following code inside 'rowExpanded' event:
args.owner.options.columnLayouts[0].columns
If you want to access the key of certain column, you may do it using for instance: args.owner.options.columnLayouts[0].columns[0].key
Is this what you're looking for?
This will not give all the parents up the hierarchy. 2 options I need-
1) Either all the parents up the level
2) Or, all the child of the row being expanded
You can access the expanded parent row on rowExpanded event through the event arguments, for instance:
rowExpanded : function(e, args) {
//jQuery wrapper of the parent row object
args.parentrow
},