简体   繁体   中英

Kendo multi-select with tab key selection

I am trying to implement a feature to select an item in kendo's multi-select control with server filtering. when user presses tab on the selected item. Here is my code of kepdown event:

if (e.keyCode === 9) {
       var selectedItem = multiSelect.current();

       if (selectedItem) {

            var selectedIndex = selectedItem.data("idx");

            if (selectedIndex >= 0) {

                var currentValue = multiSelect.value().slice();    
                var dataitems = multiSelect.dataSource.view();
                var selectedDataItem = dataitems[selectedIndex];

                multiSelect.dataSource.filter({});
                currentValue.push(selectedDataItem.relatedId);
                multiSelect.value(currentValue);

                multiSelect.trigger("change");
            }
         }
      }

But it works fine as long as I am searching in same data view ie lets say I select two values starting with Cloud and then I select a value starting with App then kendo will remove previous two values starting with Cloud and control will contain just one value selected at the last.

I debugged kendo's code that the issue in function _index of kendo because it finds value in dataSource.view

I have recreated the issue at http://dojo.telerik.com/OtAvi

Your code is not working because you have serverFiltering set to true in the dataSource:

dataSource: {
    type: "odata",
    serverFiltering: true,
    transport: {
        read: {
            url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
        }
    }
},

Since the data is being filtered on the server, the call multiSelect.dataSource.filter({}); is only clearing the already filtered data. With that said, when you call multiSelect.value(currentValue); , only the values from the currently filtered dataSource can be selected. This is causing the selection to only hold items from the current dataView.

Unless you have a strong reason not to, your easiest fix is to set serverFiltering set to false .

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM