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?

Unite UX direction is evolving!

Dear friends, after gaining plenty of great experience and feedback through working with you, our direction evolves to better serve your needs. Our mission to bridge the design to development gap remains unchanged. The way to solve it, though is new. Visit our webpage to meet the new Unite UX: The collaborative design to development UI components builder.

Explore the New Unite UX