Column Chooser in Angular Tree Grid

[Walter Cook]

I have columnChooser working on Grids but can’t get it to open on TreeGrid. I’m wondering if it works a bit differently. The TreeGrid works, drags and drops, filters, sorts.

Here’s what I’ve got:

package.json

"@syncfusion/ej2-angular-treegrid": "^19.3.43",

.ts

import { TreeGridComponent, RowDDService, SelectionService, EditService, SortService, 

  FilterService, Filter, ColumnChooserService } from '@syncfusion/ej2-angular-treegrid';

import { ToolbarItems, ToolbarService, ExcelExportService } from '@syncfusion/ej2-angular-treegrid';

providers: [ToolbarService, ExcelExportService, RowDDService, 

    SelectionService, EditService, SortService, FilterService, ColumnChooserService],

@ViewChild('TreeGrid')

public TreeGrid: any;  //TreeGridComponent here doesn’t help. ‘Any’ supports my Drag and Drop code.

dataBoundTreeGrid() {

  Object.assign((this.TreeGrid.grid.filterModule as any).filterOperators, { startsWith: 'contains' });

  }

I even threw this in:

toolbarClick(args: ClickEventArgs): void {

  console.log(args.item.id);

  switch (args.item.id) {

  case 'TreeGrid_gridcontrol_columnchooser':

    this.TreeGrid.openColumnChooser();

  break;

.html

<ejs-treegrid #TreeGrid id='TreeGrid' [dataSource]='requirements' 

       [allowRowDragAndDrop]='true'

       (dataBound)='dataBoundTreeGrid()'

       [showColumnChooser]= 'true'

       [toolbar]='toolbarOptions'

       (toolbarClick)='toolbarClick($event)'

       [selectionSettings]='selectionOptions'

       [treeColumnIndex]='0' childMapping='subitems'width = '1400'  height = '715' 

         [allowFiltering]='true'    

       allowTextWrap='true' [textWrapSettings]='wrapSettings' 

       enableCollapseAll='true'   [allowExcelExport]='true'

       [allowFiltering]='true'

       [allowSorting]='true' 

       (actionBegin)='onActionBegin($event)' 

       (actionComplete)="Complete($event)"

       

       (rowDrop)='rowDrop($event)'

       

       > 

I'm not seeing what I haven't turned on.

Thanks for the assist.

[Jagadesh Ram Raajkumar]

Hi Walter, 

  

Greetings from Syncfusion Support. 

  

Based on your requirement we have prepared a sample with the package version 19.3.43 of ej2-angular-treegrid and we can open the column chooser just fine. In your code, please confirm with us whether you have defined the toolbarOptions variable. Please refer to the below code to use the column chooser feature.

Code snippet: 

[app.component.html] 

  

<div class="control-section">  <ejs-treegrid [dataSource]='data' allowPaging='true' childMapping='subtasks' height='350' [treeColumnIndex]='1' [showColumnChooser]='true' [toolbar]="toolbar"  [pageSettings]='pageSettings'>      <e-columns>       ......      </e-columns>  </ejs-treegrid></div>

[app.component.ts] 

import { Component, OnInit } from '@angular/core'; 

import { sampleData } from './jsontreegriddata'; 

import { TreeGridComponent, PageService, ColumnChooserService, ToolbarService} from '@syncfusion/ej2-angular-treegrid'; 

import {PageSettingsModel } from '@syncfusion/ej2-angular-grids'; 

  

  

@Component({ 

    selector: 'app-root', 

    templateUrl: 'app.component.html', 

    providers: [ PageService, ColumnChooserService, ToolbarService ] 

  

}) 

export class AppComponent implements OnInit { 

    public data: Object[] = []; 

    public pageSettings: PageSettingsModel; 

    public toolbar: string[]; 

  

  

    ngOnInit(): void { 

        this.data = sampleData; 

        this.pageSettings = { pageSize: 10 }; 

        this.toolbar = ['ColumnChooser']; 

    } 

} 

The sample can be downloaded from the below link,
https://www.syncfusion.com/downloads/support/forum/169394/ze/Column_Chooser_Treegrid-1167372925

Please refer to the below documentation,
https://ej2.syncfusion.com/angular/demos/#/material/treegrid/columnchooser
https://ej2.syncfusion.com/documentation/treegrid/columns/#column-chooser

Kindly get back to us for further assistance.

 

Regards,
Jagadesh Ram 

[Walter Cook]

I have defined it:

this.toolbarOptions = ['ExcelExport', 'ColumnChooser'];

It works in other places. I must have some sort of conflict somewhere.

Thanks.

[Jagadesh Ram Raajkumar]

Hi Walter, 

Thanks for the update. 

We have prepared a sample based on your given code and we couldn’t reproduce the error you faced. Kindly share with us the following details so that we could provide you assistance quickly. 

1. Complete treegrid code including events. 

2. If possible please share with us an issue reproducing sample or reproduce the error faced in the sample shared. 

Sample: https://www.syncfusion.com/downloads/support/forum/169394/ze/column_chooser_sample562234511 

Regards,
Jagadesh Ram 

[Walter Cook]

I'm not even sure what fixed it. I stripped it down and rebuilt it.

Magically it works now. Thanks for the support.

[Jagadesh Ram Raajkumar]

Hi Walter, 

Thanks for the update. 

We are glad that your query has been resolved.

Kindly get back to us if you need further assistance. 

Regards,
Jagadesh Ram