Kendo Angular Grid Content projection checkbox selection, toolbar, and columns.

[Jason]

i want to customize kendo-grid by own component . 

i think its only taking columns and i need help to get other things except columns like kendo-grid-checkbox-column, kendo-grid-command-column
https://www.telerik.com/forums/kendo-angular-editor-content-projection-for-custom-toolbar
this comment saying "Content projection is not typically supported in the Grid" so i have problem with it.

i'm using like https://stackblitz.com/edit/angular-7qonm9-7qusje this example.

app-grid-wrapper component

<kendo-grid

[data]="data"

[height]="height"

[loading]="loading"

[resizable]="resizable"

[selectable]="selectable"

[kendoGridSelectBy]="'selectionKeyBy'"

[selectedKeys]="selectedKeys"

(edit)="editHandler($event)"

(remove)="removeHandler($event)"

(cancel)="cancelHandler($event)"

(save)="saveHandler($event)"

(add)="addHandler($event)"

>

<ng-content></ng-content>

<kendo-grid-excel fileName="UserList.xlsx"> </kendo-grid-excel>

</kendo-grid>

 

and using like this other components

<app-grid-wrapper

#grid

[data]="dataService.view$ | async"

[loading]="dataService.pending"

[selectable]="{ mode: 'single' }"

[(selectedKeys)]="selectedItems"

(edit)="editHandler($event)"

(remove)="removeHandler($event)"

(cancel)="cancelHandler($event)"

(save)="saveHandler($event)"

(add)="addHandler($event)"

[resizable]="true"

nesAutoHeight

>

<kendo-grid-checkbox-column [width]="40" showSelectAll="true"></kendo-grid-checkbox-column>

<kendo-grid-column nesField="licenseCode">

<ng-template kendoGridEditTemplate let-column="column" let-formGroup="formGroup" let-isNew="isNew">

<input nesFormControl [readonly]="!isNew" [formControl]="formGroup.get('licenseCode')" />

</ng-template>

</kendo-grid-column>

<kendo-grid-column nesField="name">

<ng-template kendoGridCellTemplate let-dataItem>

<div class="">

<a style="color: #4e61ec" href="javascript:;" (click)="moreHandler(dataItem)"> {{dataItem.name}} </a>

</div>

</ng-template>

</kendo-grid-column>

<kendo-grid-column nesField="name2"></kendo-grid-column>

<kendo-grid-column nesField="licenseType">

<ng-template kendoGridEditTemplate let-column="column" let-formGroup="formGroup" let-isNew="isNew">

<kendo-dropdownlist

[formControl]="formGroup.get(column.field)"

[valuePrimitive]="true"

[dictCode]="'LCNS001'"

></kendo-dropdownlist>

</ng-template>

<ng-template kendoGridCellTemplate let-dataItem>

{{ dataItem.licenseType }} - {{ dataItem.licenseTypeName }}

</ng-template>

</kendo-grid-column>

<kendo-grid-column nesField="status">

<ng-template kendoGridEditTemplate let-column="column" let-formGroup="formGroup" let-isNew="isNew">

<kendo-dropdownlist

[formControl]="formGroup.get(column.field)"

[valuePrimitive]="true"

[dictCode]="'LCNS002'"

></kendo-dropdownlist>

</ng-template>

<ng-template kendoGridCellTemplate let-dataItem> {{ dataItem.statusName }} </ng-template>

</kendo-grid-column>

<kendo-grid-column nesField="sysNo">

<ng-template kendoGridEditTemplate let-column="column" let-formGroup="formGroup" let-isNew="isNew">

<kendo-dropdownlist

[formControl]="formGroup.get(column.field)"

[valuePrimitive]="true"

[dictCode]="'LCNS008'"

></kendo-dropdownlist>

</ng-template>

</kendo-grid-column>

<!-- <kendo-grid-excel fileName="licenseList.xlsx"></kendo-grid-excel>

<kendo-grid-pdf fileName="LicenseList.pdf"></kendo-grid-pdf> -->

<kendo-grid-command-column title="" [width]="220">

<ng-template kendoGridCellTemplate let-formGroup="formGroup">

<button kendoGridEditCommand class="k-secondary">

<i class="nes-i-edit"></i>

</button>

<button kendoGridRemoveCommand class="k-secondary">

<i class="nes-i-delete"></i>

</button>

<button kendoGridSaveCommand [disabled]="formGroup?.invalid">

<i class="nes-i-save"></i>

</button>

<button kendoGridCancelCommand><i class="nes-i-cancel"></i></button>

</ng-template>

</kendo-grid-command-column>

</app-grid-wrapper>

 but first thing is other than kendo-grid-column are not working. 

so getting columns like this

@ContentChildren(ColumnComponent) private columns: QueryList<ColumnComponent>;

ngAfterViewInit() {

this.grid.columns.reset(this.columns.toArray());
}

 

[Yanmario]

Hi Jason,

In recent years, I was responsible for handling such demo implementations after consulting with one of our developers. The example grew as people requested more functionality or additional elements. However, content projection into the Grid is not supported, and it can add extra complexity to the application, potentially causing it to break in the future. For this reason, I recommend wrapping the Grid component instead of using content projection.

If you insist on using the content projection, then you would need to provide the needed information for the Grid to know that an element has been added. In your specific case, it seems that the checkbox column is not being added and that can be part of your columns list as demonstrated in the updated example:

https://stackblitz.com/edit/angular-7qonm9-waqx4e1l

The main changes can be viewed in the grid.wrapper.component where I've added the needed services in the provider's array and included the CheckboxColumnComponent into the columns array. This allows us to render the checkboxes and allow the selection to work. 

I also did some research, and most Angular libraries that feature a grid do not support content projection, as it is complex for a component to handle and not commonly used with third-party libraries. In addition, it seems that the approach that is suggested by us is also similar to the following StackOverflow thread regarding the Angular Material Table:

https://stackoverflow.com/questions/53335929/content-projection-inside-angular-material-table

I do hope the updated application provides additional content and steers you in the right direction.

Regards,
Yanmario
Progress Telerik