Customize list of columns / column-labels used in column-chooser

Progress® Kendo UI® for Angular Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 18 Feb 2020 11:46 by ADMIN

Jochen

Created on: 11 Feb 2020 11:31

Category: Grid

Type: Feature Request

Customize list of columns / column-labels used in column-chooser

Hi there

I am wondering if there is a way to customize the column labels / titles used in the column-chooser component.

I'm using the grid component with columns and column-groups (see example below) and would like to reflect the title of the group in the column-chooser's list as well.

Right now the chooser shows two checkboxes per group "Amount", "Weight" "Amount", "Weight" but does not reflect the group title...

Users might not be sure which "Amount" or which "Weight" is affected by which checkbox (in fact in my real world application there may be even more than 2 Productgroups in a row).

@Component({
    selector: 'my-app',
    template: `
      <kendo-grid [data]="data">
         <ng-template kendoGridToolbarTemplate>
            <kendo-grid-column-chooser></kendo-grid-column-chooser>
         </ng-template>
         <kendo-grid-column field="Field1"></kendo-grid-column>
         <kendo-grid-column field="Field2" [hidden]="true"></kendo-grid-column>
         <kendo-grid-column-group title="Productgroup A">
           <kendo-grid-column title="Amount" field="groupA.amount"> </kendo-grid-column>
           <kendo-grid-column title="Weight" field="groupA.weight"> </kendo-grid-column>
         </kendo-grid-column-group>
         <kendo-grid-column-group title="Productgroup B">
           <kendo-grid-column title="Amount" field="groupB.amount"> </kendo-grid-column>
           <kendo-grid-column title="Weight" field="groupB.weight"> </kendo-grid-column>
         </kendo-grid-column-group>
      </kendo-grid>
    `
})
export class AppComponent {
  public data: any[] = [{ Field1: 'Foo', Field2: 'Bar', groupA: { amount: 11, weight: 111, annotation: "none"}, groupB: { amount: 22, weight: 222, annotation: "yes"}}];
}

Thanks for any help!

Jochen

3 comments

ADMIN

Svet

Posted on: 18 Feb 2020 11:46

Hi Jochen,

Thank you for the provided additional details. We will take these into account for the eventual future development of the feature.

Regards,
Svetlin
Progress Telerik

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Jochen

Posted on: 12 Feb 2020 09:17

One way could be: (for me the preferable way)

Add includeInChooser property to kendo-grid-column-group resulting in a group option in the chooser's list. (perhaps with an option to check / uncheck all columns contained in this group / or subgroups)

Another way:

add a property "titleInChooser" to columnbase (defaulting to title) an use it in the chooser...

ADMIN

Svet

Posted on: 12 Feb 2020 08:38

Hi Jochen,

Thank you for the provided feedback.

Indeed providing a template that allows to change the columns/column-labels of the column chooser component would be a valuable addition to the Kendo UI for Angular suite. This is why, I converted this ticket to be a public feature request item where other clients can vote for it. That will allow us to track the demand for such feature and eventually update our future development plans accordingly.

Currently, what could be done as a workaround is to set the [title] of the columns to show the current group as well. Please check the following example demonstrating such approach:

https://stackblitz.com/edit/angular-dufjdn?file=app/app.component.ts

Feel free to add any additionally relevant details about the requested functionality. Thank you.

Regards,
Svetlin
Progress Telerik

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.