ASPxClientListBox.BeginUpdate Method

Prevents the client list box editor from being rendered until the ASPxClientListBox.EndUpdate method is called.

Declaration

BeginUpdate(): void

Remarks

The list box editor allows a sequence of operations that affect its appearance and/or functionality to be performed on the client side, without having the editor render itself after each modification (for instance, multiple items within the editor can be dynamically added/removed at the same time). To do this, the code performing sequential changes to the editor must be enclosed within calls to the BeginUpdate and ASPxClientListBox.EndUpdate methods. This improves performance, and avoids unnecessary render operations on the client side.

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
ASPX

javascript

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>