kendo issues in

[pavan]

I am facing 2 problems in kendo multiselect dropdown for php-

1)How to sort the items which come in dropdown by alphabet.Even if we type a letter,the dropdown items should begin with that letter and show in a alphabetically sorted order.

 

2)when we click in kendo multiselect,dropdownlist should not appear below.It should appear only if we type a letter and the corresponding letter matches should appear.

Kendo multiselect code-

$(\"#selects\").kendoMultiSelect({
                placeholder: \"Key Skills\",
                dataTextField: 'text',
                dataValueField: 'value',
                dataSource: data,
                dataBound: onDataBound,
                filtering: onFiltering,
                deselect: onDeselect,
                select: onSelect,
                change: onChange,
                close: onClose,
                open: onOpen,
                filter: \"startswith\"

How to solve these issues?

[Petar]

Hello Pavan,

Please check this Dojo example, demonstrating all the things asked using data from the demo examples in our documentation.

• The alphabetical sort in the dropdown can be achieved by setting the sort configuration of the DataSoure. In the provided example we are doing this with the marked in yellow snippet: 

dataSource: {
  type: "odata",
  serverFiltering: true,
  sort: {
    field: "ProductName",
    dir: "asc"
  }

In this example, we are telling the DataSource to sort the ProductName field in ascending order. This field should be changed depending on the field in the DataSource by which we want the dropdown elements to be sorted. 

• To make the dropdown appear only when there is a match between the entered and the corresponding letter we can use the noDataTemplate configuration and set it to false. 

noDataTemplate: false

• Stopping the dropdown to appear on click is achieved with this part of the code:

open: function(e){
  var sender = e.sender;
  var input = sender.input;

  if(input.val().length === 0 || 'Select products...' === input.val()){
    e.preventDefault();
  }
},

What we do here is to check what is the value of the MultiSelect's input and preventing the opening of the dropdown. As it could be seen there is a code marked in yellow above. This text should be the same as the one set for the MultiSelect's placeholder. If your scenario the "Select products..." should be changed with "Key Skills".

• There is one last thing done in the Dojo example and it is to prevent the dropdown opening when the user writes something and then delete the entered data from the input. This prevention is done with the following snippet

multiselect.input.on("keyup", function(e){
  if($(e.target).val().length===0){
    multiselect.close();
  }
})

I hope that the above example and description resolve the submitted issues. If you have questions regarding the implementation, please let me know. 

Regards,
Petar
Progress Telerik