Hi Team,
I aim to create a separate component dedicated to the toolbar within a Kendo Grid. To achieve this, I've created a `ToolbarComponent`. In the parent component's Kendo Grid, I'm utilizing an `ng-container` to include it within the 'kendoGridToolbarTemplate'. Nevertheless, the styles are not being applied as expected. Specifically, the `kendo-grid-spacer` in the toolbar component is not functioning as anticipated. Can you please provide me a sample
parent component
<kendo-grid
[kendoGridBinding]="eduList"
kendoGridSelectBy="id"
[pageSize]="pageSize"
[pageable]="{ type: 'numeric', position: 'top' }"
[sortable]="true"
[groupable]="false"
[reorderable]="true"
[resizable]="true"
filterable="menu"
[skip]="skip">
<ng-template kendoGridToolbarTemplate>
<ng-container [ngComponentOutlet]="toolbarComponent | async"></ng-container>
<!-- <div>a</div> <kendo-grid-spacer></kendo-grid-spacer> <div>b</div> -->
</ng-template>
<kendo-grid-column field="id" title="#" headerClass="t-text-primary" [width]="50" [filterable]="false">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<div class="customer-number">{{ rowIndex + 1 }}</div>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="" title="" [width]="50" [filterable]="false">
<ng-template kendoGridCellTemplate let-dataItem>
<!-- Template for the first column -->
<kendo-button fillMode="clear" icon="edit"> </kendo-button>
</ng-template>
</kendo-grid-column>
<kendo-grid-column
headerClass="t-text-primary"
field="Name"
title="Name"
[width]="200">
</kendo-grid-column>
<kendo-grid-column
headerClass="t-text-primary"
field="Age"
title="Age"
[width]="150">
</kendo-grid-column>
<kendo-grid-column
headerClass="t-text-primary"
field="Edu"
title="Education"
[width]="150">
</kendo-grid-column>
</div>
export class EduListComponent {
public toolbarComponent = import(
'../toolbar/toolbar.component'
).then(({ oolbarComponent }) => ToolbarComponent)
constructor(
private router: Router,
private cdr: ChangeDetectorRef
) {}
}
child component:-
<button kendoButton fillMode="outline" class="t-capitalize !t-border-[#ccc]">Create doc
</button>
<kendo-grid-spacer></kendo-grid-spacer>
<button kendoButton fillMode="outline" class="t-capitalize !t-border-[#ccc]">
Delete doc
</button>