Client Transfer in RadListBox not saving after post back

7 posts, 0 answers
  1. cesar
    cesar avatar
    9 posts
    Member since:
    Apr 2015

    Posted 15 Apr 2015 Link to this post

    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>

  2. cesar
    cesar avatar
    9 posts
    Member since:
    Apr 2015

    Posted 16 Apr 2015 Link to this post

    Anyone?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    829 posts

    Posted 17 Apr 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  5. cesar
    cesar avatar
    9 posts
    Member since:
    Apr 2015

    Posted 17 Apr 2015 Link to this post

    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.

     

  6. Ivan Danchev
    Admin
    Ivan Danchev avatar
    829 posts

    Posted 21 Apr 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  7. cesar
    cesar avatar
    9 posts
    Member since:
    Apr 2015

    Posted 21 Apr 2015 Link to this post

    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?

  8. Ivan Danchev
    Admin
    Ivan Danchev avatar
    829 posts

    Posted 23 Apr 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017