Change all the apparence of a KendoGrid on specific component

[Pierre]

Hi, can we use directives or something similar to change the appearance of the Kendo-Grid like

<kendo-grid  NewApparenceDirective [kendoGridBinding]="data()">

I need to create a reusable, very lightweight grid.

Removing the background (set it transparent), removing some borders, changing text size, and so on.

What is the way to accomplish and reuse it on a lot of our components

 

Thanks

[Martin Bechev]

Hello Pierre,

To create a reusable, lightweight Kendo Grid with custom styling, you can use Angular directives to encapsulate your styling logic. Here's a concise approach to achieve this:

Step-by-Step Guide

1. Create a Custom Directive:

   • Develop a new directive that encapsulates the styling logic. This directive will apply specific styles to the Kendo Grid but since setStyles method is used, the customization options might be limited.

   import { Directive, ElementRef, Renderer2 } from '@angular/core';
   
   @Directive({
     selector: '[appNewAppearance]'
   })
   export class NewAppearanceDirective {
     constructor(private el: ElementRef, private renderer: Renderer2) {
       this.applyStyles();
     }
   
     private applyStyles() {
       // Remove borders
       this.renderer.setStyle(this.el.nativeElement, 'border', 'none');
     }
   }
   

2. Apply the Directive to Kendo Grid:

   • Use your custom directive in the template where the Kendo Grid is used.

   <kendo-grid appNewAppearance [kendoGridBinding]="data">
     <!-- Grid configuration -->
   </kendo-grid>
   

3. Reuse Across Components:

   • Since this is a directive, you can easily apply it to any Kendo Grid instance across your application by simply adding the appNewAppearance attribute.

Additional Tips

• Global Styles: For styles that should apply globally across all Kendo Grids, consider adding them to your global styles.scss file.
• Encapsulation: If you encounter issues with styles not applying due to Angular's view encapsulation, consider setting ViewEncapsulation to None in your component.

Regards,

Martin Bechev
Progress Telerik