<%@ Page Language="VB" Debug="true" EnableViewState="False" %>
<%@ Register TagPrefix="ELB" Namespace="ELB" Assembly="EasyListBox" %>
<script runat="server">

    Private Sub Page_Load(Src As Object, E As EventArgs)

        If Page.IsPostBack Then
            Dim arrTemp As String()
            arrTemp = firstList.AllValues()
            firstListItems.Text = "Selected values: " & Join(arrTemp, ", ")
            secondListItems.Text = "Selected values: " & Join(secondList.AllValues(), ", ")

            thirdListItems.Text = "Selected values: " & Join(thirdList.AllValues(), ", ")
            fourthListItems.Text = "Selected values: " & Join(fourthList.AllValues(), ", ")
        End If

    End Sub

</script>
<html>
    <head>
    <title>EasyListBox.com:  ASP.NET Linked list demo</title>
    <link href="mainStyle.css" type="text/css" rel="stylesheet" />
    </head>
    <body bgcolor="#ffffff" marginwidth=0 marginheight=0 topmargin=0><center>
    <form id="mainForm" method="post" runat="server">

        <table border=0 cellpadding=0 cellspacing=5>

        <tr>
        <td bgcolor="#ccccf0" align="center" style="border:2px dashed #6666cc;padding:2px;"
         nowrap><br />
        <ELB:EasyListBox id="firstList" IsSwapTarget="True" DisplayMode="ListBox"
         TextColor="#0000cc"
         Height="100" Width="150" runat="server">
            <ListItem value="B1">Blue One</ListItem>
            <ListItem value="B2">Blue Two</ListItem>
            <ListItem value="B3">Blue Three</ListItem>
            <ListItem value="B4">Blue Four</ListItem>
            <ListItem value="B5">Blue Five</ListItem>
        </ELB:EasyListBox>
        <br />
         <ELB:ActionButton id="moveUpFirst" Text=" Move Up "
         Action="MoveUp" TargetList="firstList" runat="server" />
         
        <ELB:ActionButton id="moveDownFirst" Text="Move Down"
         Action="MoveDown" TargetList="firstList" runat="server" /> 
        <br /><br style="font-size:2pt;" />
        <asp:Literal id="firstListItems" runat="server" />
        </td>

        <td align="center">
        <br />
        <ELB:ActionButton DisplayType="Image" ImageURL="images/arrowRight.gif"
         Action="SwapItem" SourceList="firstList" TargetList="secondList" runat="server" />
        <br /><br />
        <ELB:ActionButton DisplayType="Image" ImageURL="images/arrowLeft.gif"
         Action="SwapItem" SourceList="secondList" TargetList="firstList" runat="server" />
        <br />
        </td>

        <td bgcolor="#ccf0cc" align="center" style="border:2px dashed green;padding:2px;"
         nowrap><br />
        <ELB:EasyListBox id="secondList" DisplayMode="ListBox" IsSwapTarget="True"
         TextColor="Green"
         Height="100" Width="150" runat="server">
            <ListItem value="G1">Green One</ListItem>
            <ListItem value="G2">Green Two</ListItem>
            <ListItem value="G3">Green Three</ListItem>
            <ListItem value="G4">Green Four</ListItem>
            <ListItem value="G5">Green Five</ListItem>
        </ELB:EasyListBox>
        <br />
         <ELB:ActionButton id="moveUpSecond" Text=" Move Up "
         Action="MoveUp" TargetList="secondList" runat="server" />
         
        <ELB:ActionButton id="moveDownSecond" Text="Move Down"
         Action="MoveDown" TargetList="secondList" runat="server" /> 
        <br /><br style="font-size:2pt;" />
        <asp:Literal id="secondListItems" runat="server" />
        </td>

        </tr>

        <td align="center" nowrap>
        <ELB:ActionButton DisplayType="Image" ImageURL="images/arrowUp.gif"
         Action="SwapItem" SourceList="thirdList" TargetList="firstList" runat="server" />
           
        <ELB:ActionButton DisplayType="Image" ImageURL="images/arrowDown.gif"
         Action="SwapItem" SourceList="firstList" TargetList="thirdList" runat="server" />
        </td>
        <td align="center"> </td>
        <td align="center" nowrap>
        <ELB:ActionButton DisplayType="Image" ImageURL="images/arrowUp.gif"
         Action="SwapItem" SourceList="fourthList" TargetList="secondList" runat="server" />
           
        <ELB:ActionButton DisplayType="Image" ImageURL="images/arrowDown.gif"
         Action="SwapItem" SourceList="secondList" TargetList="fourthList" runat="server" />
        </td>

        </tr>

        <tr>
        <td bgcolor="#ccaacc" align="center" style="border:2px dashed gray;padding:2px;"
         nowrap><br />
        <ELB:EasyListBox id="thirdList" IsSwapTarget="True" DisplayMode="ListBox"
         TextColor="purple"
         Height="100" Width="150" runat="server">
            <ListItem value="P1">Purple One</ListItem>
            <ListItem value="P2">Purple Two</ListItem>
            <ListItem value="P3">Purple Three</ListItem>
            <ListItem value="P4">Purple Four</ListItem>
            <ListItem value="P5">Purple Five</ListItem>
        </ELB:EasyListBox>
        <br />
         <ELB:ActionButton id="moveUpOther" Text=" Move Up "
         Action="MoveUp" TargetList="thirdList" runat="server" />
         
        <ELB:ActionButton id="moveDownOther" Text="Move Down"
         Action="MoveDown" TargetList="thirdList" runat="server" /> 
        <br /><br style="font-size:2pt;" />
        <asp:Literal id="thirdListItems" runat="server" />
        </td>

        <td align="center">
        <br />
        <ELB:ActionButton id="moveOtherFirst"
         DisplayType="Image" ImageURL="images/arrowRight.gif"
         Action="SwapItem" SourceList="thirdList" TargetList="fourthList" runat="server" />
        <br /><br />
        <ELB:ActionButton id="moveFirstOther"
         DisplayType="Image" ImageURL="images/arrowLeft.gif"
         Action="SwapItem" SourceList="fourthList" TargetList="thirdList" runat="server" />
        <br />
        </td>

        <td bgcolor="#f0cccc" align="center" style="border:2px dashed #cc6666;padding:2px;"
         nowrap><br />
        <ELB:EasyListBox id="fourthList" DisplayMode="ListBox" IsSwapTarget="True"
         TextColor="#cc0000"
         Height="100" Width="150" runat="server">
            <ListItem value="R1">Red One</ListItem>
            <ListItem value="R2">Red Two</ListItem>
            <ListItem value="R3">Red Three</ListItem>
            <ListItem value="R4">Red Four</ListItem>
            <ListItem value="R5">Red Five</ListItem>
        </ELB:EasyListBox>
        <br />
         <ELB:ActionButton id="moveUpfourth" Text=" Move Up "
         Action="MoveUp" TargetList="fourthList" runat="server" />
         
        <ELB:ActionButton id="moveDownfourth" Text="Move Down"
         Action="MoveDown" TargetList="fourthList" runat="server" /> 
        <br /><br style="font-size:2pt;" />
        <asp:Literal id="fourthListItems" runat="server" />
        </td>

        </tr>
        </table>
        <br />
        <input type="submit" value=" Submit Form " />
        <br /><br />
        <hr size=1 width="100%" color="#ff8600">
        <br />

    </form>
    </body>
</html>