Borderless grid

[Sasa]

What I want to achieve is to remove all borders and styling from grid. So far I've managed to remove grid's borders but cell and toolbar borders remain.

I've tried with this css

.k-grid,

.k-grid td,

.k-grid th,

.k-grid-toolbar-bottom

{

    border: none !important;

    border-width: 0 0 0 0 !important;

    background: none;

}

but it seems to only affect grid and not inner cells nor toolbar as you can see from picture below 

[Hetali]

Hi Sasa,

To remove all the borders and styling from the Kendo UI Grid, use the following CSS:

.k-grid th,
.k-grid-content td,
.k-grid-header-wrap,
.k-grid,
.k-grid tr.k-alt,
.k-grid-header, 
.k-grid-toolbar {
  border: none;
  background: none;
}

In this StackBlitz example, I have removed the borders and the background of the Kendo UI Grid. Please make sure to set the encapsulation to ViewEncapsulation.None to set the style locally.

Let me know if this solution helps or if I can further assist you.

Regards,
Hetali
Progress Telerik

[Sasa]

Hmm if I set to ViewEncapsulation.None then all grids in my app receive that style, and I don't want that, it's practically the same as if I put it in global styles.css file. But if I don't do that and put that style in compnent's css file then nothing happens, grid doesn't recognize it at all. 

[Hetali]

Hi Sasa,

To remove styling for a particular Grid, assign a class to the Grid and update the CSS. For example:

<kendo-grid class="noStyleGrid">
</kendo-grid>

.noStyleGrid.k-grid th,
.noStyleGrid.k-grid .k-grid-content td,
.noStyleGrid.k-grid .k-grid-header-wrap,
.noStyleGrid.k-grid,
.noStyleGrid.k-grid tr.k-alt,
.noStyleGrid.k-grid .k-grid-header,
.noStyleGrid.k-grid .k-grid-toolbar,
.noStyleGrid.k-grid .k-pager-wrap {
  border: none;
  background: none;
}

In this updated StackBlitz example, Grid with assigned class has no styling.

I hope this helps.

Regards,
Hetali
Progress Telerik

[Sasa]

Yup that did it, thanks