Sorting radcombobox in client side

8 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. 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
  4. 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
  5. Sunil
    Sunil avatar
    235 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;
    }

  6. Ivan Danchev
    Admin
    Ivan Danchev avatar
    873 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
  7. Kushan Shah
    Kushan Shah avatar
    17 posts
    Member since:
    Jul 2006

    Posted 03 Jan Link to this post

    Hi,

    Our requirement below : 
    When user selects multiple checkbox it will appear in Combo Box itself. When we select options in Radcombobox and close the drop down and open it again, the selected items should be on top position in display order (Change position) and once it is deselected, it should set at same position as it was earlier. The requirement behind this is when there is long drop down, user does not have to scroll till bottom, they can see what he has selected once they open the drop down.

    My code RadComboBox here :

    <telerik:RadComboBox ID="RadComboBox2" runat="server"
                                                                OnClientDropDownOpened="OnClientDropDownOpening"
                                                                OnClientItemChecked="OnClientItemChecked"
                                                                AutoPostBack="true"
                                                                CheckBoxes="true"
                                                                EnableCheckAllItemsCheckBox="true"
                                                                Height="70px">
                                                                <Items>
                                                                    <telerik:RadComboBoxItem Text="test1" Value="1" />
                                                                    <telerik:RadComboBoxItem Text="test2" Value="2" />
                                                                    <telerik:RadComboBoxItem Text="test3" Value="3" />
                                                                    <telerik:RadComboBoxItem Text="test4" Value="4" />
                                                                    <telerik:RadComboBoxItem Text="test5" Value="5" />
                                                                    <telerik:RadComboBoxItem Text="test6" Value="6" />
                                                                    <telerik:RadComboBoxItem Text="test7" Value="7" />
                                                                    <telerik:RadComboBoxItem Text="test8" Value="8" />
                                                                    <telerik:RadComboBoxItem Text="test9" Value="9" />
                                                                    <telerik:RadComboBoxItem Text="test10" Value="10" />
                                                                    <telerik:RadComboBoxItem Text="test11" Value="11" />
                                                                </Items>
                                                            </telerik:RadComboBox>

     

    Thank you for your help.

  8. Ivan Danchev
    Admin
    Ivan Danchev avatar
    873 posts

    Posted 04 Jan Link to this post

    Hello Kushan Shah,

    The sorting you describe will require custom implementation, since it defers from the sorting supported by the ComboBox by default: ascending and descending. You will have to implement your own logic in order to achieve the desired behavior. You can see the following documentation article, which shows and example of custom sorting implementation. 

    Regards,
    Ivan Danchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top