Customised grid toolbar icons

[Chi Duc]

Hi,

I want to customise toolbar for the ej2-react-grid with icon but I don't know where I can find the list of available icon that can be used. Please help.

Thanks,

Chi

[Hariharan J V]

Hi Chi, 

 

Thanks for contacting Syncfusion support. 

 

Query: I want to customise toolbar for the ej2-react-grid with icon but I don't know where I can find the list of available icon that can be used. Please help. 

We have validated your query and created a simple sample based on your requirement. Please find the below code example for your reference.  

[code example][index.tsx] 

import * as React from 'react'; 

import * as ReactDOM from 'react-dom'; 

import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; 

import { GridComponent, Inject, ColumnsDirective, Toolbar, ToolbarItems, ColumnDirective, Filter } from '@syncfusion/ej2-react-grids'; 

import { data, employeeData } from './datasource'; 

 

class App extends React.Component<{}, {}>{ 

public toolbarOptions: ToolbarItems[] = [{ text: 'Expand All', tooltipText: 'Expand All', prefixIcon: 'e-expand', id: 'expandall' }];  // prefixIcon accepts class name for icon 

public editOptions: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true }; 

private grid: Grid; 

  public dataBound(){ 

      Object.assign((this.grid.filterModule).filterOperators, {startsWith: 'contains'}); 

  } 

    render(){ 

        return (<div> 

        <GridComponent  dataSource={employeeData} editSettings={this.editOptions} toolbar={this.toolbarOptions} gridLines='Both' allowFiltering={true} height={280} ref={g => this.grid = g} dataBound= { this.dataBound.bind(this)}> 

                  <ColumnsDirective> 

                  <ColumnDirective field='FirstName' headerText='First Name' width='150'></ColumnDirective> 

                    <ColumnDirective field='LastName' headerText='Last Name' width='120' textAlign="Right"></ColumnDirective> 

                    <ColumnDirective field='Title' headerText='Title' width='150'></ColumnDirective> 

                </ColumnsDirective> 

                <Inject services={[Filter, Toolbar ]} /> 

            </GridComponent></div>) 

        } 

}; 

ReactDOM.render(<App />, document.getElementById('grid')); 

<style> 

        #loader { 

            color: #008cff; 

            height: 40px; 

            left: 45%; 

            position: absolute; 

            top: 45%; 

            width: 30%; 

        } 

        .e-expand::before { 

            content: '\e82e';      //put icon id here which will be available on resource file, attached this 

        } 

 

        .e-collapse::before { 

            content: '\e834'; 

        } 

    </style> 

Please find the sample in below link. 

Sample Link: https://next.plnkr.co/edit/HxGAeCVBZ88yNFAV 

Help Documentation: https://ej2.syncfusion.com/react/documentation/grid/toolbar.html#custom-toolbar-items 

We have already created documentation task for list of ej2 icons. This will be available in our Essential Studio Volume 3 release. We have attached the available icon in EJ2 as local copy. To view the list of available icons, open the demo.html. It will show all the available icons in EJ2-grid. You can use icon id to use in your toolbar.  

 

And you can find the list of available icons in below link. 

Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/icon_list-2065153512 

Please get back to us if you need further assistance on this. 

Regards, 

Hariharan 

[Chi Duc]

Great! Thanks for your support!

I have another enquiry regarding the Command Column of grid. How can I customise the tooltip of buttons in the Command Column?

Thanks and best regards,

Chi

[Venkatesh Ayothi Raman]

Hi Chi, 

 

Query: How can I customise the tooltip of buttons in the Command Column? 

 

We have validated your query and you can achieve your requirement by using the below method. We have achieved your requirement by using rowDataBound event. Please find the below code example for your reference. 

 

[code example] 

 

public editOptions: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true }; 

private grid: Grid; 

public rowDataBound(e) { 

   var command = e.row.querySelector('.e-btn'); 

   if(command){ 

     command.title = "Custom Delete"              // customize the tooltip text 

   } 

} 

  public dataBound(){ 

      Object.assign((this.grid.filterModule).filterOperators, {startsWith: 'contains'}); 

  } 

    public commands: any = [ 

  { type: 'Delete', buttonOption: { iconCss: 'e-icons e-delete', cssClass: 'e-flat' } }]; 

    render(){ 

        return (<div> 

        <GridComponent  dataSource={employeeData} editSettings={this.editOptions} toolbar={this.toolbarOptions} gridLines='Both' allowFiltering={true} height={280} ref={g => this.grid = g} dataBound= { this.dataBound.bind(this)} rowDataBound={this.rowDataBound}> 

                  <ColumnsDirective> 

                   <ColumnDirective field='EmployeeID' headerText='ID' width='80' textAlign='Right' isPrimaryKey={true} validationRules={this.validationRule}></ColumnDirective> 

                  <ColumnDirective field='FirstName' headerText='First Name' width='100'></ColumnDirective> 

                     <ColumnDirective headerText='Manage Records' width='50' commands={this.commands}></ColumnDirective> 

                </ColumnsDirective> 

                <Inject services={[Filter, Toolbar,Edit,CommandColumn ]} /> 

            </GridComponent></div>) 

        } 

}; 

ReactDOM.render(<App />, document.getElementById('grid')); 

 

 

We have prepared a simple sample based on your requirement. Please find the sample in below link. 

 

Sample link: https://next.plnkr.co/edit/HytRErseW384bRFe 

Please get back to us if you need further assistance on this. 

Regards, 

Venkatesh Ayothiraman. 

[Chi Duc]

Cool! Thanks for your support.

[Venkatesh Ayothi Raman]

 

Hi Chi, 

 

Thanks for the feedback. 

 

We are very happy to hear that your requirement is achieved. Please let us know if you have any further assistance on this. 

 

 

Regards, 

Venkatesh Ayothiraman.