ASPxClientListBox.EndUpdate Method

Re-enables editor render operations after a call to the ASPxClientListBox.BeginUpdate method, and forces an immediate re-rendering.

Declaration

EndUpdate(): 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 ASPxClientListBox.BeginUpdate and 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>