1. Home
  2. Forum
  3. React - EJ 2
  4. Customise grid built-in toolbar items

Customise grid built-in toolbar items

Hi,

I'm using the Search built-in toolbar item in Grid. How can I customise the "placeholder" text of the Search item? e.g. show "Find a item" instead of "Search".

Thanks,

Chi

9 Replies
RS Renjith Singh Rajendran Syncfusion Team August 15, 2018 04:16 PM UTC

Hi Chi, 

Thanks for contacting Syncfusion support. 

We suggest you to use the “created” event of Grid. In the created event we will modify the placeholder for the search toolbar item. Please find the code example below, 

 
    created(args){ 
      document.getElementsByClassName("e-search")[0].getElementsByClassName("e-input")[0].setAttribute("placeholder","Find a item") 
    } 
    render() { 
        return (<div className='control-pane'> 
                <GridComponent dataSource={categoryData} toolbar={this.toolbarOptions} created={this.created.bind(this)}> 
                    ... 
                    <Inject services={[Toolbar, Page]}/> 
                </GridComponent> 
            </div>); 
    } 
 

We have also prepared a sample for your reference, 

 
Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


CD Chi Duc August 15, 2018 11:48 PM UTC

Hi Renjith Singh Rajendran,

It works! Thanks for the support.

Chi

MS Mani Sankar Durai Syncfusion Team August 16, 2018 03:49 AM UTC

Hi Chi, 

We are happy to hear that your problem has been solved.  

Please let us know if you need further assistance.  

Regards, 
Manisankar Durai. 


CD Chi Duc August 19, 2018 12:08 PM UTC

Hi,

Thanks for your support! 

I have one more question if possible: How to add a dropdownlist into a grid toolbar?

Thanks and best regards,

Chi

VA Venkatesh Ayothi Raman Syncfusion Team August 20, 2018 08:53 AM UTC

Hi Chi, 

Thanks for the update. 

Query : I have one more question if possible: How to add a dropdownlist into a grid toolbar? 
 
We have analyzed your query and it is possible to add a dropdownlist in the grid toolbar. To achieve your requirement, we suggest you to use toolbar template property of the grid. In the template, we have created a dropdownlist with the required properties. Please refer to the below sample and documentation for your reference. 

Code Example: 

[.tsx] 
... 
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns'; 
... 
class App extends React.Component<{}, {}>{ 
    public gridInstance: any; 
    public toolbarOptions: ToolbarItems[] = [{ template: this.template}]; 
 
    public template(props) { 
      return (<DropDownListComponent id="dropdown" dataSource={data} placeholder="Select" fields= { { text: 'OrderID', value: 'OrderID' } }/>); 
    } 
    render() {  
        return <GridComponent dataSource={data} toolbar={this.toolbarOptions} ref={g => this.gridInstance = g} height={240}> 
            <ColumnsDirective> 
... 
            </ColumnsDirective> 
            <Inject services={[ Toolbar ]} /> 
        </GridComponent> 
    } 
}; 
ReactDOM.render(<App />, document.getElementById('grid')); 
 


Please get back to us for further assistance. 

Regards, 
Venkatesh Ayothiraman. 


CD Chi Duc August 21, 2018 01:51 AM UTC

Thank you for your feedback. But I'm not able to get it work. Below is my sample code in jsx (actually I want to insert a DropdownButtonComponent which I thought it would be similar). Please advise if I did something wrong.

toolbarDropdownMenuTemplate(props) {
     const toolbarDropdownMenuItems = [
          {
               text: 'Edit',
               iconCss: 'e-icons e-edit'
          },
          {
               text: 'Delete',
               iconCss: 'e-icons e-delete'
          },
          {
               text: 'Mark As Read',
               iconCss: 'e-icons e-read'
          }];

     return (
               <DropDownButtonComponent
                    items={toolbarDropdownMenuItems}
                    iconCss='e-icons e-message'
               > Message
               </DropDownButtonComponent>);
    }

getToolbarOptions() {
        return [
          { text: 'Add', prefixIcon: 'e-add', id: 'add' },
  { template: this.toolbarDropdownMenuTemplate },
          'Search'
        ];
      }
    }

   render() {
return (
     <GridComponent
               dataSource={data}
               toolbar={this.getToolbarOptions()}
               ref={grid => this.gridInstance = grid}
               height='420'
            >
               <ColumnsDirective>
                    <ColumnDirective type='checkbox' width='85' />
                    <ColumnDirective field='id' visible={false} isPrimaryKey />
               </ColumnsDirective>
               <Inject services={[Toolbar]} />
          </GridComponent>);
}






VA Venkatesh Ayothi Raman Syncfusion Team August 21, 2018 05:35 AM UTC

Hi Chi, 
 
 
Thanks for the update. 

We have checked your query and based on your code example we have prepared a simple using stackblitz which will be available from the below link 

In this sample we have rendered a DropDownButton inside the grid toolbar using toolbar template property of grid.  

Please refer the code example 

export class Default extends SampleBase { 
  constructor() { 
        super(...arguments); 
        this.toolbarOptions = [ { text: 'Add', prefixIcon: 'e-add', id: 'add' }, 
                                                 { template: this.toolbarDropdownMenuTemplate } 
                                           ]; 
    } 
   toolbarDropdownMenuTemplate(props) { 
     const toolbarDropdownMenuItems = [ 
... 

     return (                        //render the DropDownButtonComponent on grid toolbar 
               <DropDownButtonComponent 
                    items={toolbarDropdownMenuItems} 
                    iconCss='e-icons e-message' 
               > Message 
               </DropDownButtonComponent>); 
    } 

    render() { 
       return <GridComponent dataSource={orderDetails} toolbar={this.toolbarOptions} ref={g => this.gridInstance = g} height={240}> 
            <ColumnsDirective> 
                <ColumnDirective field='OrderID' width='100' textAlign="Right"></ColumnDirective> 
... 
            <Inject services={[ Toolbar ]} /> 
        </GridComponent> 
    } 
} 

render(<Default />, document.getElementById('sample')); 

Note: Please confirm whether you are import the Dropdownbutton component in your app. 
 
If you still face the same issue, then could you please provide following details? 
  1. Share the issue screenshot and details.
  2. Replication procedure of the issue.
  3. Modified the given sample as issue reproducible.
 
Please let us know if you need further assistance.  

Regards, 
Venkatesh Ayothiraman. 


CD Chi Duc August 21, 2018 07:19 AM UTC

Hi Venkatesh,

Thanks for the feedback. 

I did import the DropdownButtonComponent but somehow it still doesn't work when applying to my code. It shows no error, it just renders an "empty" template. It's quite strange that when I return a piece of HTML code in the toolbarDropdownMenuTemplate function instead of a React component (in this case DropdownButtonComponent), the toolbar template item is rendered with the HTML code.

toolbarDropdownMenuTemplate(props) {
     return <div>Menu here</div>;
}


PS Pavithra Subramaniyam Syncfusion Team August 22, 2018 10:11 AM UTC

Hi Chi, 

We have checked your query and We have tried to reproduce the issue at our end but it is unsuccessful. Please refer to the below sample link and screenshot. 


[toolbar_template] 
 

Could you please share the below details that will be helpful for us to provide a better solution as early as possible. 

  1. Share the Essential JavaScript 2 Package version you are using.
  2. Share you grid code sample
  3. Please reproduce the issue in the above sample if possible

Regards, 
Pavithra S. 


Loader.
Up arrow icon