Hello,
I have a 3-level igHierarchicalGrid in an MVC project which is loaded on demand using a JsonResult. Only the first level is loaded initially, and the data for the second (and third) levels is loaded only when the expansion indicator (+) is clicked for the relevant row.
However, there may not be data for the second and/or third level - on each level i have a count records for the next level, and if this count is 0 I would like to hide the Expansion (+) indicator for the next level.
Is this possible, and how would you do it?
Hello Vasya,
I just wanted to see if there was anything further on this issue because I have the exact same question.
You mentioned "Before clicking the expand button the grid is not aware of the count of the children for a particular level." That is probably true by default, but the original post said "...on each level i have a count records for the next level...". Couldn't we use another event like iggriddatabinding to look through the rows to see which rows have no children, and hide the expansion indicator on those?
Thanks,
Brad Larsen
Hello Deon,
Feel free to contact me if you have any additional questions regarding this matter.
Since LoadOnDemand is used in your scenario the grid needs to be expanded in order to fetch the information about its children. Before clicking the expand button the grid is not aware of the count of the children for a particular level. After the expand button is clicked there are a few events that can be handled such as: childrenPopulating, when children are about to populate, childrenPopulated, when children have been populated etc. Some further reference about the events of the igHierarchiclGrid could be found at: https://www.igniteui.com/help/api/2013.2/ui.ighierarchicalgrid.
If the LoadOnDemand feature is not enabled the dataBound event, that fires when the data binding is completed, could be used to check whether there are any children. Some additional information regarding the events of the grid could be found at:
https://www.igniteui.com/help/api/2013.2/ui.iggrid_hg
Please let me know if you have any additional questions regarding this matter.
Hi Vasya,
Thanks for the response, i think i may be able to use the code that hides the indicator.
Ideally what i would like to do though is hide them BEFORE they are clicked, perhaps when each batch of rows is fetched from the server.
Is there an event that fires with each fetch? I could then loop through the fetched rows and hided them as you suggested.
Thanks
Deon
Thank you for your patience.
I investigated your requirement further and what I can suggest is handling the RowExpanding event of the igHierarchicalGrid. In this event you could check whether the child grid for this particular level has any row and if there is no rows to hide the span element that holds the "+" sign. For example:
$("#hierarchicalGrid").live("ighierarchicalgridrowexpanding", function (evt, ui) { if (Your condition here) { $(args.parentrow.find("span")[0]).hide(); $('#' + id).hide(); } });
$("#hierarchicalGrid").live("ighierarchicalgridrowexpanding", function (evt, ui) {
if (Your condition here) {
$(args.parentrow.find("span")[0]).hide();
$('#' + id).hide();
}
});
Alternatively, in this event you could access the child of the row being expanded, check the number of rows in this child grid and if there is no rows to hide the span element as such:
$("#hierarchicalGrid").live("ighierarchicalgridrowexpanding", function (evt, ui) { var childGrid = args.parentrow.next().find("table.ui-iggrid-table"); var id = $(childGrid).attr("id"); var rows = $('#' + id).igGrid("rows"); if (rows.length == 0) { $(args.parentrow.find("span")[0]).hide(); $('#' + id).hide(); } });
var childGrid = args.parentrow.next().find("table.ui-iggrid-table");
var id = $(childGrid).attr("id");
var rows = $('#' + id).igGrid("rows");
if (rows.length == 0) {
I hope you find this information helpful.
Please let me know if you have any additional questions regarding this issue.