0

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;

}
Laczkó Örs
  • 1,082
  • 1
  • 18
  • 38
Ktall32
  • 29
  • 2
  • 7

1 Answers1

1

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. :)

Jojofoulk
  • 2,127
  • 1
  • 7
  • 25