Single Click Split Button?

5 posts, 1 answers
  1. Mike
    Mike avatar
    25 posts
    Member since:
    Aug 2010

    Posted 08 Jun 2011 Link to this post

    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();
    }
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 13 Jun 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mike
    Mike avatar
    25 posts
    Member since:
    Aug 2010

    Posted 13 Jun 2011 Link to this post

    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. 
  5. Answer
    Pero
    Admin
    Pero avatar
    1156 posts

    Posted 14 Jun 2011 Link to this post

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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. Mike
    Mike avatar
    25 posts
    Member since:
    Aug 2010

    Posted 14 Jun 2011 Link to this post

    Thank you, Pero, this is doing what I'm wanting.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017