Button doesn't postback with spacebar

[Moon]

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

[Georgi Tunev]

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.

[ManniAT]

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.

<a 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

[Martin]

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.

[Marc Messer]

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 { margin: 0px; padding: 0px; border: none; }

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'); }
                }
            }
        });
    });
};

[ManniAT]

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 

[Marc Messer]

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>

[Marc Messer]

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

e == 32 || e == 13 and make sure you do e.preventDefault

[Martin]

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.