This is a migrated thread and some comments may be shown as answers.

When an option is selected by typing in the dropdown, all items are highlighted as if selected, and the last option is selected

7 Answers 886 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 02 Jun 2016, 03:25 PM

We are using a Kendo comboBox control, which behaves correctly if an option is selected by opening the dropdown list and clicking the option. However, the following behavior is observed when selecting an option by typing in the dropdown box:

-Start typing: a small list of corresponding options appears

-Select one of the options in the list: the seleted option appears in the dropdown box. So far the behavior is correct.

-Click the caret of the dropdown to expand the list of options.This has the result that the selected option changes to the last option of the dropdown list, and all the options are highlighted as if selected. Inspecting the HTML elements shows they all have class k-item and k-state-selected. 

What is causing this behavior? Shouldn't only one item at a time have the class k-state-selected? Is there some option that has to be set? I would be thankful for any help on this.

We are using Kendo UI v2016.1.322, Internet Explorer 11.0.9600.18314, Windows Server 2008 R2 Enterprise.

The HTML uses this directive as shown:

<sc-combo-box type="availYear" sc-filters="AvailYear" placeholder="Select Avail Year" default-value="'2016'"></sc-combo-box>

The comboBox control is built in the directive as follows:

var controller = function ($scope, $attrs, data) {
            var vm = this;
            vm.cbUUID = '';
            vm.type = '';
            vm.defaultValue = $scope.$parent.$eval($attrs['defaultValue']);.

:

:.

            vm.render = function (element, placeholder, type, scFilters) {

                vm.cbUUID = helper.guid().toString();
                vm.filterNames = scFilters.toString();
                vm.filterNames = scFilters.toString();               

                // establish new id for combobox
                element.attr('id', vm.cbUUID);

                // create datasource, establish options used when creating combobox and combine into one 'options' object
                var options = helper.concatObjects(vm.buildDataSource(vm.filterNames), {
                    placeholder: placeholder,
                    value: vm.defaultValue,      
                    filter: 'contains'
                });

                // established combobox options
                element.kendoComboBox(options);
            };
        };

        var directive = {
            link: link,
            require: 'scComboBox',
            restrict: 'E',
            replace: true,
            scope: {
                defaultValue: '='
            },
            controller: ['$scope', '$attrs', 'data', controller],
            template: '<select id="scComboBox" style="width: 100%"></select>'
        };

        return directive;

        function link($scope, $element, $attrs, ctrls) {

            ctrls.render($element, $attrs.placeholder, $attrs.type, $attrs.scFilters);       
        }        
    }

7 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 06 Jun 2016, 11:11 AM
Hello Kevin,

You are right about that only a single selection from the list of items should be allowed.

We could not reproduce the described issue, based on the provided information. Please check out the following demo that works as expected, and apply the necessary adjustments to your implementation:

http://demos.telerik.com/kendo-ui/combobox/angular

If the problem persists, please send us an isolated runnable project, demonstrating the undesired behavior, similar to the aforementioned dojo, or modify the dojo until the problem is reproduced, so we can inspect it further.

Thank you in advance.

Regards,
Dimiter Topalov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kevin
Top achievements
Rank 1
answered on 13 Jun 2016, 03:59 PM

Hello,

Thank you for your reply. The linked demo that you provided does not work; in the Chrome console, it has 17 errors.This is also the case for any of the Kendo demos that I looked at under http://demos.telerik.com/kendo-ui. I believe the demos need to be updated.

0
Dimiter Topalov
Telerik team
answered on 15 Jun 2016, 11:32 AM
Hello Kevin,

There might have been some temporary connectivity issue, but all of the demos work as expected on our end:

http://demos.telerik.com/kendo-ui/

http://demos.telerik.com/kendo-ui/combobox/angular

Can you try again, and if the problem persists, please send us a screenshot of the JavaScript errors you are getting in the console.

Let me know if you need further assistance.

Regards,
Dimiter Topalov
Telerik
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
0
Kevin
Top achievements
Rank 1
answered on 21 Jun 2016, 09:40 PM

Hello, 

The demos do not work for me. I have attached screenshots of the console errors.

0
Dimiter Topalov
Telerik team
answered on 23 Jun 2016, 09:48 AM
Hi Kevin,

The errors suggest that there is some problem loading the jQuery library on your end. You can check the discussed demo in the following dojo:

http://dojo.telerik.com/AyelA

Let me know, if you have any troubles opening it.

Regards,
Dimiter Topalov
Telerik
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
0
Stefan
Top achievements
Rank 1
answered on 04 Jul 2017, 04:28 PM
I had a similar issue with both the kendo dropdownlist and kendo combobox component. Basically, I found that I was referencing the incorrect ID of my datasource through my dropdownlists dataValueField field. Once i identified the differences I no longer had this problem.
0
Dimiter Topalov
Telerik team
answered on 05 Jul 2017, 05:53 AM
Hello Stefan,

Thank you for sharing your experience with the community.

I am closing this thread now, but it can be always reopened if necessary.

Regards,
Dimiter Topalov
Progress Telerik
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.
Tags
ComboBox
Asked by
Kevin
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Kevin
Top achievements
Rank 1
Stefan
Top achievements
Rank 1
Share this question
or