This is different than what I'm looking. I'm looking for how to give custom header text for igHierarchicalGrid . Can you please modify the attached example ?

-Manish

This is the issue here $("#grid1").igGrid("headersTable") won't give child columns header text unless they are expanded. 

Hi Manish,

I will ask that you provide me an example I can run along with steps-to-reproduce that shows this issue occurring. With that I can look further into what is happening here. Thank you!

I have modified my initial post example and attached new one with this post. I have custom text header for top level column but I want child columns also with custom text.

-Manish

My approach is there in the sample I attached. I used this

if(text =='SerialNumber'){
    $("#hierarchicalGrid").igGrid("headersTable").find('thead').find('span.ui-iggrid-headertext').html('CustomSerialNumber')
    }

But my question is how to set custom text for child columns without expanding it.

Thanks!

Manish

Hi Manish,

I am looking further into this matter for you. I will follow-up with you here on the thread once I have some further details.

Hi Manish,

A you have observed, the child grid DOM is not created until the point when the parent grid row is expanded for the first time. Given this, what you want to do is to wait and handle changing of the grid headers at such a point as the parent row is expanded.

Then to get access to the child grid, you need to call the "allChildrenWidgets" method.

To accomplish your objective I moved the changing of the child grid headers out of the ReLoadedData() and do this operation when listening for the childGridCreated event:

$("#hierarchicalGrid").on("igchildgridcreated", function (evt, ui) {                

ui.element.data("igGrid").headersTable().find("thead").find('span.ui-iggrid-headertext').html();          

var text2 = $("#hierarchicalGrid").igHierarchicalGrid("allChildrenWidgets")[0].headersTable().find("thead").find('span.ui-iggrid-headertext').html();     

if(text2 =='SerialNumber'){      

$("#hierarchicalGrid").igHierarchicalGrid("allChildrenWidgets")[0].headersTable().find("thead").find('span.ui-iggrid-headertext').html("CustomSerialNumber");      

}             

})

Attached is the revised sample for your reference.

Let me know if you need any additional assistance regarding this objective.