Master and detail grid styling

[william]

Hello  all , 

We are working on grid component with detail temlate as shown on this exemple.

https://stackblitz.com/edit/angular-3evzvg?file=app/app.component.ts

 

The issue is that the client is telling us that it looks like a table in table and we did not find how to edit style in detail template.

Is it possible ?  We need to apply style only on the detail template so could you provide us an exmple of stylish grid with detail template please ? 

 

Thanks in advance.

Regards

 

 

 

 

[Martin Bechev]

Hi William,

Thank you for the provide StackBlitz.

The Detail Grid can be customized as a regular Grid, by applying custom CSS styles in the file where the detail grid is defined, in this case the category-details.component.ts file. Please check the updated example:

https://stackblitz.com/edit/angular-3evzvg-jemxfm?file=app%2Fcategory-details.component.ts

I hope this helps.

Regards,
Martin
Progress Telerik

[william]

Hi Martin , 

Thanks for the answer!

Could you provide the class to remove borders from detail template please ?

Thanks in advance.

Regards

 

 

 

[william]

In Additon : 

I have tried to add some more CSS to hide header and remove inner borders but no visible result :(

I tried to add : 

category-details .k-grid tr td {
    border: none;
},
category-details .k-grid-header{
      display: none;
}

 

Could you help please ? :)

 

Thanks in advance.

 

Regards

 

 

 

[Martin Bechev]

Hi William,

A common pitfall is to forget to set Angular's ViewEncapsulation to None as otherwise the custom styles will not be applied unless they are provided at a global level:

encapsulation: ViewEncapsulation.None,
  styles: [
    `
      category-details .k-grid-header {
        display: none;
      }
      category-details .k-grid tr td {
        border: none;
      }
    `
  ]

https://stackblitz.com/edit/angular-3evzvg-3mc2ns?file=app%2Fcategory-details.component.ts

Let me know if I can assist any further or if I am missing something.

Regards,
Martin
Progress Telerik

[william]

Hi Martin , 

 

Thanks for the answer !! 

That's all for me , you can close the ticket , you answered all for me :)

Thanks and have a good day.