Button doesn't postback with spacebar

9 posts, 0 answers
  1. Moon
    Moon avatar
    249 posts
    Member since:
    Oct 2012

    Posted 11 Dec 2008 Link to this post

    When I use a radformdecorator on a form (2 forms), when I get to the button, it doesn't postback with the spacebar.

    Does it for anyone else? How can I fix this?

    I'm using Q3 2008 asp.net ajax, hotfix version: 2008,3,1126,35

    thanks.

    Moon
  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 12 Dec 2008 Link to this post

    Hi Moon,

    In general the idea behind RadFormDecorator is to provide a simple and easy way to decorate your page. Having a simple way to decorate controls has its side effects however and there are cases where the problem cannot be fixed. If the scenario is more demanding, you can choose not to use RadFormDecorator or to limit the type of decorated controls.

    The scenario that you have is one of these cases. This behavior occurs because the decoration of the button is done with an anchor (see attached screenshot). Unlike buttons, when you press the space button when the focus is set to an anchor, no event is fired - you need to press Enter.





    Regards,
    Georgi Tunev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 18 Jul 2009 Link to this post

    Hi,

    I have the same issue - but "better".
    In Q2 2009 a web 20 decorated button is still rendered href.
    BUT: Enter does not work :(
    At least not in IE 8 and FF 3.x.
    <class="rfdSkinnedButton" href="javascript:void(0)" tabindex="100">  
    <input id="ctl00_LoginView1_btnLogin" class="rfdDecorated" type="submit" tabindex="-1" value="Anmelden" name="ctl00$LoginView1$btnLogin"/>  
    </a> 
    That's what I get for an ASP button.

    This means (I guess) decorate buttons and this means keyboard operation is gone.
    A "not working" spacebar means - not standard.
    But even enter not working means - the user has to use the mouse.
    Not the be solution for data entry forms.

    Any idea how to solve this?

    Regards

    Manfred
  5. Martin
    Admin
    Martin avatar
    585 posts

    Posted 21 Jul 2009 Link to this post

    Hi ManniAT,

    We have logged this issue in our bug tracking database, and will research it further.

    Greetings,
    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.
  6. Marc Messer
    Marc Messer avatar
    17 posts
    Member since:
    May 2009

    Posted 12 Aug 2009 Link to this post

    This code will make the form submit when the user hits the enter button...  You will need to modify it somewhat to change the $j to your jquery reference.  Basically what it does is look for a fieldset element and use the defaultbutton attribute (made it up) and set that is the event if the enter key is pressed.  It is important to note that if you are using ajax and you update your fieldset you will need to re-run the ReadyForms function on the request end.  Hope this helps.

    Sample HTML
    <fieldset DefaultButton="<%=btn.ClientID() %>"
           <asp:textbox id="txt1" runat="server" /><br /> 
           <asp:button id="btn" runat="server" /> 
    </fieldset> 


    Sample CSS
    fieldset { margin0pxpadding0pxbordernone; } 

    Page Function That Must Run
    $j('document').ready(function() { 
        ReadyPage(); 
    }); 

    Supporting Function
    this.ReadyForms = function() { 
        $j("fieldset[DefaultButton]").each(function() { 
            var s = $j(this).attr("DefaultButton"); 
            $j("input[type='text'], input[type='password']"this).keydown(function(e) { 
                var k = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0; 
                if (k == 13) { 
                    e.preventDefault(); 
                    var b = $j("#" + s).eq(0); 
                    if (b.length > 0) { 
                        if (typeof (b.get(0).onclick) == 'function') { b.trigger('click'); } 
                        else if (b.attr('href')) { window.location = b.attr('href'); } 
                        else { b.trigger('click'); } 
                    } 
                } 
            }); 
        }); 
    }; 

  7. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 12 Aug 2009 Link to this post

    Hi Marc,

    thank you for your tips.
    Unfortunately this helps only in specific situations.
    I have (for an example) "fast navigation pages" - they have a lot of divs (some kind of table like layout) and a lot of buttons with a description.
    No input element on the page except these buttons.
    Or on other pages where I have some "nearby controls" with 2 buttons near to them.
    So witch of the two buttons should I use as default button?

    And last not least - I use buttons in Grids with keyboard navigation.

    Last not least - telerik has confirmed the problem - and I hope they will solve it.
    Since the decorator should decorate - and not break the usability of a page I'm almost sure they'll find a solution.

    Regards

    Manfred 
  8. Marc Messer
    Marc Messer avatar
    17 posts
    Member since:
    May 2009

    Posted 12 Aug 2009 Link to this post

    thats even less complex as it only requires javascript vs css/html/js.... Can't believe that you can't use this example to modify and get what you need.  by the way 32 is the keycode for space in FF i didn't test IE

    <script type="text/javascript"
            $j('document').ready(function() { 
                $j('a.rfdSkinnedButton').keydown(function(e) { 
                    var k = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0; 
                    if (k == 32) { $j(this).find('input').trigger('click'); } 
                }); 
            }); 
        </script> 

  9. Marc Messer
    Marc Messer avatar
    17 posts
    Member since:
    May 2009

    Posted 12 Aug 2009 Link to this post

    also you could setup the enter key as well something like:

    e == 32 || e == 13 and make sure you do e.preventDefault
  10. Martin
    Admin
    Martin avatar
    585 posts

    Posted 13 Aug 2009 Link to this post

    Hello Marc Messer,

    Thank you for the tips. I am just writing to you to inform you that at present, the Enter and Spacebar support is exactly what we are implementing, and this will be available with the upcoming service pack.

    All the best,
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017