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.
Hi Ankur,
The feature request is still not part of our immediate development plans and we are still tracing the demand for it.
Regards,
Martin
Progress Telerik
Hello Telerik,
Shall we expect this feature in near future where we have a hook available to create our custom functionality on click of 'Reset' button?
Hi Neil,
The Reset button resets to the initial state of the checked columns before the Apply button is clicked. To try that first check any column and then click the Reset button before clicking Apply.
Regards,
Svet
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
The existing reset button does not seem to work at all:
https://www.telerik.com/kendo-angular-ui/components/grid/accessories/column-menu/
Try hiding a column on the examples on this page, and then try the reset button. It seems to do nothing for me and there's no error in the console.
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:
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
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.
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
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)?
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