Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
95
Dynamic Theming of the IgniteUI Grid
posted

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,