jQWidgets Forums

Forum Replies Created

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Posts

August 5, 2016 at 2:02 pm in reply to: jqxDropdownlist selectedIndex ko issue 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

July 26, 2016 at 2:53 pm in reply to: jqxDropdownlist selectedIndex ko issue 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>

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)