This is a migrated thread and some comments may be shown as answers.

Split Button - hide context menu before posting back

4 Answers 119 Views
Button
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 09 Jun 2011, 10:27 PM

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

4 Answers, 1 is accepted

Sort by
0
Accepted
Pero
Telerik team
answered on 14 Jun 2011, 03:46 PM
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.

0
Mike
Top achievements
Rank 1
answered on 14 Jun 2011, 05:12 PM
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;
    }
0
Pero
Telerik team
answered on 14 Jun 2011, 08:51 PM
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.

0
Mike
Top achievements
Rank 1
answered on 14 Jun 2011, 08:59 PM
Thanks!
Tags
Button
Asked by
Mike
Top achievements
Rank 1
Answers by
Pero
Telerik team
Mike
Top achievements
Rank 1
Share this question
or