We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Adding custom menu item to existing list

I am looking at this example:
https://ej2.syncfusion.com/15.4.23/documentation/grid/columns.html?lang=typescript#custom-column-menu-item
It looksl ike it overwrites teh defaults and adds one new item.
How do I keep the defaults and add a new item to end?

1 Reply

PS Pavithra Subramaniyam Syncfusion Team August 20, 2019 07:35 AM UTC

Hi Peter, 
 
Thanks for contacting Syncfusion support. 
 
You can achieve your requirement by adding all the default column menu items as shown in the below example with custom items. So that all the default column menu items will be available to the grid with custom ones and only for the custom menu items we have to write the handler function using columnMenuClick event. Please refer to the below code example, documentation link and sample link for your reference, 
 
[index.js] 
export class ColumnMenuSample extends SampleBase { 
  constructor() { 
    super(...arguments); 
    this.groupOptions = { showGroupedColumn: true }; 
    this.filterSettings = { type: "CheckBox" }; 
    this.columnMenuItems = ['AutoFit', 'AutoFitAll', 'SortAscending', 'SortDescending', 'Group', 'Ungroup',’ColumnChooser’,’Filter’, { text: 'Reset', id: 'reset' }]; // default items with custom items 
  } 
 
  columnMenuClick(args) { 
    if (args.item.id === 'reset') { 
      console.log("To do here"); 
    } 
  } 
  render() { 
    return (<div className='control-pane'> 
      <div className='control-section'> 
        <GridComponent id='gridcomp' dataSource={orderDetails} allowPaging={true} allowGrouping={true} allowSorting={true} allowFiltering={true} showColumnMenu={true} groupSettings={this.groupOptions} filterSettings={this.filterSettings} columnMenuItems={this.columnMenuItems} columnMenuClick={this.columnMenuClick.bind(this)}> 
          <ColumnsDirective> 
         .    .   . 
          </ColumnsDirective> 
          <Inject services={[Resize, Group, Sort, ColumnMenu, Filter, Page]} /> 
        </GridComponent> 
      </div> 
    </div>); 
  } 
} 
 
render(<ColumnMenuSample />, document.getElementById('sample')); 
 
 
 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 


Loader.
Live Chat Icon For mobile
Up arrow icon