Split Button - hide context menu before posting back

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

    Posted 09 Jun 2011 Link to this post

    I could use some help/advice with creating a drop down button that posts back to the server when the contextmenu item is clicked.  Here are two different approaches.

    The first simple example does this, but it doesn't refresh nicely.  When I click the contextmenu item, the menu begins to close back up and simultaneously the postback starts.  So what the user sees is the menu half-way closed as the browser is busy working on the postback.  It just doesn't look polished.  I'd like for the page to be in some kind of stable looking state at the time the postback initiates. 

    <telerik:RadButton EnableSplitButton="true" ID="SplitButton3" AutoPostBack="false"
            runat="server" Text="Leave" OnClientClicked="OnClientSplitButton3Clicked">
        </telerik:RadButton>
        <div style="display: none;">
            <telerik:RadContextMenu ID="RadContextMenu3" runat="server" EnableRoundedCorners="false"
                OnItemClick="RadContextMenu3_Click">
                <Items>
                    <telerik:RadMenuItem Text="Leave by Land" Value="LAND">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Leave by Sea" Value="SEA">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadContextMenu>
        </div>
      
      
       function OnClientSplitButton3Clicked(sender, args) {
      
                var contextMenu = $find("<%=RadContextMenu3.ClientID%>");
                var currentLocation = $telerik.getLocation(sender.get_element());
                contextMenu.showAt(currentLocation.x, currentLocation.y + 28);
            }

    The second approach is a little more complex.  It produces the sort of user experience I'm trying to achieve, but it doesn't work due to the issue I posted in another thread titled "Single Click Split Button?".  In the SplitButton1_Click server-side code, the SplitButton1.CommandName is always blank - it appears as though the set_enabled(false) javascript command is clearing it out.


    <
    telerik:RadButton EnableSplitButton="true" ID="SplitButton1" AutoPostBack="false"
            runat="server" Text="Assign" OnClientClicked="OnClientSplitButton1Clicked" EnableEmbeddedSkins="false"
            OnClick="SplitButton1_Click">
        </telerik:RadButton>
        <div style="display: none;">
            <telerik:RadContextMenu ID="RadContextMenu1" runat="server"             OnClientItemClicked="OnClientContextMenu1Clicked">
                <Items>
                    <telerik:RadMenuItem Text="Assign and Return to List">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Assign and Continue">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadContextMenu>
        </div>
      
      
    function OnClientContextMenu1Clicked(sender, args) {
      
                // 2
                var itemText = args.get_item().get_text();
                var splitButton = $find("<%=SplitButton1.ClientID%>");
                if (itemText == "Assign and Return to List") {
                    splitButton.set_commandName("AssignReturn");
                }
                else if (itemText == "Assign and Continue") {
                    splitButton.set_commandName("AssignContinue");
                }
      
                splitButton.set_text("Assigning...");
      
                //allow context menu to finish hiding before doing postback
                setTimeout('executeButtonClick()', 200);
            }
      
            function executeButtonClick() {
                // 3
                var splitButton = $find("<%=SplitButton1.ClientID%>");
                splitButton.click();
            }
      
            function OnClientSplitButton1Clicked(sender, args) {
      
                var contextMenu = $find("<%=RadContextMenu1.ClientID%>");
      
                var btnText = sender.get_text();
      
                if (btnText == "Assign") {
                    //text is still in initial state, so display the context menu.
                    // 1
                    var currentLocation = $telerik.getLocation(sender.get_element());
                    contextMenu.showAt(currentLocation.x, currentLocation.y + 28);
                }
                else {
                    // context menu has been clicked, so do a postback
                    // 4
                    sender.set_autoPostBack(true);
                    sender.set_enabled(false);
                }
            }
      
    protected void SplitButton1_Click(object sender, EventArgs e)
        {
            lblMessage.Text = "Assign with this command: " + SplitButton1.CommandName + " " + DateTime.Now.ToLongTimeString();
        }
  2. Answer
    Pero
    Admin
    Pero avatar
    1156 posts

    Posted 14 Jun 2011 Link to this post

    Hi Mike,

    I have responded to you in the other forum thread regarding the second approach. Could you please let us know if you still need to improve the first approach, so we should look for a solution?

    Kind 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 14 Jun 2011 Link to this post

    Thanks so much for the help, Pero. Using the approach demonstrated in the other thread, I was able to get the result I was looking for.  There may be a better way, but this worked for me.  If you see anything below that could be done better, please let me know.  -Mike

    <script type="text/javascript">
      
                    function OnClientContextMenu1Clicked(sender, args) {
      
                        // 2
                        var itemText = args.get_item().get_text();
                        var splitButton = $find("<%=SplitButton1.ClientID%>");
                        if (itemText == "Assign and Return to List") {
                            splitButton.set_commandName("AssignReturn");
                        }
                        else if (itemText == "Assign and Continue") {
                            splitButton.set_commandName("AssignContinue");
                        }
      
                        _setText(splitButton, "Assigning...");
      
                        //allow context menu to finish hiding before doing postback
                        setTimeout('executeButtonClick()', 200);
                    }
      
                    function executeButtonClick() {
                        // 3
                        var splitButton = $find("<%=SplitButton1.ClientID%>");
                        splitButton.click();
                    }
      
                    function OnClientSplitButton1Clicked(sender, args) {
      
                        var btnText = _getText(sender);
      
                        if (btnText == "Assign") {
                            //text is still in initial state, so display the context menu.
                            // 1
                            var contextMenu = $find("<%=RadContextMenu1.ClientID%>");
                            var currentLocation = $telerik.getLocation(sender.get_element());
                            contextMenu.showAt(currentLocation.x, currentLocation.y + 22);
                        }
                        else {
                            // context menu has been clicked, so do a postback
                            // 4
                            sender.set_autoPostBack(true);
                            sender.set_enabled(false);
                            if ($telerik.isIE && !sender.get_enabled()) {
                                sender.get_element().parentNode.appendChild($get(sender.get_clientStateFieldID()));
                            }
                        }
                    }
      
                    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;
                    }
      
                    function _getText(btn) {
                        var textElement = btn.get_textElement();
                        var tagName = textElement.tagName.toLowerCase();
                        if (tagName == "input")
                            return textElement.getAttribute("value");
                        else if (tagName == "span")
                            return textElement.innerHTML;
                    }
      
                </script>
      
      
      
      
    <br />
            <br />
            <asp:Label ID="lblMessage" runat="server" Text="" Style="font-size: 12pt; color: Red;"></asp:Label>
            <br />
            <br />
      
      
            <telerik:RadButton EnableSplitButton="true" ID="SplitButton1" AutoPostBack="false"
                runat="server" Text="Assign" OnClientClicked="OnClientSplitButton1Clicked" 
                OnClick="SplitButton1_Click" UseSubmitBehavior="false">
            </telerik:RadButton>
            <div style="display: none;">
                <telerik:RadContextMenu ID="RadContextMenu1" runat="server" OnClientItemClicked="OnClientContextMenu1Clicked" >
                    <Items>
                        <telerik:RadMenuItem Text="Assign and Return to List">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Assign and Continue">
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadContextMenu>
            </div>
      
      
    protected void Page_Load(object sender, EventArgs e)
        {
            lblMessage.Text = "";
        }
        protected void SplitButton1_Click(object sender, EventArgs e)
        {
            lblMessage.Text = "Assign with this command: " + SplitButton1.CommandName + " " + DateTime.Now.ToLongTimeString();
            SplitButton1.AutoPostBack = false;
        }
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 14 Jun 2011 Link to this post

    Hello Mike,

    I have only one thing to add. If the RadButton.ButtonType is StandardButton, then the _setText and _getText functions can be made simpler:
    function _setText(btn, value) {
        btn.get_textElement().setAttribute("value", value);
    }
     
    function _getText(btn) {
        return btn.get_textElement().getAttribute("value");
    }


    Kind 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.

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

    Posted 14 Jun 2011 Link to this post

    Thanks!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017