ASPxClientListBox.RemoveItem(index) Method

Removes an item specified by its index from the client list editor.

Declaration

RemoveItem(
    index: number
): void

Parameters

Name	Type	Description
index	number	An integer value representing the index of the list item to be removed.

Example

The following section of the Moving Items Between Two List Boxes online demo illustrates how moving ASPxListBox items is implemented using the client ASPxClientListBox.GetSelectedItems, ASPxClientListBox.AddItem, ASPxClientListBox.RemoveItem, ASPxClientListBox.BeginUpdate and ASPxClientListBox.EndUpdate methods.

JS

function AddSelectedItems() {
    MoveSelectedItems(lbAvailable, lbChoosen);
...
}

function RemoveSelectedItems() {
    MoveSelectedItems(lbChoosen, lbAvailable);
...
}
function MoveSelectedItems(srcListBox, dstListBox) {
    srcListBox.BeginUpdate();
    dstListBox.BeginUpdate();
    var items = srcListBox.GetSelectedItems();
    for(var i = items.length - 1; i >= 0; i = i - 1) {
        dstListBox.AddItem(items[i].text, items[i].value);
        srcListBox.RemoveItem(items[i].index);
    }
    srcListBox.EndUpdate();
    dstListBox.EndUpdate();
}

ASPX

<!-- ASPxListBox controls -->

<dxe:ASPxListBox ID="lbAvailable" runat="server" ClientInstanceName="lbAvailable"
Width="230px" Height="240px" SelectionMode="CheckColumn">
    <Items>
        <dxe:ListEditItem Text="ASPxEditors Suite" Value="ASPxEditors" />
        <dxe:ListEditItem Text="ASPxGauges Suite" Value="ASPxGauges" />
        ...
    </Items>
...
</dxe:ASPxListBox>
...
<dxe:ASPxListBox ID="lbChoosen" runat="server" ClientInstanceName="lbChoosen"
Width="230px" Height="240px" SelectionMode="CheckColumn">
...
</dxe:ASPxListBox>

<!-- ASPxButtons -->

<dxe:ASPxButton ID="btnMoveSelectedItemsToRight" runat="server" 
ClientInstanceName="btnMoveSelectedItemsToRight" AutoPostBack="False" 
Text="Add >" Width="120px" Height="23px" ClientEnabled="False" 
ToolTip="Add selected items">
    <ClientSideEvents Click="function(s, e) { AddSelectedItems(); }" />
</dxe:ASPxButton>

<dxe:ASPxButton ID="btnMoveSelectedItemsToLeft" runat="server" 
ClientInstanceName="btnMoveSelectedItemsToLeft"
AutoPostBack="False" Text="< Remove" Width="120px" Height="23px" 
ClientEnabled="False" ToolTip="Remove selected items">
    <ClientSideEvents Click="function(s, e) { RemoveSelectedItems(); }" />
</dxe:ASPxButton>