Hi All,
I have a requirement where i need to display hiererchical grid which has child data and will be displayed on click of the parent grid.
Now, i Don't want to show the expansion panel for the rows which donot have child in it.
To indicate that, i have a flag with true and false to identify whether there is data in child in parent grid.
Can anyone help on this with example, on how can we do this .
Little help would be very much helpful.
Thanks,
Subham
Hello Subham,
After investigating your requirement further, I determined that your request could be achieved by using the hasChildrenKey property.
More information could be found in the following forum post, where a working sample is provided and explained.
Please let me know if you need additional information regarding this matter.
Regards, Monika Kirkova, Infragistics
Hi Monika,
The property u mentioned is to go through the hierarchy to set this value(hasChildProperty), but i already have a flag in parent element to indicate whether there is a child for a row or not, so can i get the solution in that terms, to just disable the expansion based on that.
Hope, u understood, what i meant, it would be helpful if i get an example.
I have prepared sample, demonstrating how to hide the expand icon for rows that don’t have children. In the method show, I set a variable hasData to true or false, depending on the row’s children. There you can use your boolean variable. Then I have used a template for the collapsedIndicator and the template looks like this:
<ng-template igxRowCollapsedIndicator let-row>
<igx-icon fontSet="material" [style.visibility]='show(row) ? "visible" : "hidden"'>keyboard_arrow_right</igx-icon>
</ng-template>
This way you would see the icon only if the child grid is not empty.
Regards,
Monika Kirkova,
Infragistics
please consider my example.
I changed my sample and bound the data to the grid in ngOnInit() like this: this.hierarchicalGrid.data = this.localdata;
However, the method show() is called every time. I assume that the problem may be this if/else statement in the end of the method:
if(row.hasLoadError){
this.hasChildData = false;
}
else{
this.hasChildData = true;
This is after the check for empty children is done and overwrites the variable hasChildData and if there is no error with the loading, hasChildData will be true every time and the icon will be displayed. This statement could be put in the begging of the method show(). Here is the changed sample.
I saw the changed example and trie to do the same but it does not solve the issue since also when the expansion panel is disabled we are able to still click on that particular row which does not have child data.
So, What I thought of was, Do we have a feature to disable the complete row based on presence of haschildData flag in the parent array object?
Please provide an reference example as that would really helpful and solve the issue irrespective of expansion panel is shown or not.
I have tested your code and onRowToggle event is fired and the method toggle is called. I assume that the reason behind your issue could be the version used. I am using igniteui-angular 9.0.0 and there is no problem with firing this event. Can you please try running the sample using version 9.0.0 and let me know what is the result.
Looking forward to hearing from you.
Iam Still facing the same issue like previous, onRowToggle even is not getting called.
I Am using Ignite UI Version as: 7.3.20 and ignite-cli version as: 4.1.0.
Is It related to the version, Iam using ?
Since this issue is there for so many days , iam nit able to call any either of any function through hierarchical grid.
Let me present u with my grid structure:
After investigating this further, I determined that there is an event onRowToggle, which fires every time a row is collapsed or expanded. A method could be bound to the event, where by the rowID it is determined whether this row has children or not and if there are no children the event is being canceled. In order the event to fire for child rows except of the grid tag, the onRowToggle should also be placed in the first row-island. I have prepared a sample, demonstrating the described behavior.
Please let me know if you need more information.