Sorting the items that are appearing in select dropdown list

[developer]

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>

 

[Dimiter Topalov]

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

 

 

[developer]

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

 

[Dimiter Topalov]

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

[Tom Daria]

Dimiter:

 

I'll take a look and let you know.  I was on another assignment last week.