Kendo-angular: Extending the kendo ui components angular 4

[deep348]

Hi,

I am trying to extend the kendo component to my local component and use my local extended component as a reusable component through out the project. So that all my project should have same look and feel of kendo component. How can i do this? i am not able to extend the kendo components because some of the components constructor arguments type contains private properties. Can i get any help on same.

plunker link -"http://plnkr.co/edit/wLTryEGH4O1jKRFQAMeN?p=preview"

Thanks

[tsvetomir]

What is the use case for extending the Grid?

We usually recommend directives as means of encapsulating new behaviors. In other cases it's more appropriate to compose the Grid into a custom component.

[karakule006]

Hi. I have same problem.

I want to extend kendogrid for add new property and events. Can you help me please?

[MaklaCof]

And I kendoDatePicker to resolve this problem.

[karakule006]

Hi. I extended kendo-grid as fs-grid. But I can't extend kendoGridToolbarTemplate,dataStateChange, edit, save command columns ex. I think ı must declare meta file at template property

`import { Injectable, Component, ElementRef, Renderer2, NgZone } from '@angular/core';
import { GridComponent } from '@progress/kendo-angular-grid';
import { BrowserSupportService } from "@progress/kendo-angular-grid/dist/es/browser-support.service";
import { SelectionService } from "@progress/kendo-angular-grid/dist/es/selection/selection.service";
import { GroupInfoService } from "@progress/kendo-angular-grid/dist/es/grouping/group-info.service";
import { GroupsService } from "@progress/kendo-angular-grid/dist/es/grouping/groups.service";
import { ChangeNotificationService } from "@progress/kendo-angular-grid/dist/es/change-notification.service";
import { DetailsService } from "@progress/kendo-angular-grid/dist/es/details.service";
import { EditService } from '@progress/kendo-angular-grid/dist/es/edit.service';
import { FilterService } from '@progress/kendo-angular-grid/dist/es/filtering/filter.service';
import { PDFService } from '@progress/kendo-angular-grid/dist/es/pdf/pdf.service';
import { ResponsiveService } from "@progress/kendo-angular-grid/dist/es/responsive.service";
import { ExcelService } from '@progress/kendo-angular-grid/dist/es/excel/excel.service';
import { ScrollSyncService } from "@progress/kendo-angular-grid/dist/es/scroll-sync.service";

@Component({
selector: 'fs-grid',
template: '',
providers: [BrowserSupportService, SelectionService, GroupInfoService, GroupsService, ChangeNotificationService, DetailsService, EditService, FilterService, PDFService, ResponsiveService, ExcelService, ScrollSyncService]
})

export class FsGridComponent extends GridComponent {
constructor(supportService: BrowserSupportService, selectionService: SelectionService, wrapper: ElementRef, groupInfoService: GroupInfoService, groupsService: GroupsService, changeNotification: ChangeNotificationService, detailsService: DetailsService, editService: EditService, filterService: FilterService, pdfService: PDFService, responsiveService: ResponsiveService, renderer: Renderer2, excelService: ExcelService, ngZone: NgZone, scrollSyncService: ScrollSyncService) {
super(supportService, selectionService, wrapper, groupInfoService, groupsService, changeNotification, detailsService, editService, filterService, pdfService, responsiveService, renderer, excelService, ngZone, scrollSyncService, false)
}
}
`

[tsvetomir]

@karakule006 why not use a directive to add new properties?

@MaklaCof a directive can be used to add a new property that returns the date as UTC.

@karakule006 depending on what you're trying to achieve you might implement fs-grid as a directive or as a component that contains a kendo-grid in its template. Re-declare customizable properties on the component and forward them to the kendo-grid.

Everyone, the Angular team doesn't seem to be too fond on inheritance. For a long time it was not supported at all and even now it has some limitations. Reading between the lines, component composition and directives seems to be the way to go.

[DieterDS1983]

I am also struggling with this.
We created a wrapper component for the kendo-grid with our default toolbar template and paging.
But we can't manage to pass our column definition to the kendo grid using the ng-content.

the template for our gridComponent looks like this (verry basic)

<kendo-grid>
    <!-- Our toolbar template ... -->
    <ng-content></ng-content>
    <!-- Our pager template ... -->
</kendo-grid>

and we use it like this

<gridComponent>
    <kendo-grid-column field="name">
        <ng-template kendoGridHeaderTemplate>
            <span fp-translate>Users.OrganisationGroup_Name</span>
        </ng-template>
        <ng-template kendoGridCellTemplate let-dataItem>
            <div (click)="..." class="hand">{{ dataItem.name }}</div>
        </ng-template>
    </kendo-grid-column>
    ...
</gridComponent>

We also tried to make a directive to insert the default pager template.
But this also failed.

Any idea how we can make this work?

[tsvetomir]

@DieterDS1983 the easiest way to approach this would be to define a component that goes into the template and reuse it across instances:

<kendo-grid>
    <ng-template kendoGridToolbarTemplate>
        <my-grid-toolbar></my-grid-toolbar>
    </ng-template>
    ...
<kendo-grid>

Projecting the columns using ng-content will not work as they must be accessible as view children by the Grid.

[DieterDS1983]

@tsvetomir I've tried this on the kendoPagerTemplate, but it's not working.

In our main component:

<kendo-grid fpGridBinding
                      ...>
    <kendo-grid-column field="name">
        <ng-template kendoGridHeaderTemplate>
            <span fp-translate>Users.OrganisationGroup_Name</span>
        </ng-template>
        <ng-template kendoGridCellTemplate let-dataItem>
            <div (click)="..." class="hand">{{ dataItem.name }}</div>
        </ng-template>
    </kendo-grid-column>

    <ng-template id="pagerTemplate" kendoPagerTemplate>
        <fp-pager-template></fp-pager-template>
    </ng-template>
</kendo-grid>

fp-pager-template is a simple component with just a template:

<kendo-pager-prev-buttons></kendo-pager-prev-buttons>
<kendo-pager-numeric-buttons [buttonCount]="pagerSettings.buttonCount"></kendo-pager-numeric-buttons>
<kendo-pager-input></kendo-pager-input>
<kendo-pager-next-buttons></kendo-pager-next-buttons>
<kendo-pager-page-sizes [pageSizes]="pagerSettings.pageSizes"></kendo-pager-page-sizes>
<kendo-pager-info></kendo-pager-info>

Currently we only see an empty texbox and empty dropdown in the pager.

[tsvetomir]

Seems to work in my tests, see plunkr.
I had to change the style on the component to display: flex to match the built-in pager.

:host { display: flex; }

[DieterDS1983]

It was the binding on pagerSettings that caused my error.
I've got it working now.

Thank you for your help.

[vidhyasagarreddy]

@tsvetomir how to use properties exposed by kendoPagerTemplate (like total, currentPage etc.) inside template ? Seems like it doesn't pass anything.