jQWidgets Forums

Tagged: checkbox, DropDownList, getItemByValue, jqxDropDownList

This topic contains 6 replies, has 2 voices, and was last updated by Nadezhda 10 years, 4 months ago.

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

Author

GetItemByValue method returns incorrect data Posts
November 7, 2014 at 10:44 pm GetItemByValue method returns incorrect data #62413

wmklaborn
Participant

When building a dropdownlist using a data source with an object with value 0 that isn’t the first object in the datasource, the resulting GetItemByValue returns the incorrect list item. See the below code example for reference. When clicking the button in the example below, you should receive the list box item labeled ‘Cancelled’ but instead receive the one labeled ‘Pending’.

<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>DropdowList test page</title>

<link rel=”stylesheet” href=”jqwidgets-ver3.5.0/styles/jqx.base.css” type=”text/css”/>
<!– add the jQuery script –>
<script type=”text/javascript” src=”jqwidgets-ver3.5.0/scripts/jquery-2.0.2.min.js”></script>
<!– add the jQWidgets framework –>
<script type=”text/javascript” src=”jqwidgets-ver3.5.0/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets-ver3.5.0/jqxdata.js”></script>
<!– add one or more widgets –>
<script type=”text/javascript” src=”jqwidgets-ver3.5.0/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets-ver3.5.0/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets-ver3.5.0/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets-ver3.5.0/jqxdropdownlist.js”></script>
<!– add one of the jQWidgets styles –>
<link rel=”stylesheet” href=”jqwidgets-ver3.5.0/styles/jqx.darkblue.css” type=”text/css” />
</head>
<body>
<div id=’content’>
<script type=”text/javascript”>
$(document).ready(function () {

var movesStatusTypes = [
{“id”:4,”code”:”Cancelled”,”desc”:”Cancelled”},
{“id”:3,”code”:”Completed”,”desc”:”Completed”},
{“id”:5,”code”:”OnHold”,”desc”:”OnHold”},
{“id”:1,”code”:”Open”,”desc”:”Open”},
{“id”:0,”code”:”Pending”,”desc”:”Pending”},
{“id”:2,”code”:”Working “,”desc”:”Working”}
];
var source;
var datasource;
var getSource = function () {
source = {
localdata: movesStatusTypes,
datafields: [{name: ‘desc’},
{name: ‘id’}],
datatype: ‘json’
};
return new $.jqx.dataAdapter(source);
};
options = {
width: ‘100%’,
height: ’25px’,
checkboxes: true,
placeHolder: ‘Select’,
displayMember: ‘desc’,
valueMember: ‘id’,
enableHover: false,
source: getSource(),
dropDownHorizontalAlignment: ‘left’
};
// Create a jqxDropDownList
$(“#jqxdropdownlist”).jqxDropDownList(options);

$(“#jqxButton”).jqxButton({ width: ‘150’, height: ’25’});
$(“#jqxButton”).bind(‘click’, function () {
var item = $(“#jqxdropdownlist”).jqxDropDownList(‘getItemByValue’, 4);
alert(item.label + ‘ Button Clicked’);
});
});
</script>
<div id=’jqxdropdownlist’>
</div>
<div >
<input type=”button” value=”Select value 4″ id=’jqxButton’/>
</div>
</div>
</body>
</html>

Thanks,
wmklaborn

November 10, 2014 at 10:11 am GetItemByValue method returns incorrect data #62461

Nadezhda
Participant

Hello wmklaborn,

Here is an example which shows how to use ‘GetItemByValue’ method and returned data is correct: http://jsfiddle.net/1hg6ymn6/.

Best Regards,
Nadezhda

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

November 10, 2014 at 9:10 pm GetItemByValue method returns incorrect data #62488

wmklaborn
Participant

Thanks for your response, but that doesn’t solve the issue with the code that I have. I need to use the id as the value, not the desc. And when the id=0 is used, there is an error when the data adapter is built and there is no record for 0 in the me.itemsByValue record of the listbox. In my example above there are 6 objects to populate the listbox, but when I debug the itemsByValue object of the listbox it only has 5 keys: 1 thru 5. There is no 0, thus the reason that my object can’t be found when calling (‘getItemByValue’, 0). In the above example, if I add a button for every value 0-5 each button will return the following:
0 – returns nothing, INCORRECT, because it should return Pending
1 – Open
2 – Working
3 – Completed
4 – Pending – INCORRECT, because it should return Cancelled
5 – OnHold

Your help is appreciated.

wmklaborn

November 11, 2014 at 6:48 am GetItemByValue method returns incorrect data #62506

Nadezhda
Participant

Hi wmklaborn,

In the following example the id is used as the value and all six objects are displayed correctly: http://jsfiddle.net/4e49bx49/.

Best Regards,
Nadezhda

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

November 18, 2014 at 3:24 pm GetItemByValue method returns incorrect data #62980

wmklaborn
Participant

Thanks for the example. Yes, that example does work fine. It is when the data is sorted alphabetically that the list item with value=0 doesn’t work correctly. Can you run it with both sets of data, 1 sorted… 1 not sorted, and see what is going on in the sorted scenario?

Appreciate the help!

wmklaborn

November 18, 2014 at 3:26 pm GetItemByValue method returns incorrect data #62981

wmklaborn
Participant

Clarification on previous post…. It is when the data is sorted alphabetically on ‘desc’ field that the item with value=0 doesn’t work.

wmklaborn

November 19, 2014 at 1:17 pm GetItemByValue method returns incorrect data #63017
Nadezhda
Participant
Hi wmklaborn,

I suggest you to change your JSON data in part of id’s if you are using ‘getItemByValue’ method. Please, find the following example where is shown how you can do that.
```
<!DOCTYPE html>
<html lang="en">
<head>    
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.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/jqxdropdownlist.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //var url = "../sampledata/customers.txt";
            var data = [
                { "id": "4", "code": "Cancelled", "desc": "Cancelled" },
                { "id": "3", "code": "Completed", "desc": "Completed" },
                { "id": "5", "code": "OnHold", "desc": "OnHold" },
                { "id": "1", "code": "Open", "desc": "Open" },
                { "id": "0", "code": "Pending", "desc": "Pending" },
                { "id": "2", "code": "Working ", "desc": "Working" }
            ];
            // prepare the data
            var source = {
                datatype: 'json',
                localdata: data,
                datafields: [
                    { name: "desc" },
                    { name: "id" }
                ],
                async: false
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            // Create a jqxDropDownList
            $("#jqxDropDownList").jqxDropDownList({
                width: "100%",
                height: 25,
                source: dataAdapter,
                checkboxes: true,
                placeHolder: "Select",
                enableHover: false,
                dropDownHorizontalAlignment: "left",
                displayMember: "desc",
                valueMember: "id"
            });

            $("#jqxButton").jqxButton({
                width: 150,
                height: 25
            });
            $("#jqxButton").on('click', function () {
                var item = $("#jqxDropDownList").jqxDropDownList('getItemByValue', "0");
                alert(item.label + 'Button is clicked');
            });
        });
    </script>
</head>
<body>
    <div id="jqxDropDownList"></div>
    <div>
        <input type="button" value="Select value 4" id='jqxButton' />
    </div>
</body>
</html>
```
Best Regards,
Nadezhda

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

Posts

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

You must be logged in to reply to this topic.