jQWidgets Forums

This topic contains 2 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 3 months ago.

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

Author

checkItem not working with group if source array is not in order Posts

January 27, 2014 at 7:36 pm checkItem not working with group if source array is not in order #48461

Participant

The example below does not work in jqWidgets 3.1.0 for me.
My operating system is OSX 10.9 and browser is Chrome 32.0.1700.77
The wrong item gets checked. Looking in a debugger the item that is returned appears to be correct but the index in that item is “5”, I would have expected it to be “7”.

Here is a dump from the debugger for the returned item:
checkBoxElement: div#jqxWidget628bfe70.chkbox
checkBoxInstance: a.jqx.define.b.(anonymous function)
checked: false
disabled: false
element: span.jqx-listitem-state-normal.jqx-item.jqx-rc-all
group: “B Category”
groupHtml: “”
hasThreeStates: true
height: 24
highlighted: false
html: “”
index: 5
initialTop: 240
isGroup: false
label: “Breve”
left: 0
originalItem: Object
selected: false
title: “”
top: 240
value: “Breve”
visible: true
visibleIndex: 7
width: 153

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
     <script type="text/javascript" src="../scripts/jquery-1.10.2.min.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/jqxcheckbox.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
    	function getTheme()
    	{
    		return "classic";
    	}

        $(document).ready(function () {
                var theme = "";
                var source = [
                    {label: "Affogato",value: "Affogato",group: "A Category"},
                    {label: "Americano",value: "Americano",group: "A Category"},
                    {label: "Café Bombón",value: "Café Bombón",group: "C Category"},
                    {label: "Café au lait",value: "Café au lait",group: "C Category"},
                   {label: "Bicerin",value: "Bicerin",group: "B Category"},
                    {label: "Breve",value: "Breve",group: "B Category"},
                     {label: "Caffé Corretto",value: "Caffé Corretto",group: "C Category"},
                    {label: "Café Crema",value: "Café Crema",group: "C Category"}
		        ];
                // Create a jqxListBox
                $("#listbox").jqxListBox({ width: 200, source: source, checkboxes: true, height: 250, theme: theme });
                // Check several items.
                $("#listbox").jqxListBox('checkIndex', 0);
                $("#listbox").jqxListBox('checkIndex', 5);
                $("#listbox").on('checkChange', function (event) {
                    var args = event.args;
                    if (args.checked) {
                        $("#Events").text("Checked: " + args.label);
                    }
                    else {
                        $("#Events").text("Unchecked: " + args.label);
                    }
                    var items = $("#listbox").jqxListBox('getCheckedItems');
                    var checkedItems = "";
                    $.each(items, function (index) {
                        if (index < items.length - 1) {
                            checkedItems += this.label + ", ";
                        }
                        else checkedItems += this.label;
                    });
                    $("#CheckedItems").text(checkedItems);
                });
 
                var formItem = "Breve";
                var item = $("#listbox").jqxListBox('getItemByValue', formItem);
                $("#listbox").jqxListBox('checkItem', item);
            });
        </script>
        <div id='jqxWidget'>
            <div id="listbox">
            </div>
            <div style="font-size: 13px; font-family: Verdana; margin-top: 20px;" id="Events">
            </div>
            <div style="font-size: 13px; font-family: Verdana; margin-top: 10px;" id="CheckedItems">
            </div>
        </div>
    </div>
</body>
</html>

Regards,
Matt

January 27, 2014 at 7:43 pm checkItem not working with group if source array is not in order #48463

mattg411

Participant

In addition I did work around the problem by using the checkItem method and the visibleIndex property

                
var formItem = "Breve";
var item = $("#listbox").jqxListBox('getItemByValue', formItem);
$("#listbox").jqxListBox('checkIndex', item.visibleIndex);

January 27, 2014 at 8:34 pm checkItem not working with group if source array is not in order #48476

Peter Stoev

Keymaster

Hi matth411,

I am glad that you solved your problem. However, the item’s index property in general is not associated to its display in the widget. If you need to select/unselect items, you can use the “selectItem”, “unselectItem” methods and select them by value.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

Author

Posts

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

You must be logged in to reply to this topic.