Single Click Split Button?

[Mike]

It is possible to use the single click feature with a split button?  I'm having trouble with this.

If you run the following code, you'll see the split button feature working.  The split section of the button invokes the context menu for changing the button's text and command.  The main part of the button does a postback.  Each time a postback is done the server-side code displays the button's commandname.  For example, I can run the page, choose "Save and Start Another" and keep clicking it.  It stays on "Save and Start Another" after the postback.

But... if you uncomment the two lines of javascript, the Single Click feature starts working as expected.  But now if I choose "Save and Start Another" from the context menu then do a postback, it reverts back to "Save and Return to List".  It seems like the set_enabled(false) is causing the button's commandname to revert back to it's default/declared value.  The commandname set on the clientside is lost.

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function OnClientSplitButton2Clicked(sender, args) {
            if (args.IsSplitButtonClick()) {
                var currentLocation = $telerik.getLocation(sender.get_element());
                var contextMenu = $find("<%=RadContextMenu2.ClientID%>");
                contextMenu.showAt(currentLocation.x, currentLocation.y + 22);
                sender.set_autoPostBack(false);
            }
            else {
                sender.set_autoPostBack(true);
                //sender.set_enabled(false);
                //sender.set_text("Saving...");
            }
        }
        function OnClientContextMenu2Clicked(sender, args) {
            var itemText = args.get_item().get_text();
            var splitButton = $find("<%=SplitButton2.ClientID%>");
            if (itemText == "Save and Return to List") {
                splitButton.set_text("Save and Return to List");
                splitButton.set_commandName("SaveReturn");
            }
            else if (itemText == "Save and Start Another") {
                splitButton.set_text("Save and Start Another");
                splitButton.set_commandName("SaveStartAnother");
            }
        }
    </script>
</telerik:RadCodeBlock>
<br />
<br />
<asp:Label ID="lblMessage" runat="server" Text="" Style="font-size: 12pt; color: Red;"></asp:Label>
<br />
<br />
<telerik:RadButton ID="SplitButton2" AutoPostBack="false" runat="server" Text="Save and Return to List"
    EnableSplitButton="true" Height="22px" Enabled="true" CommandName="SaveReturn"
    UseSubmitBehavior="false" OnClientClicked="OnClientSplitButton2Clicked" OnClick="SplitButton2_Click">
</telerik:RadButton>
<div style="display: none;">
    <telerik:RadContextMenu ID="RadContextMenu2" runat="server" OnClientItemClicked="OnClientContextMenu2Clicked"
        EnableRoundedCorners="true">
        <Items>
            <telerik:RadMenuItem Text="Save and Return to List">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Save and Start Another">
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadContextMenu>
</div>

protected void SplitButton2_Click(object sender, EventArgs e)
{
    lblMessage.Text = "Save with this command: " + SplitButton2.CommandName + " " + DateTime.Now.ToLongTimeString();
}

[Pero]

Hello Mike,

You should allow a small timeout for the RadButton to correctly save its client state, before disabling it. After adding a small timeout the correct text gets applied to the button. Here is the modified code:

<script type="text/javascript">
    function OnClientSplitButton2Clicked(sender, args)
    {
        if (args.IsSplitButtonClick())
        {
            var currentLocation = $telerik.getLocation(sender.get_element());
            var contextMenu = $find("<%=RadContextMenu2.ClientID%>");
            contextMenu.showAt(currentLocation.x, currentLocation.y + 22);
            sender.set_autoPostBack(false);
        }
        else
        {
            sender.set_autoPostBack(true);
            window.setTimeout(function ()
            {
                sender.set_text("Saving...");
                sender.set_enabled(false);
            }, 0);
        }
    }
    function OnClientContextMenu2Clicked(sender, args)
    {
        var itemText = args.get_item().get_text();
        var splitButton = $find("<%=SplitButton2.ClientID%>");
        if (itemText == "Save and Return to List")
        {
            splitButton.set_text("Save and Return to List");
            splitButton.set_commandName("SaveReturn");
        }
        else if (itemText == "Save and Start Another")
        {
            splitButton.set_text("Save and Start Another");
            splitButton.set_commandName("SaveStartAnother");
        }
    }
</script>

Regards,
Pero
the Telerik team

[Mike]

Thank you, Pero.

This change made it so the button's commandName is correct within the server-side click event, however now the single click feature is not working reliably.  It works only occaisionally.  When I click the main part of the button to do a postback, it changes to "Saving..." and becomes disabled about only 1 out of every 5 attempts. 

[Pero]

Hello Mike,

You are right, the button is disabled only in some cases.
I noticed that the problem appears in Internet Explorer browsers only. The issue is caused by the fact that the browser does not send the value of hidden inputs to the server if some of its parents are disabled. All of our controls save their client state in a hidden field, and if the data is not send to the server they will apply the default values for their properties. That's why I would recommend taking out the client-state hidden field to work around the issue. Here is the modified code:

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function OnClientSplitButton2Clicked(sender, args)
            {
                if (args.IsSplitButtonClick())
                {
                    var currentLocation = $telerik.getLocation(sender.get_element());
                    var contextMenu = $find("<%=RadContextMenu2.ClientID%>");
                    contextMenu.showAt(currentLocation.x, currentLocation.y + 22);
                    sender.set_autoPostBack(false);
                }
                else
                {
                    sender.set_autoPostBack(true);
                    sender.set_enabled(false);
                    if ($telerik.isIE && !sender.get_enabled())
                    {
                        sender.get_element().parentNode.appendChild($get(sender.get_clientStateFieldID()));
                    }
                    _setText(sender, "Saving...");
                }
            }
            function OnClientContextMenu2Clicked(sender, args)
            {
                var itemText = args.get_item().get_text();
                var splitButton = $find("<%=SplitButton2.ClientID%>");
                if (itemText == "Save and Return to List")
                {
                    splitButton.set_text("Save and Return to List");
                    splitButton.set_commandName("SaveReturn");
                }
                else if (itemText == "Save and Start Another")
                {
                    splitButton.set_text("Save and Start Another");
                    splitButton.set_commandName("SaveStartAnother");
                }
            }

            function _setText(btn, value)
            {
                if (!value) value = "";
                var textElement = btn.get_textElement();
                var tagName = textElement.tagName.toLowerCase();
                if (tagName == "input")
                    textElement.setAttribute("value", value);
                else if (tagName == "span")
                    textElement.innerHTML = value;
            }
        </script>
    </telerik:RadCodeBlock>
    <br />
    <br />
    <asp:Label ID="lblMessage" runat="server" Text="" Style="font-size: 12pt; color: Red;"></asp:Label>
    <br />
    <br />
    <telerik:RadButton ID="SplitButton2" AutoPostBack="false" runat="server" Text="Save and Return to List"
        EnableSplitButton="true" Height="22px" Enabled="true" CommandName="SaveReturn"
        UseSubmitBehavior="false" OnClientClicked="OnClientSplitButton2Clicked" OnClick="SplitButton2_Click">
    </telerik:RadButton>
    <div style="display: none;">
        <telerik:RadContextMenu ID="RadContextMenu2" runat="server" OnClientItemClicked="OnClientContextMenu2Clicked"
            EnableRoundedCorners="true">
            <Items>
                <telerik:RadMenuItem Text="Save and Return to List">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Save and Start Another">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadContextMenu>
    </div>
    <asp:Button ID="Button1" Text="Postback" runat="server" />
    </form>
</body>
</html>

All the best,
Pero
the Telerik team

[Mike]

Thank you, Pero, this is doing what I'm wanting.