Unplanned
Last Updated: 08 Jun 2020 08:18 by ADMIN
Arjuna
Created on: 03 Jun 2020 03:51
Category: Grid
Type: Feature Request
1
How to overwrite kendo-grid-column-chooser reset button logic?

We need to overwrite kendo-grid-column-chooser component reset button logic. We need reset button to select all columns that were selected during the initial load of grid.instead of current reset logic. Is there a way to overwrite reset button logic?

I tried <kendo-grid-column-chooser (reset)="resetColumnMenu($event)"></kendo-grid-column-chooser> but it didn't work.

5 comments
ADMIN
Svetlin
Posted on: 08 Jun 2020 08:18

Hi Arjuna,

Thank you for the provided feedback.

Indeed, providing a way to prevent the default behavior of the "Reset" button and respectively change its functionality would be a valuable addition to the built-in functionality of the ColumnChooserComponent. This is why I converted this ticket to be a public feature request item:

https://feedback.telerik.com/kendo-angular-ui/1470056-how-to-overwrite-kendo-grid-column-chooser-reset-button-logic

so that other clients can vote for it. That will help us to track the demand for such functionality and we will be able to add it to our future development plans. Thank you.

Regards,
Svetlin
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Arjuna
Posted on: 05 Jun 2020 15:02

Basically we are on our own to come up with Custom column chooser functionality if we need anything different from default behavior. Implementing same functionality all over again just for Reset button is tedious job for complex screens with 50 to 60 fields with different tabs.

Going forward I hope Kendo provides hooks to listen to events generated out of components like these and allow us to specify our own method to overwrite default behavior. Business always ask little different behavior than Kendo default and if we start writing custom components for each, we will writing another Custom Kendo.

ADMIN
Svetlin
Posted on: 04 Jun 2020 06:38

Hi Arjuna,

Thank you for the provided additional details.

As far as I understand you need to customize the default behavior of the "Reset" button of the ColumnChooserComponent demonstrated in the following article:

https://www.telerik.com/kendo-angular-ui/components/grid/api/ColumnChooserComponent/

If that is the case, indeed there isn't a template that allows to customize the content of the ColumnChooserComponent. However, you could create your own custom ColumnChooser. For the purpose an icon button should be used and when clicking it a Popup should be displayed. The content of the popup can then be customized to include the columns and the desired buttons as described in my previous reply. Please check the following example demonstrating how to create the icon button and to show a Popup upon clicking it:

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

The creation of the custom content would then be in the hands of the developer. Please let me know in case I am missing something or if any further assistance is required for this case. Thank you.

Regards,
Svetlin
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Arjuna
Posted on: 03 Jun 2020 14:56

Thanks for your reply Svetlin. My question is about Grid level column chooser component and not about individual Grid Column Menu that comes up for each field. Is there a way to overwrite reset button logic for Grid level Column Chooser (vertical column icon)? 

ADMIN
Svetlin
Posted on: 03 Jun 2020 12:17

Hi Arjuna,

There isn't a supported way to override the default behavior of the built-in "Reset" button. However, it is possible to use some custom implementation that will leave the control in the hands of the developer in order to render the desired content of the ColumnMenu and to control the behavior of the buttons. Let me provide a brief guideline on how that could be achieved with the help of a template. First, a kendoGridColumnMenuTemplate should be used as demonstrated in the following article:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/menu/#toc-customizing-the-content

Then the content of the kendoGridColumnMenuTemplate should consist of any HTML, for example a list of items rendered using an *ngFor directive. Each item should correspond to a Grid column. The items should also allow checking/unchecking. That would allow to handle their respective events and persists the state of the columns visibility in an array that can be later passed to the Grid to update the view to show only the currently displayed columns. Last but not lease, custom "Reset" and "Apply" buttons should be added to the template. That will allow to handle the click events of these buttons and implement the required custom reset functionality to perform the desired behavior. Clicking the "Apply" button should pass the persisted columns array to the Grid in order to apply the current visibility state.

Please share your thoughts on the provided suggestion. Feel free to write back in case there is something unclear or if any further assistance is required for the implementation of the suggested approach. Thank you in advance.

Regards,
Svetlin
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.