Split Button|UI Control for ASP.NET AJAX, C#, VB.NET

Split Button in ASP.NET AJAX

Home > How to > Split Button

Information to Split Button

What is split button and what is split button used for? To answer these two questions, we offer some general introductions to split button here. The main benefit of this split button type is that it can enhance the usability of the primary button by adding an extra button next to the main button. To put it in another way, there are two lists and we put a split button in the middle of these two lists. Then when we select one item in the left list and click this button, the selected item will be displayed in the right list.

And the position of the additional button is not fixed and you can add it to the right or left side of your main button by setting related property. When setting the position of the additional button, there is one important note that you may need to keep in mind that it is not feasible to have both primary icon and extra button to be positioned at the left side of the main button. And it is the same for setting secondary icon and the additional button at the right side of the main button.

Example

In this section, we aims to offer a brief answer to the question that how to create a split button in asp.net web application. And in following example to illustrate the creation of a split button in aspx web page, you need to use other two controls from our ASP.NET AJAX, which are PerLishBox and PerContextMenu.

First, we need to add two lists and input some data into the first list using the PerListBox control. Then when selecting certain item in PerListBox, we can use the button to switch freely between these two lists.

In following asp.net codes, we will guide you to call different button events and use various button properties to create a simple split button in client-side application.

ASPX

<table border="1px" style="border-color: #1e90ff">
<tr>
<td>
<kettic:PerListBox ID="PerListBoxSource"runat="server" Height="200px"TransferToID="PerListBoxDestination">
<Items>
<kettic:PerListBoxItem Text="Sunday" Selected="true"></kettic:PerListBoxItem>
<kettic:PerListBoxItem Text="Monday"></kettic:PerListBoxItem>
<kettic:PerListBoxItem Text="Tuesday"></kettic:PerListBoxItem>
<kettic:PerListBoxItem Text="Wednesday"></kettic:PerListBoxItem>
<kettic:PerListBoxItem Text="Thursday"></kettic:PerListBoxItem>
<kettic:PerListBoxItem Text="Friday"></kettic:PerListBoxItem>
<kettic:PerListBoxItem Text="Saturday"></kettic:PerListBoxItem>
</Items>
</kettic:PerListBox>
</td>
<td>
<kettic:PerListBox ID="PerListBoxDestination"runat="server" Height="200px">
</kettic:PerListBox>
</td>
<td>
<kettic:PerButtonEnableSplitButton="true" ID="SplitButton"AutoPostBack="false"
runat="server" Text="Transfer Item"OnClientClicked="OnClientClicked">
</kettic:PerButton>
<kettic:PerContextMenu ID="PerContextMenu1"runat="server"OnClientItemClicked="OnClientItemClicked">
<Items>
<kettic:PerMenuItem Text="Transfer Right">
</kettic:PerMenuItem>
<kettic:PerMenuItem Text="Transfer Left">
</kettic:PerMenuItem>
</Items>
</kettic:PerContextMenu>
</td>
</tr>
</table>

JavaScript

<scripttype="text/javascript">
functionOnClientClicked(sender, args) {

if (args.IsSplitButtonClick() || !sender.get_commandName()) {
varcurrentLocation = $kettic.getBounds(sender.get_element());
varcontextMenu = $find("<%=PerContextMenu1.ClientID%>");
contextMenu.showAt(currentLocation.x, currentLocation.y + currentLocation.height);
                } elseif (sender.get_commandName() == "TransferRight") {
transferRight();
                }
else {
transferLeft();
                }
            }

functionOnClientItemClicked(sender, args) {
varitemText = args.get_item().get_text();
varsplitButton = $find("<%= SplitButton.ClientID%>");
if (itemText.toLowerCase() == "transfer right") {
transferRight();
splitButton.set_text("Transfer Right");
splitButton.set_commandName("TransferRight");
                }
elseif (itemText.toLowerCase() == "transfer left") {
transferLeft();
splitButton.set_text("Transfer Left");
splitButton.set_commandName("TransferLeft");
                }
            }

functiontransferRight() {
var listBox2 = $find("<%= PerListBoxSource.ClientID%>");

varselectedItem = listBox2.get_selectedItem();
if (selectedItem == null) {
alert("You need to select an item first.");
returnfalse;
                }

listBox2.transferToDestination(selectedItem);
returnfalse;
            }

functiontransferLeft() {
var listBox2 = $find("<%= PerListBoxSource.ClientID%>");
var listBox3 = listBox2.get_transferTo();
varselectedItem = listBox3.get_selectedItem();
if (selectedItem == null) {
alert("You need to select an item first.");
returnfalse;
                }

listBox2.transferFromDestination(selectedItem);
returnfalse;
            }
</script>

If you met any problems in the process of testing following split button creating codes, please feel free to contact us.

ASP.NET AJAX UI Controls

ASP.NET AJAX Chart UI Control ASP.NET AJAX Grid UI Control ASP.NET AJAX Barcode UI Control

ASP.NET AJAX Button UI Control

Overview Getting Started

Button Type

Standard Button Icon Button Image Button Link Button Toggle Button

Split Button

Client Prpgramming

Button Event

Server Programming