jQuery UI Widgets › Forums › Lists › DropDownList › jqxDropdownlist selectedIndex ko issue

Tagged: , , , , , ,

This topic contains 4 replies, has 2 voices, and was last updated by  Hristo 8 years, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    jqxDropdownlist selectedIndex ko issue Posts
  • July 26, 2016 at 2:40 pm jqxDropdownlist selectedIndex ko issue #86073

    ddobarro
    Participant

    Hello,

    I am using the jqxdropdownlist with knockout and i found a problem in a specific scenario where it is not updating the selectedIndex property of my viewmodel.

    Replication:
    1- Open the dropdown
    2- Make a selection with the arrows keys
    3- Hit Tab key or just use the mouse

    Result:
    The selection does not refresh the selectedIndex property.

    If i do the same with just the dropdown without using knockout, I found that the ‘change’ event is never triggered when doing the same steps above. But the ‘select’ event is triggered as soon as i start using the arrows keys (keyboard up/down).

    I would like to continue using knockout.js to avoid subscribing to all the dropdowns in the ‘select’ event and then update the viewModel property manually. I need to know if there is another way to make it work using ko.

    Regards,

    David

    July 26, 2016 at 2:53 pm jqxDropdownlist selectedIndex ko issue #86075

    ddobarro
    Participant

    Sample Code:

    <html lang="en">
<head>
    <title id="Description">Integration of jqxDropDownList with Knockout</title>
    <link rel="stylesheet" href="./jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="./scripts/jquery.min.js"></script>
    <script type="text/javascript" src="./scripts/knockout.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxknockout.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // View Model
            var listModel = function (items) {
                this.items = ko.observableArray(items);
                this.selectedIndex = ko.observable(1);

                // gets the selected index.
                this.getIndex = function () {
                    alert("Selected Index: " + this.selectedIndex());
                }		

				this.selectedIndex.subscribe(function (index) {
					alert("Selection Changed! Index: " + index);
				});		
            };

            ko.applyBindings(new listModel(["Caffé Latte", "Cortado", "Espresso"]));
			
			
			//Simple Sample
			$("#list2").jqxDropDownList({ source: ["Caffé Latte", "Cortado", "Espresso"], width: '200px', height: '25px'});
			$('#list2').on('change', function (event){
				alert("Event change triggered! Index: " + event.args.index);
			});
			$('#list2').on('select', function (event){
				alert("Event select triggered! Index: " + event.args.index);
			});
		});
    </script>
</head>
<body style='font-size: 13px; font-family: Verdana;' class='default'>
	<div>
        <div>
            <p>Simple Sample</p>
            <div id="list2">
            </div>
        </div>
    </div>
	
	</br>
	
    <div>
        <div>
            <p>Ko Sample</p>
            <div id="list" data-bind="jqxDropDownList: {source: items, selectedIndex: selectedIndex, autoDropDownHeight: true, height: 25, width: 200,}">
            </div>
        </div>
        <div style="margin-top: 10px;">
            <button data-bind="click: getIndex, jqxButton: {}" id="getButton">
                Get Selected Index</button>
        </div>
    </div>
</body>
</html>
    July 27, 2016 at 8:14 am jqxDropdownlist selectedIndex ko issue #86091

    Hristo
    Participant

    Hello David,

    We test this example with latest version and work correctly.
    When choose item triggered change event and when click on ‘Get Selected Index’ shows same index.
    Please, try to update to newest version.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    August 5, 2016 at 2:02 pm jqxDropdownlist selectedIndex ko issue #86367

    ddobarro
    Participant

    Hello Hristo.

    I downloaded the latest version 4.1.2 and still not working correctly. Let me explain with more details again:

    If you do the usual selection with the mouse or with the keyboard arrows (up/down) and then press the ‘Enter’ button on the keyboard works fine. But the problem happens when you do the next steps:

    1) Open the dropdown with the mouse
    2) Make the selection with the arrows keys (up/down)
    3) Press the ‘Tab’ button on the keyboard or click the same item selected with the mouse

    After step 3 in both cases the dropdown it is closed automatically and the expected behavior for a user is that the current selection changes, but that is not what is happening behind the scenes.

    In the first dropdown without using ko you can see that doing the selection with the arrows keys the ‘select ‘ event it is triggered but not the ‘change’ event. And I think that it is a problem, because I guess the way that the ko binding works, it is with the ‘change’ event, not with the ‘select’. If you try a different selection steps, both events ‘select’ and ‘change’ are triggered and that is what i am expecting with the previous steps (1,2,3).

    I am using the jqxdropdownlist in a search page of a real application using ko binding. But my ko object it is never updated when I replicate the selection with the previous steps. Then later when I click my search button, I am expecting that my ko object have the latest changes on its properties, but that never happens and my search function it is not receiving the latest index selected for that dropdwon.

    I know that this is not the most common scenario for select an item: clicking TAB button on an opened dropdown after selection with the arrows keys, but in whatever case should work. The only solution I found so far it is calling the functions ‘getSelectedItem’ or ‘getSelectedIndex’ for manually update my ko object before pass it to the search function, but this is something I should not be doing when I am using knockout.js .

    Hope this time it is more clear the issue.

    Regards,

    David

    August 15, 2016 at 11:17 am jqxDropdownlist selectedIndex ko issue #86538

    Hristo
    Participant

    Hello David,

    The described behavior is correct when click ‘Tab’ this will close the DropDownList.
    You could trigger to change and/or select events like normal DropDownList. Could read in one another theme.
    Please, take a look this demo this could be useful too:
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxknockout/dropdownlistwithdataadapter.htm

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.