Add Custom Dropdown Item in Toolbox inside Grid Component

[Stefan]

Hello,

i recently started working with the Syncfusion Libraries and they are awesome! So far i got everything working with the Tutorials. But one thing I can't get working is to add a custom dropdown menu to a grid. 

My goal is to make a list with predefined templates for the column chooser. (Every item in the dropdown selects some specific elements with the columnChooser)

I found this tutorial here: https://stackblitz.com/edit/github-lushmu-e2kenk?file=src%2Fapp%2Fapp.component.html

But what i don't understand is how i combine it with my grid.

Edit:

I just found this thread (https://www.syncfusion.com/forums/151140/add-a-custom-dropdown-button-to-a-grid-toolbar) where some1 else tried to do exactly the same, but sadly it is not working for me. (I am using Electon + Angular 9)

The items do not show in my toolbar (when i hover over the toolbox i see that something is there but it does not render properly)

Currently it looks like this:

Currently my code looks like here:

//component.ts

public toolbarOptions: any;

@ViewChild('template1') 

public toolbarTemplate: any; 

ngOnInit(): void {

     ...

     ...

     this.toolbarOptions = ['Add', 'Edit', 'Delete', 'Search', {template: this.toolbarTemplate}];

}

component.html

<ng-template #template1 let-data>

        <ejs-checkbox label="Checkbox" [indeterminate]="true">ejs-checkbox>

ng-template>

<div class="col">

        <ejs-grid 

            #grid

            [dataSource]='data | async'

            ...

            [toolbar]='toolbarOptions'

            ...

        >

            <e-columns >

                <e-column [showInColumnChooser]='false' headerText='Image' width='100' textAlign='center'>

                    <ng-template #template let-data>

                        <div class="image">

                            <img src="http://localhost:8090/GetImage?path=/{{data.FilePath}}">

                        div>

                    ng-template>

                e-column>

                <e-column field='Filename' headerText='Filename' textAlign='center' width=130>e-column>

               ....

            e-columns>

        ejs-grid>

div>

Thanks for all your help in advance. Would be really cool if i could get it working.

Cheers

Stefan

[Rajapandiyan Settu]

Hi Stefan, 

  

Thanks for your patience. 

 

Query : I can't get working is to add a custom dropdown menu to a grid. where some1 else tried to do exactly the same, but sadly it is not working for me. (I am using Electon + Angular 9). The items do not show in my toolbar (when i hover over the toolbox i see that something is there but it does not render properly) 

 

From your query we could see that you need add a custom dropdown component in grid’s toolbar. For that you have created a sample by referring the old ticket sample. The reference sample had an angular version 7.*. but you are using version 9.*.  There is difference between old version and new version of angular/cli to get the ViewChild element. Please refer the below code. 

 

 

In angular -7 

@ViewChild('template2') 

    public ddTemplate: any;  // using this code in angular 9 returns undefined value so please use the below code 

 

to get the ViewChild 

above angular - 8 

@ViewChild('template2', { static: true }) 

  public ddTemplate: any; 

 

 

 

We suspect, this is the root cause of your reported behavior. We have prepared a sample with your requirement in angular 9. Please refer the below code example and sample for more information.  

 

 

App.component.html 

 

<ejs-grid #grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 

    <e-columns> 

        ------ 

    </e-columns> 

</ejs-grid> 

 

<ng-template #template2 let-data> 

  <ejs-dropdownlist id='ddlelement' #samples [dataSource]='dropdowndata' [placeholder]='placeholder' (change)="change($event)"></ejs-dropdownlist> 

</ng-template> 

 

App.component.ts 

 

export class AppComponent { 

--------- 

  @ViewChild('grid', { static: true }) public grid: GridComponent; 

//get the viewChild element 

  @ViewChild('template2', { static: true }) 

  public ddTemplate: any; 

  public ngOnInit(): void { 

// display the viewChild element in console 

    console.log(this.ddTemplate); 

      this.data = hierarchyOrderdata; 

      this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' }; 

      this.toolbar = ['Add', 'Edit', 'Delete','Search' ,  {template: this.ddTemplate}]; 

      this.orderidrules = { required: true, number: true }; 

      this.customeridrules = { required: true }; 

     this.freightrules =  { required: true }; 

      this.editparams = { params: { popupHeight: '300px' }}; 

      this.pageSettings = { pageCount: 5}; 

  } 

  change(args){ 

 

  } 

} 

 

 

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/angular9_customdropdown_in_grid_toolbar-346765145.zip 

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

Regards, 

Rajapandiyan S