Custom Code

The Studio provides options for customizing some of the exposed events after the generation of the web project.

For example, you can use the exposed component events to implement custom functions and customize the event-handling scenarios.

The following example demonstrates how to customize the code in Angular.

/////////////////////////////////////////////////////
// Add your custom code here.
// This file and any changes you make to it are preserved every time the app is generated.
/////////////////////////////////////////////////////
import { Inject, Injector } from '@angular/core';
import { SelectionEvent, ColumnComponent } from '@progress/kendo-angular-grid';
import { GridDemoBaseComponent } from './grid-demo.base.component';

export class GridDemoComponent extends GridDemoBaseComponent {
    constructor(@Inject(Injector) injector: Injector) {
        super(injector);

        this.$config.title = 'Grid Changed Title';
    }

    // Fires when component is initialized and input properties are set.
    public onInit(): void {

    }
    // Fires when component's views and child views are initialized.
    public onShow(): void {
    }

    // Fires just before Angular destroys the component. Unsubscribe Observables and detach event handlers to avoid memory leaks.
    public onHide(): void {
    }

    public onRowSelect(e: SelectionEvent): void {
        console.log(`Selected CustomerID: ${e.selectedRows[0].dataItem.CustomerID}`);
    }

    public togglePaging(enablePaging: boolean): void {
        this.grid.pageable = enablePaging;
        if (!enablePaging) {
            this.$dataServicesState.Customers.take = undefined;
        } else {
            this.$dataServicesState.Customers.take = 5;
        }

        this.read('Customers');
    }

    public toggleColumnsVisibility(hiddenColumns: Array<string>) {
        this.grid.columns.forEach(c => {
            c.hidden = hiddenColumns.indexOf((<ColumnComponent>c).field) > -1;
        });
    }
}

The following example demonstrates how to customize the code in React.

/////////////////////////////////////////////////////
// Add your custom code here.
// This file and any changes you make to it are preserved every time the app is generated.
/////////////////////////////////////////////////////
import React from 'react';
import { GridDemoBase } from './GridDemoBase';
import { GridDemoComponentsState } from './GridDemoContainer';

const GridDemo: React.FC<any> = props => {
  const newComponentsState = {
    // You can extend the component and dataSource properties here.
  } as GridDemoComponentsState;

  return (
    <GridDemoBase
      {...props}
      componentsState={newComponentsState}
      //  You can add events here.
    />
  );
};

export { GridDemo };
In this article
Not finding the help you need?