cellClass not being applied to igx-column-group

Hello,

According to https://ko.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/igxcolumngroupcomponent.html cellClasses is a supported property for the igx-column-group control.

When I attempt to apply a css class using this property though it is ignore. Here is a sample of my implementation:

Am I missing something?

Thanks!

Hello,

The cellClassses property works a lot like the ngClass directive. It expects an object where the keys are the style classes that are to be applied and the values are either simple Boolean values or a callback that returns a Boolean value.

You can check out this sample where you can see it in action.

In your case it will be [cellClasses]="{'center-and-middle-text': true}"

Thanks for the tip but that's not getting me anywhere either. I've tried it in the manners shown below based on your suggestion and the sample you provided. Neither way worked. The class just isn't getting applied.

Here is the class I'm trying to apply:

Class is found in component.scss

.igx-thead_center-and-middle-text {
  display: --webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
}

Here is the first way I tried it:

Applied in component.html

Here is the second way I tried it

Applied in component.ts

  public theadCenter = {
    "igx-thead_center-and-middle-text": true
  };

Applied in component.html

Any other suggestions?

Hello,
IgxColumnGroupComponent as you have already know define a logical group of columns, so through it you can define only properties that determine the column behavior as a pinning, hiding and so on and you can not use it to set a properties that needs to applied to a cell. So for now the best I can suggest you is to set this class for each column in you group to define the specific class that you need like the following:

<igx-column-group [movable]="true" header="Address Information">
       <igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Country" [cellClasses]="{'igx-thead_center-and-middle-text':true}"></igx-column>
       <igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="City" [cellClasses]="{'igx-thead_center-and-middle-text':true}"></igx-column>
       <igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Address" [cellClasses]="{'igx-thead_center-and-middle-text':true}"></igx-column>
</igx-column-group>

If you need any additional assistance, please contact us.

Are you saying that cellClasses can't be applied to <igx-column-group-header> objects? If so, the documentation that I linked in my original post is incorrect as it lists cellClasses as a supported property.

All I'm trying to do is affect the position of the text in the header of the grouped columns.What is the suggested way of doing so?

Hi,

I made a sample in StackBlitz based on your requirement.

In this sample I am using the css classes of the headers to center their text.

In the  styles.scss file I add:

.igx-grid__th-title{
  text-align: center;
}

.igx-grid__thead-title{
    display: inline-block;
    text-align: center;
    margin-bottom: -5px
}

Please, take a look at this sample and let me know if you have any further questions.

Thanks for the suggestion but your solution would apply that style to all objects that use those classes which if I"m not mistaken are all of the headers for any igxgrid.

I'm trying to apply a class to a specific cell in a specific grid. I'm not having an issue with the CSS values needed, my problem is that the class is not seen by the grid.

When I look at the grid via Chrome's debugger, the class isn't listed at all. If I manually add the class through the debugger it works fine.

Hi,

I updated the sample to apply all the headers that have 

igx-thead_center-and-middle-text to be centered. I used ViewEncapsolation so that the styles can be applied only for the component where the grid is set.

Here is the updated sample.

Please, let me know if I may be of further assistance.

Thank you for the assistance. This put me on the correct path.