IGX Grid custom styling

Hi , we want to totally modify the color of the grid .i have gone through couple of posts and am not exactly getting what am looking for.

we want to modify the color of the header, header columns border, data border and back ground and what color for selection and setting the font and so on.  including the column filters/hidden column

can you share example how we can achieve this with css/scss without using any theme?

if theme is mandatory can you share how we can override those what we are looking for.

Hi Peru,

Thank you for posting to Infragistics Community!

Before I proceed with assisting you, could you please confirm if under “without using any theme” you are referring to not using the SASS Component Themes, which can be included by defining the corresponding function. For instance, for the Multi-column headers feature, as described in the Styling section of its topic, this would be the grid-theme. The function accepts parameters, such as $header-background, $header-text-color, etc. that target these elements’ colors.

What I can say is that this is the most straightforward approach to customizing the components’ colors. Additionally, the themes could either be defined globally to affect all components of the corresponding type, or alternatively, they can target separate groups or instances of components, depending on the CSS scope they are included in.

If you would require only a CSS solution, the other straightforward approach I can suggest is defining the CSS variables that correspond to the different parameters that can be passed to the component themes.

Each variable name is constructed in the following format:

–igx + “component-name-with-hyphens”-“parameter-name”,

 so, for the abovementioned grid-theme $header-background parameter, for instance, the CSS variable would be:

–igx-grid-header-background

For you convenience, I have modified the Styling demo from the referenced topic to achieve the same by using CSS variables. Please, check it out here.

In conclusion, please, refer to the Styling sections of each of the listed features topics in our documentation. There you will find links to the components themes’ APIs, where you will find listed all the available parameter names.

If you have further questions about a concrete element that should be styled, please, let me know. Additionally, if this is not an accurate demonstration of what you’re trying to achieve, please, elaborate further on your requirement.

Best regards,
Bozhidara Pachilova
Associate Software Developer

Thank you . this is very helpful. 

i referred the component theme API , say for example

for styling the column hiding  where it shows the list of columns in checkbox what is the corresponding theming for that.

for cell data color or making it bold etc what should i do ? 

is there a way i can easily identify with naming conventions

Hi Peru,

The naming convention is as described in my previous reply. To find the specific parameter names, please consult the theming functions API. For your convenience here are API links for the mentioned elements and features:

Column hiding drop-down list: column-actions-theme, input-group-theme, checkbox-theme

Grid colors: grid-theme and namely variables, such as:

  —igx–grid–row–odd–background,

  —igx–grid–row–even–background,

  —igx–grid–row–odd–text–color,

  —igx–grid–row–even–text–color,

  —igx–grid–header–text–color,

Regarding customizing the IgxGrid cell styles, namely more advanced styles, such as font weight, etc. this is not achieved by using CSS variables or component themes, as they only target colors. I believe you will find the Conditional Styling topic quite helpful on the matter. For example, the rowClasses input property on the IgxGrid component could be leveraged to assign custom styles for some target rows. In case this has to be applied for all rows, the condition function could simply return true.

Please, check out the previously referenced StackBlitz sample, where I have included the above mentioned suggestions as well.

If you require any further assistance on the matter, please, let me know.

Best regards,
Bozhidara Pachilova
Associate Software Developer