Sorting the items that are appearing in select dropdown list

4 posts, 0 answers
  1. developer
    developer avatar
    58 posts
    Member since:
    Nov 2015

    Posted 22 Jul Link to this post

    I'm giving custom templates option in kendo select drop down where I need to sort the values ie., here names in ascending or descending order.

    Here is my code in customOptions

     

                $scope.customOptions = {
                    placeholder: "Select employee...",
                    valuePrimitive: true,
                    autoBind: false,
                     itemTemplate: '<span class="k-state-default">' +
                    '<img src="#:data.imagePath#" alt="edit" width="24px" height= "24px" /></span>' +
                    '</span>&nbsp;&nbsp;' +
                    '<span class="k-state-default" >#: data.name #</span>',
                    tagTemplate: '<span class="selected-value">' +
                    '<img src="#:data.imagePath#" alt="edit" width="24px" height= "24px" /></span>' +
                    '</span>' +
                    '<span>#:data.name#</span>'
                }

     

    I tried to give k-sort='asc' in my select dropdown but it didn't worked out..

     <select class="employeeMultiSelect " kendo-multi-select k-ng-model="selectedEmployees" k-data-text-field="'name'"
                    k-data-value-field="'id'" k-data-source="employeeList" k-options="customOptions" k-sort='asc'
                    k-rebind="customOptions"></select>

     

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    349 posts

    Posted 26 Jul Link to this post

    Hi,

    You can achieve the desired effect by configuring the dataSource of the Kendo UI DropDownList to be sorted by the desired field in the desired direction via the dataSource.sort option:

    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-sort

    You can also sort the items programmatically, after the widget has been initialized, via the dataSource.sort() method, passing it the same object with field and dir properties, as for the already mentioned sort option.

    I have prepared a simple dojo demonstrating both approaches:

    http://dojo.telerik.com/oDAfA

    The "k-sort" is ignored as there is no "sort" as the DropDownList does not have a "sort" configuration option.

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. developer
    developer avatar
    58 posts
    Member since:
    Nov 2015

    Posted 27 Jul in reply to Dimiter Topalov Link to this post

    Thanks for the reply Dimiter Topalov.

    I wanted to try sorting on the HTML template and have given k-data-source="{data:productsDataSource,sort:{field:'ProductName',dir:'asc'}}" .It is sorting the list but the dropdown gets hanged if there is too many data.The performance is very slow.Can you suggest any improvements on HTML side sorting select drop down.

    Please find the example here..

    sorting select drop down

     

  5. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    349 posts

    Posted 29 Jul Link to this post

    Hello,

    The provided example has angular JavaScript errors, caused by entering an endless loop (thus the short delay). In general, sorting of the items can become an expensive procedure, depending on their number, but should not be a problem for practical purposes (several hundred items).

    The dataSource.sort is a configuration option of the dataSource, and it does not matter whether you will pass it in the markup like this:

    <select kendo-drop-down-list ...
    k-data-source="{type: 'odata',sort: {field: 'ProductName',dir: 'asc'},serverFiltering: true,transport: {read: {url: '//demos.telerik.com/kendo-ui/service/Northwind.svc/Products',}}}"
    ...

    or like this:

    <select kendo-drop-down-list ...
    k-data-source="someDataSource"...

    ... where someDataSource is a scope variable, representing a dataSource configuration:

    $scope.someDataSource = {
              transport: {
                read: {
                  ...
                }
              },
              sort: {
                field: 'ContactName',
                dir: 'asc'
              }
            };

    I have modified the initial dojo example to illustrate setting the whole data-source configuration in the markup:

    http://dojo.telerik.com/oDAfA/2

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top
Kendo UI is VS 2017 Ready