CODEWITHSUNDEEP
javascriptcssangulardevextremedevextreme-angular
Ktall32
Ktall32

Reputation: 39

Angular devextreme style dxi-column

I need to make one column in a Datagrid to have a pointer cursor but any styling does not change everything. I've tried using the dxi-column selector and also using a class. Both with and without::ng-deep.

Any ideas or solutions?

<dxi-column dataField="companyDetails.name" caption="Company">
    </dxi-column>

I have started using the template but I can't get the wrapper to filling out the cell

::ng-deep .dx-template-wrapper {
    cursor: pointer;

}

Upvotes: 1

Views: 9616

Answers (1)

JossFD
JossFD

Reputation: 2216

Have a look at the cssClass property of column.

Here's the docs for it

Something like:

component.ts

<dxi-column dataField="companyDetails.name" caption="Company" cssClass="pointer-column">
</dxi-column>

component.scss

::ng-deep pointer-column {
  cursor: pointer;
}

Or if you want this class to apply globally to all grids you can just add it to the style.scss file without any ::ng-deep needed. Or even better, you can have it global for certain grids only by giving them a class:

any-component.ts

<dx-data-grid
...
class="a-type-of-grid">
</dx-data-grid>

style.css

//anything with this class
.pointer-column {
 cursor: pointer;
}
//grids (or other elements if you want) with the 'a-type-of-grid' class 
.a-type-of-grid {

  /*Some css just for this type of grid*/

  //overwrite the global pointer-column class
  .pointer-column {
    //css you want
  }
}

Hope this is clear enough. :)

Upvotes: 2

Related Questions