I am attempting to standardize a lot of my grids for my application. They all follow the same general set up for filtering, sorting, etc. But each grid might have some specific customizations. Usually this is just customizing the command column to have different command (edit button, actions menu, etc), but this can also take the form of additional toolbar buttons and the like.

To do this, I am trying to make a component that uses Kendo Grid, has it set up the way I want to, but uses to project additional requirements.

However, it seems this is completely ignored by the grid, and nothing is ever rendered.

Example stackblitz which shows the issue: ponent.ts

The actual kendo grids that I'm working on are much more complicated, which is a large motivation for having a common component that I can use and inject additional stuff into as needed. Any help would be appreciated.

I am attempting to standardize a lot of my grids for my application. They all follow the same general set up for filtering, sorting, etc. But each grid might have some specific customizations. Usually this is just customizing the command column to have different command (edit button, actions menu, etc), but this can also take the form of additional toolbar buttons and the like.

To do this, I am trying to make a component that uses Kendo Grid, has it set up the way I want to, but uses to project additional requirements.

However, it seems this is completely ignored by the grid, and nothing is ever rendered.

Example stackblitz which shows the issue: https://stackblitz/edit/angular-zc4drs?file=src%2Fapp%2Fappponent.ts

The actual kendo grids that I'm working on are much more complicated, which is a large motivation for having a common component that I can use and inject additional stuff into as needed. Any help would be appreciated.

• angular
• kendo-ui
• kendo-grid
• kendo-ui-angular2
• angular-content-projection

Share Improve this question Follow asked Nov 19, 2024 at 15:53 blitzmannblitzmann 7,92555 gold badges2626 silver badges2929 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

When you have kendo directives, they must have a direct parent as the kendo-grid, here the problem is kendoGridAddCommand directive requires the kendoGridToolbarTemplate which requires kendo-grid component. So for elements that do not require the parent direct dependency.

The reason this happens might be accessing the parent element through DI.

constructor(private kendoGridToolbarTemplate: KendoGridToolbarTemplateDirective) {}

To solve this problem, just parameterize the values you want to pass in, this is only required for functionality that require the directives. The column template must be present in the grid, but the content inside the column template can be passed through ng-content or ng-container.

...
export class TestCommonGridComponent {
  showAddButton = input(true);
  showToolbar = input(true);
  addButtonLabel = input('Add new');
  ...

We convert the params needed as inputs, you can also aggregate them into an object.

After this, we can use @if to execute the customizations.

  <kendo-grid #grid [data]="data">
    @if(showToolbar()) {
        <ng-template kendoGridToolbarTemplate>
          @if(showAddButton()) {
                  <button kendoGridAddCommand>{{addButtonLabel()}}</button>
          }
        </ng-template>
    }
    ...

Full Code:

app.ts

import { Component } from '@angular/core';
import { TestCommonGridComponent } from './common-gridponent';

@Component({
  selector: 'my-app',
  standalone: true,
  template: `
    <app-common-grid [addButtonLabel]="'qwerty'">
    </app-common-grid>
    `,
  imports: [TestCommonGridComponent],
})
export class AppComponent {}

table.ts

import { CommonModule } from '@angular/common';
import {
  Component,
  ViewChild,
  ContentChild,
  TemplateRef,
  input,
} from '@angular/core';
import { GridComponent, GridModule } from '@progress/kendo-angular-grid';

@Component({
  selector: 'app-common-grid',
  standalone: true,
  imports: [CommonModule, GridModule],
  template: `<kendo-grid #grid [data]="data">
    @if(showToolbar()) {
        <ng-template kendoGridToolbarTemplate>
          @if(showAddButton()) {
                  <button kendoGridAddCommand>{{addButtonLabel()}}</button>
          }
        </ng-template>
    }
      <kendo-grid-column [field]="'col1'" [title]="'Col1'">
      </kendo-grid-column>
      <kendo-grid-column [field]="'col2'" [title]="'Col2'">
      </kendo-grid-column>
  </kendo-grid>`,
  styles: [],
})
export class TestCommonGridComponent {
  showAddButton = input(true);
  showToolbar = input(true);
  addButtonLabel = input('Add new');
  @ContentChild('toolbarTemplate') toolbarTemplate: TemplateRef<any>;
  @ViewChild('grid') grid?: GridComponent;

  data = [
    {
      col1: 'Test1',
      col2: 'Test2',
    },
  ];
}

Stackblitz Demo