How to disable toolbar on page load

[Tony]

hello,

i want to disable grid toolbar items when i load a component or when component is ready,

i place a command this.grid.toolbarModule.enableItems(toolbars, isEnable); in ngAfterViewChecked

but some error has shown like bellow

please help me to solve this,

Regards,

Tony

[Shalini Maragathavel]

Hi Tony, 

Thanks for contacting Syncfusion support.

Based on your query we suspect that you want to disable the toolbar items at the initial rendering of the Grid. You can achieve your requirement by using the dataBound  event of Grid as demonstrated in the below code snippet. 

App.component.html

<button ejs-button (click)="btnClick1()">Enable </button> 

<ejs-grid #grid id='Grid' [dataSource]='data' (dataBound)="dataBound($event)" [editSettings]='editSettings' [toolbar]='toolbar'> 

<e-columns> 

</e-columns> 

              </ejs-grid>
------------------------------------------------------------------

App.component.ts 

 

export class AppComponent { 

 

  public ngOnInit(): void { 

    this.data = orderDataSource; 

    this.editSettings = { 

      allowEditing: true, 

      allowAdding: true, 

      allowDeleting: true, 

      mode: "Normal" 

    }; 

    this.toolbar = ["Add", "Edit", "Delete", "Update", "Cancel"]; 

    

 

  dataBound(args) { 

    this.grid.toolbarModule.enableItems( 

      ["Grid_add", "Grid_edit", "Grid_delete"], 

      false 

    ); 

  } 

  btnClick1(args) { 

    this.grid.toolbarModule.enableItems( 

      ["Grid_add", "Grid_edit", "Grid_delete"], 

      true 

    ); 

  } 

} 

 

In the above sample we have enabled the toolbar items using an external button click.

Please find the below sample for your reference. 

Sample : https://stackblitz.com/edit/angular-d5rmb3-j7i7ud?file=app.component.ts

Please get back to us if you need further assistance. 

Regards 

Shalini M.