Client Side Change for Disabled Button using FormDecorator

3 posts, 1 answers
  1. ZSN
    ZSN avatar
    6 posts
    Member since:
    Oct 2006

    Posted 25 Jul 2009 Link to this post

    I have a page that is fully decorated with the FormDecorator. There is a Delete button that on page load is disabled and the style is good.  After a user action on the page, when in edit mode, the button is enabled via the client side JavaScript without  a postback. The button retains it's original disabled style.

    If I try something like this, it works partially, better in FF than IE 8 when using the WebBlue theme as an example...

    ...

    var

     

    delBtn - get the button reference...

     

     

    //find the decorated container and set the skin.

     

    delBtn.parentNode.className =

    'RadForm_WebBlue.rfdButton';
    ...

    Any advice?

    Thanks.

     

  2. Answer
    Martin
    Admin
    Martin avatar
    585 posts

    Posted 27 Jul 2009 Link to this post

    Hello ZSN,

    Regarding your script:

    1. setting a CSS composite CSS class name (i.e. class="Class1 Class2") cannot be done the way you did it, i.e. element.className=".Class1.Class2", but element.className="Class1 Class2". Actually a similar to yours approach is legal in jQuery, however it is a function alias, actually.
    2. The RadForm_SkinName is not set to the element you are manipulating but to the documentElement (the <html /> tag) of the page or to the decoration zone element.

    I wrote for you a simple function that enables a disabled button. What it does is:

    1. Gets the ID of the disabled button via an argument in the function (button)
    2. Removes the .rfdInputDisabled (a secondary "disabled" class) from its parent by simply setting the normal button class, i.e .rfdSkinnedButton.
    3. Removes the disabled attribute both from the real button and its parent, so the button becomes clickable again.

    Here's the function:

    function enable(button)
    {
     var enabledcss = 'rfdSkinnedButton';
     $get(button).parentNode.className = 'rfdSkinnedButton';
     $get(button).removeAttribute('disabled');
     $get(button).parentNode.removeAttribute('disabled');
    }

    Kind regards,
    Martin Ivanov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. ZSN
    ZSN avatar
    6 posts
    Member since:
    Oct 2006

    Posted 30 Jul 2009 Link to this post

    That works perfect to enable it. I reversed some logic with the setAttribute, and got a good result for the opposite witha new method, so now I have a solution that works for both enabling and disabling skinned buttons.

    Thanks.
Back to Top