I want custom header text for igHierarchicalGrid. Its simple when data is in same format but I have data which is random. See attached example to see how data change.
Any idea how i can make header custom text for columns SerialNumber,Name,ChildSerialNumber?
Hi Manish,
We have a forum thread on this issue that will give you the information you need to regarding this issue: http://es.infragistics.com/community/forums/p/78658/399110.aspx
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
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.
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
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.
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.