Deleting items client-side doesn’t delete them server-side

[Simo]

I have a RadListBox showing selected filter rules. I can add items to this ListBox by transferring from other ListBoxes or by creating from other controls' data using client-side javascript. When I add or remove items, I update RadGrid asynchronously using RadAjaxManager. In javascript always when I add or remove items to the ListBox, I call a function to make RadAjaxManager to update RadGrid.

When I add new items, the items appear in the ListBox client-side and also server-side. But when I remove items, it removes the item client-side and calls the AjaxManager request, but the items are not removed from the server side collection. For example if I add and remove the exactly same item 5 times, then I would have 0 items shown in the client-side ListBox but the same item 5 times in the server-side collection.

 

I am using trackChanges() and commitChanges() functions both when adding or deleting items. The ListBox is not posted back. Why is it so that adding items using these functions works but removing doesn’t?

 

Thanks,

Simo

 

Here are the functions to add and delete the items and call the Ajax manager (alerts for testing purposes):

 

function StateListBoxItemDblClicked() {
     alert("StateListBoxItemDblClicked " + ListboxDestination.get_items().get_count());
     var listBoxSource = $find("<%= UseCaseStateRadListBox.ClientID %>");
     listboxDestination.trackChanges();
     var item = listBoxSource.get_selectedItem();
     listBoxSource.transferToDestination(item);
     listboxDestination.commitChanges();
     UseCaseRadGridRebind();
 }

 function DeleteSelectedItemFromDestination() {
     listboxDestination.trackChanges();
     var item = listboxDestination.get_selectedItem();
     listboxDestination.get_items().remove(item);
     listboxDestination.commitChanges();
     alert("Deleted "+ listboxDestination.get_items().get_count());
     UseCaseRadGridRebind();
 }

function UseCaseRadGridRebind() {
    $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("UseCaseRadGridRebind");
}

 

Here is the RadAjaxManager, RadGrid inside RadPane and RadListBox inside RadPanelBar.

 

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
    onajaxrequest="RadAjaxManager1_AjaxRequest" EnableViewState="False">
    <AjaxSettings>
         <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="UseCaseRadGrid" LoadingPanelID="LoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>


        <telerik:RadPane runat="server">
            <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Skin="Default">
     </telerik:RadAjaxLoadingPanel>
        <telerik:RadGrid ID="UseCaseRadGrid" runat="server" AutoGenerateColumns="False"
                GridLines="None" Width="440" Visible="true"
                onselectedindexchanged="UseCaseRadGrid_SelectedIndexChanged"
                onitemcommand="UseCaseRadGrid_ItemCommand"
                    onneeddatasource="UseCaseRadGrid_NeedDataSource" >
<ClientSettings EnablePostBackOnRowClick="true">
<Selecting AllowRowSelect="true" />
</ClientSettings>
       <MasterTableView AutoGenerateColumns="False" ShowHeadersWhenNoRecords="True" EnableNoRecordsTemplate="true">
        <Columns>
            ...
        </Columns>
       </MasterTableView>
        </telerik:RadGrid>
        </telerik:RadPane>


<telerik:RadPanelItem Text="Valitut hakuehdot">
<ContentTemplate>
    <telerik:RadListBox runat="server" ID="RadListBoxDestination" AutoPostBackOnDelete="false"
        Height="200px" Width="500px" AllowAutomaticUpdates="false" OnClientDeleted="DeleteSelectedItemFromDestination"
AllowDelete="True" SelectionMode="Multiple" AllowReorder="False" OnClientItemDoubleClicked="DeleteSelectedItemFromDestination"  />
 </ContentTemplate>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelBar>

        protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
            if (e.Argument == "UseCaseRadGridRebind")
                UseCaseRadGrid.Rebind();
        }

RadListBoxItemCollection RadListBoxDestinationItems = RadListBoxDestination.Items;

[Genady Sergeev]

Hello Simo,

By default, the delete/insert/reorder/transfer operations are saved in the RadListBox client state. Then, after a postback, no matter async or a normal one, the changes are 'played' on the server, the ClientState and the ViewState of the control are updated and the new HTML is sent to the client. However, in your scenario, you haven't added the listbox control to the controls that should be updated by RadAjaxManager. This will result in ClientState not being updated. It is highly likely that this is the reason for the problem that you experience. Please, make sure that RadListBox is updated on every async postback, if there are queued client changes in its client state.

Sincerely yours,
Genady Sergeev
the Telerik team

[Simo]

Hello,

Your advice of adding the listbox to radManager's updated controls was part of the solution, thanks for that. That way I got to work those cases where I create items from comboboxes.

I was not able to transfer items from other listboxes to the listboxDestination, it gave unpredictable results. Sometimes it added and deleted the items and sometimes not. But when I changed the javascript so that it doesn't transfer the items but creates new ones, then it works like it should.

Simo

function StateListBoxItemDblClicked() {
    //alert("StateListBoxItemDblClicked " + listboxDestination.get_items().get_count());
    var listBoxSource = $find("<%= UseCaseStateRadListBox.ClientID %>");
    listboxDestination.trackChanges();
    var item = listBoxSource.get_selectedItem();
    var newItem = new Telerik.Web.UI.RadListBoxItem();
    newItem.set_text(item.get_text());
    newItem.set_value(item.get_value());
    listboxDestination.get_items().add(newItem);
    //listBoxSource.transferToDestination(item);
    listboxDestination.commitChanges();
    UseCaseRadGridRebind();
}