ColumnChooser + Custom Toolbar

[PDev]

I have built in toolbar items and custom toolbar as shown below

this.toolbarOptions = ['Search','Edit', 'Delete', 'Update', 'Cancel','ExcelExport',{template: this.ddlProjTemplate},

{ text: 'Expand', tooltipText: 'Expand', prefixIcon: 'e-expand', id: 'show' },

{ text: 'Collapse', tooltipText: 'Collapse', prefixIcon: 'e-collapse', id: 'hide'}];

 

While buttons works just fine I am trying to add dropdown into toolbar because "ColumnChooser" is not working for me. Also, I have toolbarClick event. 

Don't know what is wrong but "ColumnChooser" is not working so i am forced to add custom dropdown into my toolbar for grid. what am i missing here

[Mohammed Farook J]

Hi PDev, 

 

Greetings from Syncfusion support. 

 

We have validated the provided code example and please share the following confirmation for further validating 

 

1. Do you want to render your own column chooser?
2. What you defined in your toolbar template
3. Share with us full code example of Grid render.
4. Share your sample if it is possible or modified the below sample with your issue.

 

 

We have created a sample inbuilt toolbar with customer items . Please find the sample for your reference. 

 

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

 

Please get back to us, if you have any queries. 

 

Regards, 

J Mohammed Farook 

[PDev]

1. Do you want to render your own column chooser? - No, I had to because ColumnChooser was not working
2. What you defined in your toolbar template 

@ViewChild('templateProjectColumns')

public ddlProjTemplate:any;

this.toolbarOptions = ['Add','Search','Edit', 'Delete', 'Update', 'Cancel','ColumnChooser','ExcelExport',{template: this.ddlProjTemplate},

{ text: 'Expand', tooltipText: 'Expand', prefixIcon: 'e-expand', id: 'show' },

{ text: 'Collapse', tooltipText: 'Collapse', prefixIcon: 'e-collapse', id: 'hide'}];

<ng-template #templateProjectColumns >

<ejs-dropdownlist id='drpProjectColumns' #drpProjectColumns [dataSource]='dsProjectColumns' [placeholder]='placeholder' ></ejs-dropdownlist>

</ng-template>

1. Share with us full code example of Grid render.
2. Share your sample if it is possible or modified the below sample with your issue. - Let me tr

[PDev]

I have updated the code here https://stackblitz.com/edit/angular-y9udmo-yqfo2y?file=app.component.ts 

[Balaji Sekar]

Hi Parth, 

Thanks for your update. 

Currently we are working your query with provided the information and we will update further details on November 23, 2021. 

Until then we appreciate your valuable patience. 

Regards, 

Balaji Sekar. 

[Balaji Sekar]

Hi Parth, 

 

Thanks for your valuable patience. 

 

We checked the ColumnChoooser rendering problem in our Grid’s toolbar module and we suspect that you do not defined showColumnChooser property. In below code example, we have bound the Dropdownlist component with ColumnChooser in toolbar section and we suggest you to define the showColumnChooser as true it will display ColumnChooser option on Toolbar. 

 

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" 

    showColumnChooser="true" 

    (actionComplete)="actionComplete($event)" 

  > 

    <e-columns> 

      .     .     .     .     

    </e-columns> 

  </ejs-grid> 

 

  <ng-template #template let-data> 

    <ejs-dropdownlist 

      id="games" 

      #sample 

      [dataSource]="sportsData" 

      (change)="onChange($event)" 

      [value]="value" 

      [fields]="fields" 

      [placeholder]="waterMark" 

      [popupHeight]="height" 

    ></ejs-dropdownlist> 

  </ng-template> 

 

[app.component.ts] 

  @ViewChild('template') 

  public toolbarTemplate: any; 

this.toolbar = ['ColumnChooser', { template: this.toolbarTemplate }]; 

 

Sample link:https://stackblitz.com/edit/angular-ekft7w-2apynd?file=app.component.ts 

 

Please get back to us, if you need further assistance. 

 

Regards, 

Balaji Sekar. 

[gugal]

Hi,

can we remove OrderID from the Column Chooser dropdown and columns are auto generating.

regards,

Pawan

[Pavithra Subramaniyam]

Hi Pawan,

From your query, we understand that you want to hide a particular column in the Column Chooser popup while the columns are auto-generated. You can achieve your requirement by setting the “column.showInColumnChooser” property inside the “dataBound” event. Please refer to the below code example, documentation, and sample link for more information.

[html]

<ejs-grid #grid [dataSource]="data" allowPaging="true" [pageSettings]="pageSettings"

 [editSettings]="editSettings"  [toolbar]="toolbar" showColumnChooser="true" (dataBound)="dataBound($event)">

</ejs-grid>

 

[ts]

dataBound(args) {

  this.gridInstancs.getColumnByField('OrderID').showInColumnChooser = false;

}

 

 

Documentation : https://ej2.syncfusion.com/angular/documentation/grid/columns/auto-generated-columns/#set-column-options-to-auto-generated-columns

Sample               : https://stackblitz.com/edit/angular-ekft7w-onhtgz?file=app.component.html,app.component.ts

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

Regards,

Pavithra S