Enable/disable action buttons in a Dialog?

9 posts, 2 answers
  1. Tayger
    Tayger avatar
    182 posts
    Member since:
    Jan 2015

    Posted 09 May Link to this post

    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

     

  2. Neli
    Admin
    Neli avatar
    194 posts

    Posted 11 May Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Tayger
    Tayger avatar
    182 posts
    Member since:
    Jan 2015

    Posted 13 May in reply to Neli Link to this post

    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

  4. Answer
    Neli
    Admin
    Neli avatar
    194 posts

    Posted 15 May Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Tayger
    Tayger avatar
    182 posts
    Member since:
    Jan 2015

    Posted 17 May in reply to Neli Link to this post

    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

     

     

     

     

     

  6. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1520 posts

    Posted 21 May Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Tayger
    Tayger avatar
    182 posts
    Member since:
    Jan 2015

    Posted 21 May in reply to Ivan Danchev Link to this post

    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

     

  8. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    1520 posts

    Posted 22 May Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. Tayger
    Tayger avatar
    182 posts
    Member since:
    Jan 2015

    Posted 22 May Link to this post

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