Hide dropdown button from combobox when readonly

3 Answers 28 Views
ComboBox MultiColumnComboBox
Eric
Top achievements
Rank 1
Iron
Iron
Iron
Eric asked on 27 Sep 2022, 12:06 PM | edited on 27 Sep 2022, 12:37 PM

Hi

 

Is this possible, can't find it in the documentation?

 

This question is for all components having an (image) button like the calendar

This form is read only so the drowdown buttons , the calendar buttons should not be shown. (As also the * required , which we already solved)


Eric

3 Answers, 1 is accepted

Sort by
0
Nadezhda Tacheva
Telerik team
answered on 30 Sep 2022, 08:12 AM

Hi Eric,

By design, when the ComboBox is disabled, we are adding, we are adding a "k-disabled" class to its main wrapping element. This class introduces some styling changes that indicate the component is disabled. For example, we are setting less opacity and no pointer events. The component elements (the input, the button that opens the dropdown) remain visible but the user is not able to click them. This applies to other dropdown components and date pickers.

If you want to hide the button or the icon, you can achieve that with some custom CSS. The easiest way to proceed is to inspect the rendering using your dev tools,  so you can find the correct element you need to additionally style. I would recommend using the "k-disabled" class in the selector to ensure these styles will be applied only to the disabled state of the component.

Here is a sample that demonstrates how to hide the buttons in a ComboBox and a DatePicker. You may use it as a base to customize the components in your application:

https://blazorrepl.telerik.com/mQYNxaOs087e8slj51

I hope the above-listed information and sample will help you move forward. Please let us know if you are experiencing any difficulties.

Regards,
Nadezhda Tacheva
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.

Paul
Top achievements
Rank 1
Iron
commented on 05 Oct 2022, 10:45 AM

Hi Nadezhda 

Nice solution, thanks!

Paul

0
Paul
Top achievements
Rank 1
Iron
answered on 30 Sep 2022, 08:19 AM | edited on 30 Sep 2022, 08:30 AM

Hi

 

Ok i understand , but a property like "HideButtonOnReadOnly" would be a nice feature to have for all developers.

Can you add this to the feature list?

 

Paul

0
Nadezhda Tacheva
Telerik team
answered on 05 Oct 2022, 07:55 AM

Hi Paul,

Such a property would interfere with the design we have incorporated for the disabled state of the select and date/time picker components.

The Telerik UI products share a unified design, so the same behavior can be observed in our other suites. By design, the button remains visible but the whole component has less opacity and no pointer events. While we've considered that the current styles clearly indicate to the user that the components are disabled, one can of course customize them as needed using the approach listed above.

Regards,
Nadezhda Tacheva
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.

Tags
ComboBox MultiColumnComboBox
Asked by
Eric
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Nadezhda Tacheva
Telerik team
Paul
Top achievements
Rank 1
Iron
Share this question
or