Enable/disable action buttons in a Dialog?

[Tayger]

Hello

Based on API documentation there is no method/option to enable/disable action buttons defined in a dialog. 

Is there a way to enable/disable action buttons in a dialog?

Regards

 

[Neli]

Hello,

You could disable buttons in the Dialog by adding the disabled='disabled' attribute to the element.
In the linked Dojo example the button in the dialog is enabled/disabled on a button click.
I hope this helps.

Regards,
Neli
Progress Telerik

[Tayger]

Hi Neli

Sorry for my unprecise writing! I'm aware of those options while creating a Dialog. What I need to know is: How can I enable/disable a Dialog button programmatically (after the dialog was created)?.

Regards

[Neli]

Hi Tayger,

If you need to disable buttons without user interaction, you can subscribe to the open event of the Dialog. In the event handler you can find the buttons in the Dialog and set them the 'disabled' attribute.

open: function(e){
var buttons = $('.k-dialog button.k-button');
$(buttons).attr('disabled', 'disabled');
},

In case you need to disable/enable the buttons after the Dialog initialization, you will need to follow the approach from my previous reply. Basically, on the event you need to enable or disable the buttons, you will need to find the buttons in the Dialog and set/remove them the 'disabled' attribute.

If you need to disable/enable specific button in the Dialog, you could use a selector that is unique for this button.

In the modified Dojo example, when the Dialog is opened, both buttons in the Dialog are initially disabled.
The user can enable/disable the 'OK' button by clicking on the 'Disable/Enable' button.

Regards,
Neli
Progress Telerik

[Tayger]

Hi Neli

Thank you for your additional information. In my case I have 3 buttons in my dialog. Accessing only the first button by "k-primary" would not help. The only solution is what you say: "If you need to disable/enable specific button in the Dialog, you could use a selector that is unique for this button."

The problem here is, that KendoUI does not set a unique ID here (neither in some other widgets as I already experienced. See attached screenshot showing how initialised Dialog buttons are defined.

So the one and only possibility to access them specific you need to find the (unique) text of the button:

$('button:contains("Spiel veröffentlichen")').attr('disabled', 'disabled');

 

Well, this is not so nice but it works. Furthermore I need specific button access because I different dialog widgets.

For completeness in case someone else runs into the same problem: My buttons are stretched and I want to reuse the same dialog widget in that case. I use sometimes 3 sometimes 2 buttons. In case of 2 buttons I want to not only disable but hide the button. That works like this in JQuery:

$('button:contains("<Button description>")').hide();

 

Since all stretched buttons have a "%" width you need to adjust the with of the still displayed buttons:

$('button:contains("Spiel testen")').width('50%'); // 50% in case of 2 displayed buttons

 

That works fine so far and I tend to use this mechanism.

Thank you Neli (nice name btw. ;)). Your samples helped me to find a well fitting solution!

Regards

 

 

 

 

 

[Ivan Danchev]

Hi,

Alternatively to using the buttons text to find them you could use their index, as shown in this dojo example, in which we check the number of buttons and if they are two the first one is hidden, if they are three the first one is disabled.

Regards,
Ivan Danchev
Progress Telerik

[Tayger]

Thank you for your answer. Unfortunately it won't work on having more than one dialog widgets. Your selector would find all buttons of all dialog widgets. (I have them created when the site is built up, just not display them all the time). Furthermore your sample might fail on dialog widgets with same amount of buttons.

Sadly, the DIV to wich the dialog widget is attached to does not cover (encapsulate) the button group. So this wont work as I just found out:

$('#publishdiv button:contains("Spiel veröffentlichen")').attr('id', 'publish'); // dialog widget attached to publishdiv

 

Regards

 

[Ivan Danchev]

Hi,

Indeed the id of the Dialog is not rendered in the wrapping div element. But you can still use the id if you want to disable/hide the buttons of a specific Dialog:

var buttons = $('#dialog1').parent().find('button.k-button');

In scenarios where multiple Dialogs are using the same open event handler using the id this way will allow you to specify which Dialog buttons will be disabled or hidden. In the following example two Dialogs with the same number of buttons are initialized. Only dialog1's button is disabled.

Regards,
Ivan Danchev
Progress Telerik

[Tayger]

He, thats exactly how I am doing it atm. It's ok for me and works fine, thank you!