[realtekParticipant]

OK Thanks Dimitar, I actually just worked out my own solution that might help people!

//Automatically Set Page Height
var height = $(“#jqxgrid”).height()-128;
total = height/26;
size = Math.round(total);
$(“#jqxgrid”).jqxGrid({pagesize : size});

I have height – 128 because I have the toolbar enabled on my grid, so you need to remove all the around the possible area for rows.

Hope it helps someone!

Thanks

[realtekParticipant]

OK Dimitar, that didn’t quite work as it worked for some items but not others.

I found the issue with the “id” though. The ID field used MUST be in lowercase – i don’t know if this is a defect or not? – i can’t see it documented.

Basically my JSON returned “ID” not “id” and I was referencing “ID” everywhere correct as you can see above.

Anyway, changing my JSON to return “id” and using it in lowercase everywhere resolved the issue.

Is it supposed to be this way?

[realtekParticipant]

Hi Dimitar,

I have managed to resolve the issue. For some reason the ID field does not get populated.

If I change it to:

var type = dataAdapter.records[item.value - 1].type;

it seems to work fine.

Not sure whats going on here, do you have any idea’s? Either way it does seem to work and the tree gets populated as I expect.

Great work on the solution, very nicely done! BTW, what does the “- 1” do? Why does it need to subtract?

Thanks

[realtekParticipant]

Sorry Dimitar… I was binding to the “initialized” event after loading the Tree.

I moved this to before the Tree and it now fires.

However, my original issue still occurs?

[realtekParticipant]

Hi Dimitar,

“initialized” event doesn’t seem to get called? I’m not sure what i’m doing wrong! Thanks

var url = 'json/dba/tree.php';
   
var source = 
{
   datatype: "json",
   datafields:
 	[
 		{name : 'ID' },
		{name: 'PARENT'}, 
		{name: 'VALUE'},
		{name: 'NAME'},
		{name : 'type'}
	],
	id: 'ID',
	url: url,
	async: false
  };
	//Tree
	
				var dataAdapter = new $.jqx.dataAdapter(source);
                dataAdapter.dataBind();
                var records = dataAdapter.getRecordsHierarchy('ID', 'PARENT', 'items', [{name: 'VALUE', map: 'value'}, {name: 'NAME', map: 'label'}]);
                $('#Tree').jqxTree({allowDrag: false, allowDrop: false, source: records, height: '100%', width: '99%', theme: theme })
     
             	//var treeItems = $('#DBATree').jqxTree('getItems');
                //var firstItem = treeItems[0];
                //var firstItemElement = firstItem.element;
        				
				
				$('#Tree').on('initialized', function () {
					alert('test');
					$('#Tree').on('select', function (event) {
					var args = event.args;
                    var item = $('#Tree').jqxTree('getItem', args.element);
                    var label = item.label;
                    var value = item.value;
					var id = item.id;
					var type = dataAdapter.records[item.id - 1].type;
                    alert(type);
					});
				$('#Tree').jqxTree('selectItem',  $("#Tree").find('li:first')[0]);
				});
		
			

[realtekParticipant]

Here is my code:

var url = 'json/tree.php';
   
var source = 
{
   datatype: "json",
   datafields:
 	[
 		{name : 'ID' },
		{name: 'PARENT'}, 
		{name: 'VALUE'},
		{name: 'NAME'},
		{name : 'type'}
	],
	url: url,
	id: 'ID',
	async: false
  };
	//Tree
		 
		var records;   
        var dataAdapter = new $.jqx.dataAdapter(source);
                
                dataAdapter.dataBind();
                records = dataAdapter.getRecordsHierarchy('ID', 'PARENT', 'items', [{  name: 'VALUE', map: 'value'}, {name: 'NAME', map: 'label'}]);
                $('#Tree').jqxTree({allowDrag: false, allowDrop: false, source: records, height: '100%', width: '99%', theme: theme })
     
             	var treeItems = $('#Tree').jqxTree('getItems');
                var firstItem = treeItems[0];
                var firstItemElement = firstItem.element;
        				
				$('#Tree').jqxTree('selectItem',  $("#Tree").find('li:first')[0]);
			
			 $('#Tree').on('select', function (event) {
					var args = event.args;
                    var item = $('#Tree').jqxTree('getItem', args.element);
                    var label = item.label;
                    var value = item.value;
					  alert(item.id); 
					  var type = dataAdapter.records[item.id - 1].type;
                                    
                });
                

[realtekParticipant]

Actually dimitar, perhaps this is why… the item.id actually returns something like ‘jqxWidgetb493ab80’

To me, this sounds like its getting an automatically generated ID or almost what I would see in asp.net when the clientside generates an ID and not server side…

[realtekParticipant]

Hi Dimitar,

For some reason I keep getting:

Uncaught TypeError: Cannot read property 'type' of undefined

I have copied the same method of doing this word for word and its failing.

Do you know what could be causing this? I can confirm item.id does return a value.

Thanks

[realtekParticipant]

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

[realtekParticipant]

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"
}]

[realtekParticipant]

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

[realtekParticipant]

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

[realtekParticipant]

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?

[realtekParticipant]

Well spotted Peter… thank you – yes I did look at the example first but did not realise checkbox was a seperate js file! I assumed it to be part of the listbox built-in.

Thanks!

[realtekParticipant]

Hi Peter,

This is what my JSON returns when no data should display:

{“columnsinfo”:[{“FIELDNAME”:”Number”,”DISPLAYNAME”:”Number #”},{“FIELDNAME”:”Description”,”DISPLAYNAME”:”Description Text”},{“FIELDNAME”:”Display”,”DISPLAYNAME”:”Display ID”}]}

So rowsinfo is not returned at all because there is no data?

My “columnsinfo” is the columns being returned for the Grid which will exist.

Thanks

[Author]

Posts