Hello All,
i am currently evaluating the igGrid component for our company and one challenge I am facing right now is dynamic theming capability.
i.e Our Customers/ Users have the ability to change the theme of their website by themseleves. for eg : if they set background color of their website to be blue/ yellow, then immediately the table headers, menu links, etc all reflect this change. We are using bootstrap theme and have customized this. We are achieving this dynamic theming using our less variables and updating these less variables and on the fly converting the less to css file.
Now in order to make the same for the igGrid Table how can we set the header to match the color of the background on the fly? Also we would like to know how all the related components can be made to change their them to match the customer's preference.
code example :
//our_theme.less
{
@background-color:#fff;
}
//table.less
@import "our_theme.less";
thead{
th{
color:@background-color;
when the user changes the color, the "our_theme.less" file will be updated and with new color and then using our LessToCss compiler we compile the less files to generate our .css files.
Now in order to achieve this , "I guess" we would have to know all the variables which affect the table/grid component and add our variables and use the LessToCss compiler to compile ifragetics.igniteUI.*.less file to css file.
If that is the case, is it possible to know which all variables should be modified? or is there any other easy way of achieving the dynamic theming capability?
Thanks in advance,
How would one do this if they want to extend it using bootstrap? The following does not work
$('.ui-iggrid-header.ui-widget-header').addClass('bg-primary');
Sorry Couldn't reply earlier I was on vacation. I am facing another problem for which I will make a new post . Because without that I will not be able to try this
Hello Sumanth Shankar,
Thank you for posting in our forums!
You can change the header's background color by handling the .ui-iggrid-header.ui-widget-header CSS class. You can see an example of this in this jsFiddle I have created here:
http://jsfiddle.net/ig_mharrington/ttt9po9z/
You can see a list of which CSS classes are applied to various elements in the igGrid in our API documentation here:
http://help.infragistics.com/jQuery/2015.1/ui.iggrid#theming
If you have any further questions or concerns with this, please let me know.