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