In the rendered event for an igGrid I need to set several css properties for the Header columns. As long as I don't also set the height property when instantiating the igGrid, they css styles are honored. If I set the height at instantiation the css styling for the headers appears to be ignored. I can set the height after instantiating the igGrid, but then I can't use virtualization, which I need. I have also tried using the headerRendered event with the same outcome. Sample code is attached.
After additional research, it appears that changing the styling for cells (td elements) is also ignored in the rendered event.
Hello hrwebb,
Thank you for posting in our community.
I am currently looking into this matter for you. I will keep you posted on my progress and I will get back to you soon with more information or questions for you.
Please feel free to continue sending updates to this case at any time.
Thank you for your patience while I was looking into this matter for you.
When height option is set the DOM structure is different. In this case when you handle rendered event the ui.owner.element is a table that contains only grid records. For grid headers there is another table. The reason is that igGrid provides fixedHeaders option which makes only the grid data scrollable. This requires grid data and grid headers to be in different containers. This option is true by default. In regards to this I have two suggestions for achieving your requirement:
1) Disable fixedHeaders option. For example:
[code]
//Initialize
$(
".selector"
).igGrid({
fixedHeaders :
false
});
[/code]
2) Get reference to the header`s table and apply the css styles. Instead of ui.owner.element the following selector could be used $("#grid1_headers"):
var grid_headers = $("#grid1_headers"); grid_headers.find("tr th").css("text-align", "center"); grid_headers.find("tr th").css("center", "Blue"); grid_headers.find("tr th").css("background-color", "WhiteSmoke"); grid_headers.find("tr th").css("border-color", "LightGray"); grid_headers.find("tr th").css("font-size", "10pt"); grid_headers.find("tr th:nth(0)").css("border-left-style", "solid"); grid_headers.find("tr th:nth(0)").css("border-left-width", "1px");
I am attaching your modified sampel for your reference.
I hope you find my information helpful.
Please let me know if you need any further assistance with this matter.
Thanks for your assistance. The 2nd option is what I needed.
I am glad that you find my suggestion helpful.