Client Transfer in RadListBox not saving after post back

[cesar]

Hello,

 

I have a problem with RadListBox in a Control Page (.ASCX). Everything seems to work fine when transferring from one RadListBox to a second one from client-side.

The problem is after post back. Changes are not being read. These are my JS and ASPX codes.

I would appreciate any help. Thank you.

 

var listBox;
var listBox2;

function transferItem(item, lbSource, lbTarget) {
    var itemsTarget = lbTarget.get_items();
    lbTarget.trackChanges();
    itemsTarget.insert(0, item);
    lbTarget.commitChanges();
}

function pageLoad() {
    var $ = $telerik.$;
    listBox = $find("<%= AllLanguages.ClientID %>");
    listBox2 = listBox.get_transferTo();
}

function transferRight() {
    var items = listBox.get_selectedItems();
    for (var i = 0; i < items.length; i++) {
        var item = items[i];
        if (item.get_text() != "Select" || item.get_value() != "") {
            transferItem(item, listBox, listBox2);
        }
    }
    listBox.clearSelection();
    listBox2.clearSelection();
    return false;
}

function transferLeft() {
    var items = listBox2.get_selectedItems();
    for (var i = 0; i < items.length; i++) {
        var item = items[i];
        if (item.get_text() != "Select" || item.get_value() != "") {
            transferItem(item, listBox2, listBox);
        }
    }
    listBox.clearSelection();
    listBox2.clearSelection();
    return false;
}

function removeAll() {
    var items = listBox2.get_items();
    for (var i = items.get_count() - 1 ; i > -1 ; --i) {
        transferItem(items.getItem(i), listBox2, listBox);
    }
}

 

<table border="0" style="width: 760px; border-collapse: collapse; border-spacing: 0px">
    <tr>
        <td>Available:</td>
        <td></td>
        <td>Selected:</td>
    </tr>
    <tr>
        <td>
            <telerik:RadListBox ID="AllLanguages" runat="server" Height="500px" Width="300px" SelectionMode="Multiple" TransferToID="SelectedLanguages"></telerik:RadListBox>
        </td>
        <td>
            <telerik:RadButton ID="btnAdd" runat="server" Text="Add >" Width="100px" OnClick="btnAdd_Click" OnClientClicked="transferRight" AutoPostBack="False" UseSubmitBehavior="False"></telerik:RadButton>
            <br />
            <telerik:RadButton ID="btnRemove" runat="server" Text="< Remove" Width="100px" OnClientClicked="transferLeft" AutoPostBack="False" UseSubmitBehavior="False"></telerik:RadButton>
            <br />
            <telerik:RadButton ID="btnRemoveAll" runat="server" Text="Remove All" Width="100px" OnClientClicked="removeAll" AutoPostBack="False" UseSubmitBehavior="False"></telerik:RadButton>
            <br />
        </td>
        <td>
            <telerik:RadListBox ID="SelectedLanguages" runat="server" Height="500px" Width="300px" OnClientLoad="pageLoad"></telerik:RadListBox>
        </td>
    </tr>
</table>

[cesar]

Anyone?

[Ivan Danchev]

Hello,

By "Changes are not being read" do you mean that the moved items are loaded back after postback into the RadListBox controls you moved them from? Is there any reason for not using the default buttons that are enabled when setting the RadListBox's AllowTransfer property to "true"? Their position and appearance can be customized and by using them you are making sure the OnClientTransferring and OnClientTransferred client-side events will fire. Transferring items this way would save you from writing your own code to handle the items transfer.

Regards,
Ivan Danchev
Telerik

 

 

[cesar]

Thank you for your reply, Ivan.

1. I meant all changes or transfers are loaded back after postback. Sorry for not being clear.

2. The reason why I am doing my own code to handle the transfer is because I want to insert them in the proper alphabetic position.

For example, I have a list of A, C, D and the other list has B. I want to insert it between A and C.

This my updated transferItem function:

 

function binaryIndexOf(itemCollection, searchElement) {
    'use strict';

    var minIndex = 0;
    var maxIndex = itemCollection.get_count() - 1;
    var currentIndex;
    var currentElement;
    var resultIndex;

    while (minIndex <= maxIndex) {
        resultIndex = currentIndex = (minIndex + maxIndex) / 2 | 0;
        currentElement = itemCollection.getItem(currentIndex).get_text();

        if (currentElement < searchElement) {
            minIndex = currentIndex + 1;
        }
        else if (currentElement > searchElement) {
            maxIndex = currentIndex - 1;
        }
        else {
            return currentIndex;
        }
    }

    return minIndex;
}

function transferItem(item, lbSource, lbTarget) {
    var index = binaryIndexOf(lbTarget.get_items(), item.get_text());
    lbTarget.trackChanges();
    lbTarget.get_items().insert(index, item);
    lbTarget.commitChanges();
}

 

 I hope you can help me out.

 

[Ivan Danchev]

Hello,

Please find attached a sample project with alphabetical sorting of the transferred implemented. Note the RadListBox SortItems() method, which is called through the Sort() method when transferring an Item.

The Telerik dll files are removed from the Bin folder, in order not to exceed the maximum allowed attachment size.

Regards,
Ivan Danchev
Telerik

 

 

[cesar]

Thank you for your sample. But I would like to use client side, instead of postback. And make the page much faster to use.

Is there a way that I could sort items on client side?

[Ivan Danchev]

Hello,

If you want to use the sorting you have implemented you have to make a small modification to your transferItem function - instead of using the insert() client side method you should use the transferItem() method, which will make sure the item is transferred to instead of cloned in the target RadListBox:

lbTarget.transferItem(item, lbSource, lbTarget);

Regards,
Ivan Danchev
Telerik