selected state of buttons and button lists

[Brandon]

Is there a way to have a selected state on a dropdown button? Bonus points if the dropdown button is inside a kendo-toolbar.

 

Like a dropdown with 5 options, and I set option 1 to selected or active, or add class.

[Martin]

Hi Brandon,

In order to apply any custom CSS classes to the dropdown button use buttonClass option. By design it supports the type of values that are supported by ngClass.

Please, check this example where on itemClick event I changed the dropdown button styles programmatically:

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

The same approach is valid with the toolbar dropdown button. However, the buttonClass property is missing in the kendo-toolbar-dropdownbutton API. That is why I logged an issue in our public GitHub repository that can be tracked at the following link:

https://github.com/telerik/kendo-angular/issues/2742

Once fixed the issue will be updated accordingly.

Let me know if I can provide any further assistance with this case.

Regards,
Martin
Progress Telerik

[Brandon]

Thanks Martin for the example. Just a request that examples be made in 9.x since its released and Kendo UI is tracking 100% compatibility with Ivy. Also selected state on the specific list items would be helpful. 

Also really interested in a dropdown inside a toolbar with a custom template for the list/list items. The kendo components are often quite limited in options and Ng2 offers a great ng-template far better than AngularJS's transclusion. I see that your toolbar elements are all using ng-template to create custom templates, for things like the font size selection on the editor and font family selection. However, the examples of custom control types in stackblitz break when you upgrade angular to 9.

 

[Martin]

Hi Brandon,

In general, the DropDownButton is not designed to persist a selected state. If one of the items in the dropdown button is a 'Paste' action, for example, the state should not be persisted as this will be an invalid behavior of the component. In order to persist the selection of specific list item the DropDownList component can be used:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/

Kendo UI for Angular supports the latest official version of Angular and those currently being under LTS(Long Term Support). Check the Support Policy and Schedule article from the official Angular documentation for more details. Indeed, all our components are currently marked as compatible with the latest version 9. Check out the Change Log section of each package documentation, for example:

https://www.telerik.com/kendo-angular-ui/components/toolbar/changelog/

However, there are some current issues with the latest version 9 that we will target to fix in the coming weeks. In general, we recommend using the latest package version in order to be able to benefit from the latest features, but it may take some more time in order for us to be fully compatible with it. 

I tested the Custom Control Types example in an isolated Angular 9 project (toolbar-Angular9.zip file), but it compiles as expected. Run the application by using the following commands:

- npm i - to install the dependencies of the project.

- ng serve - to run the application.

As there are major changes to both the rendering and the mechanics of key Angular mechanics like obtaining references via ViewChild, ViewContent, etc, there might be some issues and broken functionalities when compared to using the components with Angular 8.

If you notice anything that seems like a bug on our end, please do not hesitate to report it so we can log in, and do our best to fix it accordingly. Thank you in advance.

Regards,
Martin
Progress Telerik