jQWidgets Forums

Tagged: bindingcomplete, getItemByValue, jqxListBox, ListBox

This topic contains 7 replies, has 2 voices, and was last updated by realtek 11 years, 5 months ago.

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

Author

getItemByValue Posts

October 21, 2013 at 9:54 am getItemByValue #31098

realtek

Participant

Hi,

Does ‘getItemByValue’ actually get the Item by the “Value” field or is this referring to the “label”?

I have tried this with a “value” I know exists but it returns undefined.

var formItem = "145";
var item = $("#fieldTree").jqxListBox('getItemByValue', formItem);
$("#fieldTree").jqxListBox('checkItem', item);

Thanks

October 21, 2013 at 10:11 am getItemByValue #31101

realtek

Participant

hmm, this is very odd.. It definitely isn’t getting the item. It returns undefined every time.

I have also made sure this executed after the tree is loaded but the same issue occurs.

Am I doing something wrong?

October 21, 2013 at 10:36 am getItemByValue #31102

Dimitar

Participant

Hello realtek,

There is nothing wrong with the code you posted. Here is a working example using getItemByValue, based on the demo Checkboxes:

<!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/gettheme.js"></script>
    <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">
            $(document).ready(function () {
                var theme = "";
                var source = [
                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Breve",
                    "Café Bombón",
                    "Café au lait",
                    "Caffé Corretto",
                    "Café Crema",
                    "Caffé Latte",
                    "Caffé macchiato",
                    "Café mélange",
                    "Coffee milk",
                    "Cafe mocha",
                    "Cappuccino",
                    "Carajillo",
                    "Cortado",
                    "Cuban espresso",
                    "Espresso",
                    "Eiskaffee",
                    "The Flat White",
                    "Frappuccino",
                    "Galao",
                    "Greek frappé coffee",
                    "Iced Coffee",
                    "Indian filter coffee",
                    "Instant coffee",
                    "Irish coffee",
                    "Liqueur coffee"
		        ];
                // 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', 1);
                $("#listbox").jqxListBox('checkIndex', 2);
                $("#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 = "Irish coffee";
                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>

Please make sure you have the latest version of jQWidgets (3.0.3). If you continue to experience the same issue even after the update, please post a larger sample code for us to test.

Best Regards,
Dimitar

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

October 21, 2013 at 10:54 am getItemByValue #31103

realtek

Participant

Hi Dimitar,

I just tested your above code on jQWidgets 3.0.3 and it is not working.

I copied and pasted it all into a new .html file and copied all the .js and .css files mentioned but it fails to ‘check’ the boxes.

Does this work on your system?

Thanks

October 21, 2013 at 11:08 am getItemByValue #31104

realtek

Participant

Hi Dimitar,

hmm, sorry it seems it is working on your scenario. I had an issue with the ‘images’ so no checkmark was displaying but the text is correct.

Let me look through the code again and try reproducing in my code.

Thanks

October 21, 2013 at 11:47 am getItemByValue #31106

realtek

Participant

Hi Dimitar,

yes it looks like this could be a defect.

As soon as you change your working sample above to use a “dataAdapter” and provide the data as JSON and using displayMember & valueMember when initializing, it fails to check the item.

Here is my modified code (please note I have changed the URL of the .js files, and also added the ‘data’ one.

<!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="assets/jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="assets/jqwidgets/scripts/gettheme.js"></script>
    <script type="text/javascript" src="assets/jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqwidgets/jqxcheckbox.js"></script>
	      <script type="text/javascript" src="assets/jqwidgets/jqwidgets/jqxdata.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = "";
				
			var url = 'testdata.txt';
				  var source =
                {
                    datatype: "json",
                    datafields: [
             { name: 'name'}
           
                    ],
					url:url
                    
                };
            
                // Create a jqxListBox
				var dataAdapter = new $.jqx.dataAdapter(source);
                $("#listbox").jqxListBox({ width: 200, source: dataAdapter, displayMember : 'name', valueMember : 'name', checkboxes: true, height: 250, theme: theme });
                // Check several items.
                $("#listbox").jqxListBox('checkIndex', 0);
                $("#listbox").jqxListBox('checkIndex', 1);
                $("#listbox").jqxListBox('checkIndex', 2);
                $("#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 = "Irish coffee";
                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>

And here is my source data:

[{
 "id": "1",
 "name": "Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": "370",
 "totalfat": "16g",
 "protein": "14g"
 }, {
 "id": "2",
 "name": "Irish coffee",
 "type": "Chocolate Beverage",
 "calories": "440",
 "totalfat": "16g",
 "protein": "13g"
}, {
 "id": "3",
 "name": "Salted Caramel Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": "450",
 "totalfat": "16g",
 "protein": "13g"
}]

October 21, 2013 at 12:09 pm getItemByValue #31111

Dimitar

Participant

Hi realtek,

This is not a defect. When you call the getItemByValue method, the data has not yet been bound to the listbox and so there is no item with the given value. To rectify this, please call the method on the bindingComplete event, i.e.:

$("#listbox").on("bindingComplete", function () {
    var formItem = "Irish coffee";
    var item = $("#listbox").jqxListBox('getItemByValue', formItem);
    $("#listbox").jqxListBox('checkItem', item);
});

Best Regards,
Dimitar

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

October 21, 2013 at 1:37 pm getItemByValue #31118

realtek

Participant

Thank you Dimitar, this resolved my issue.

I thought placing the code after the initialization of the ListBox would have had the same affect but thinking about it ‘no’ because its all loaded together.

It seems logical now..

Thanks

Author

Posts

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

You must be logged in to reply to this topic.