Show the toolbar on top and on bottom

[Fabio]

Hi,

How do i show the toolbar both above and below the grid?

[Pavithra Subramaniyam]

Hi Fabio, 

Thanks for contacting Syncfusion support. 

The Grit toolbar will be added at the top of the Grid by default. So, you can add the custom toolbar at the bottom of the Grid by creating a new Toolbar and append to the Grid element inside the “created” event. Please refer to the below code example, documentation and sample link for more information. 

@Component({ 

  selector: 'app-root', 

  template: `<ejs-grid #grid id="Normalgrid" [dataSource]="data" allowPaging="true" [pageSettings]="pageSettings" 

  [editSettings]="editSettings" [toolbar]="toolbar" (created)="created($event)"> 

  .   .   . 

</ejs-grid>` 

}) 

export class AppComponent { 

  .   .   . 

  created(args: any): void { 

    let toolbar = createElement('div', { id: 'toolbar_default' }); 

    this.grid.element.appendChild(toolbar); 

    let toolbarObj: Toolbar = new Toolbar({ 

      items: [ 

        { 

          prefixIcon: 'e-icons e-refresh', 

          tooltipText: 'Reload', 

        }, 

        { 

          prefixIcon: 'e-icons e-export', 

          tooltipText: 'Export', 

        }, 

      ], 

      clicked: (e) => { 

        alert(e.item.tooltipText + ' Clicked'); 

      }, 

    }); 

    //Render initialized Toolbar component 

    toolbarObj.appendTo('#toolbar_default'); 

  } 

} 

 

Documentation: https://ej2.syncfusion.com/documentation/api/grid#created 

Sample               : https://stackblitz.com/edit/angular-yd5xhm?file=app.component.html 

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

Regards, 

Pavithra S 

[Fabio]

I want that my custom toolbar be duplicate on the bottom.

This is my toolbar:

<ng-template #toolbarTemplate let-data>

<ejs-toolbar (clicked)='clickHandler($event)' #mainToolbar>

<e-items>

<e-item>

<ng-template #template>

<button ejs-dropdownbutton [items]='items'

content='Aggiungi'

iconCss='e-icons e-menu'

(beforeItemRender)='itemBeforeEvent($event)'

(select)='onNewRecorsSelect($event)'>

button>

ng-template>

e-item>

<e-item id='expandall' text='Show/Hide Measures' prefixIcon='e-expand'>e-item>

e-items>

ejs-toolbar>

ng-template>

How can I use the same toolbar of the html on my Created function?

Thanks

[Rajapandiyan Settu]

Hi Fabio, 

 

Thanks for your update. 

Based on your query, you want to render the toolbar on both top and bottom of the Grid. To render the toolbar in the bottom of the Grid, you need to manually render the EJS-Toolbar at bottom of Grid element. We have prepared a sample for your reference, you can get it from the below link. 

Sample: https://stackblitz.com/edit/angular-jwznmy?file=app.component.html 

[app.component.html] 

 

<div class="control-section"> 

  <ejs-grid #grid [dataSource]="data" height="350"> 

    ---- 

  </ejs-grid> 

  // render the toolbar component manually under the grid element 

  <ejs-toolbar (clicked)="clickHandler($event)"> 

    <e-items> 

      <e-item> 

        <ng-template #template> 

          <button 

            ejs-dropdownbutton 

            [items]="items" 

            content="Aggiungi" 

            iconCss="e-icons e-menu" 

            (beforeItemRender)="itemBeforeEvent($event)" 

            (select)="onNewRecorsSelect($event)" 

          ></button> 

        </ng-template> 

      </e-item> 

      <e-item 

        id="expandall_2" 

        text="Show/Hide Measures" 

        prefixIcon="e-expand" 

      ></e-item> 

    </e-items> 

  </ejs-toolbar> 

</div> 

 

Note: Use unique id for the toolbar elements. 

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

Regards, 

Rajapandiyan S