Sorting radcombobox in client side

6 posts, 0 answers
  1. saravanan k
    saravanan k avatar
    88 posts
    Member since:
    Mar 2010

    Posted 20 Jul 2010 Link to this post

    Hi All,

                  Is it possible to sort the radcombobox through client side script. I browsed regarding this, but not getting much information. Please help with few code snippets.

    Regards,
    Saravanan K
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Jul 2010 Link to this post

    Hello Saravanan,

    One suggestion is calling ajaxRequest to sort the items and call the SortItems() method of the combobox from server.

    aspx:
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadComboBox1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadComboBox Sort="Ascending" HighlightTemplatedItems="True" ID="RadComboBox1"
        runat="server" DataSourceID="SqlDataSource1" DataTextField="EmployeeName" DataValueField="EmployeeID">
    </telerik:RadComboBox>
     
    <input id="Button2" type="button" value="Sort client-side" onclick="sortCombo();" />


    javascript:
    <script type="text/javascript">
        function sortCombo() {
            $find("<%=RadAjaxManager1.ClientID%>").ajaxRequest('sortCombo');
        }
    </script>


    cs:
    protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
    {
        RadComboBox1.SortItems();
    }


    -Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Leif
    Leif avatar
    3 posts
    Member since:
    Sep 2010

    Posted 05 Dec 2011 Link to this post

    Hi Telerik Fans,
    I have a project where I am re-writing one RadComboBox2, based on the value of another RadComboBox1. In addition, the list of values for the RadComboBox2 are from a web service, and so they are not sorted alphabetically. Also all of this must be accomplished without a post back.

    So, though it is 6 months late, I thought I might post my solution here, so some future wayward dev, may find their way here and find this useful. If there is a better way than this, I couldn't find it, so I wrote my own.
    This is a completely client side RadComboBox sort using the Telerik Client Side API.

    function sortRcb(rcb) {
        rcb.trackChanges();
        var rcbItems = rcb.get_items();
     
        var tempArray = new Array();
        for (var i = 0; i < rcbItems.get_count(); i++) {
            tempArray[i] = new Array();
            tempArray[i][0] = rcbItems.getItem(i).get_text();
            tempArray[i][1] = rcbItems.getItem(i).get_value();
        }
        tempArray.sort();
        rcbItems.clear();
        for (var i = 0; i < tempArray.length; i++) {
            var comboItem = new Telerik.Web.UI.RadComboBoxItem();
            comboItem.set_text(tempArray[i][0]);
            comboItem.set_value(tempArray[i][1]);
            rcbItems.insert(i, comboItem);
        }
        rcb.commitChanges();
        return;
    }

    Usage:
    var rcb = $find("<%= RadComboBox1.ClientID %>");
    sortRcb(rcb);

    Enjoy
  5. Shiva
    Shiva avatar
    2 posts
    Member since:
    Dec 2012

    Posted 22 Oct 2014 in reply to Leif Link to this post

    Hi Leif,

    Than you very much for your solution, I needed to implement custom sorting on client side and your solution was the best one; i did same thing removed all items and then added by order i wanted.

    Thank you,
    Jay
  6. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 31 Oct 2015 Link to this post

    I found the client-side sorting method in one of the answers to not work as expected. So I changed it and came up with following method, that I found worked perfectly.  The second parameter of sortOrder can be either 'asc' or 'desc'.

     

    function sortByItemText(comboBox, sortOrder) {
     
        comboBox.trackChanges();
     
        var items = comboBox.get_items();
     
        var tempArray = items._array;
     
        if (sortOrder === "asc") {
            tempArray.sort(function(a, b) {
                if (a && b && a.get_text() > b.get_text()) return 1;
                if (a && b && a.get_text() === b.get_text()) return 0;
                if (a && b && a.get_text() < b.get_text()) return -1;
            });
        } else {
            tempArray.sort(function(a, b) {
                if (a && b && a.get_text() > b.get_text()) return -1;
                if (a && b && a.get_text() === b.get_text()) return 0;
                if (a && b && a.get_text() < b.get_text()) return 1;
            });
     
        }
     
        items.clear();
     
        for (var i = 0; i < tempArray.length; i++) {
            var comboItem = new Telerik.Web.UI.RadComboBoxItem();
            comboItem.set_text(tempArray[i].get_text());
            comboItem.set_value(tempArray[i].get_value());
            items.insert(i, comboItem);
        }
        comboBox.commitChanges();
        return;
    }

  7. Ivan Danchev
    Admin
    Ivan Danchev avatar
    834 posts

    Posted 04 Nov 2015 Link to this post

    Hello,

    Thank you for sharing your sorting method with the community.

    Regards,
    Ivan Danchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017