Storing other data again item - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: custom, data, field, item, jqxListBox, jqxtree, label, ListBox, text, Tree, value

This topic contains 17 replies, has 2 voices, and was last updated by Dimitar 11 years, 2 months ago.

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →

Author

Storing other data again item Posts

October 11, 2013 at 3:54 pm Storing other data again item #30613

realtek

Participant

Hi,

I’m strugelling a bit to use the data in my tree a bit as we only have two parameters we can store data again “label and item”.

Is there anyway of having a 3rd peace of data stored again the item (such as Type).

The reason I ask is because although you may have label’s and items, you may also want to know the type of item in the tree (in terms of data).

The only workaround I can think of is to perform an ajax request when clicking on the item, but this would have a performance hit and not really be ideal.

Thanks

October 14, 2013 at 5:26 am Storing other data again item #30670

Dimitar

Participant

Hello realtek,

There is also a value field, which can be used to store custom data. Please check out the following example based on the demo Events:

<!DOCTYPE html>
<html lang="en">
<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="../../scripts/gettheme.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/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxTree
            var theme = "";
            var source = [
                { icon: "../../images/mailIcon.png", label: "Mail", value: "Custom value 1", expanded: true, items: [
                    { icon: "../../images/calendarIcon.png", label: "Calendar" },
                    { icon: "../../images/contactsIcon.png", label: "Contacts", selected: true }
                ]
                },
                { icon: "../../images/folder.png", label: "Inbox", value: "Custom value 2", expanded: true, items: [
                   { icon: "../../images/folder.png", label: "Admin" },
                   { icon: "../../images/folder.png", label: "Corporate" },
                   { icon: "../../images/folder.png", label: "Finance" },
                   { icon: "../../images/folder.png", label: "Other" },
                ]
                },
                { icon: "../../images/recycle.png", label: "Deleted Items" },
                { icon: "../../images/notesIcon.png", label: "Notes" },
                { iconsize: 14, icon: "../../images/settings.png", label: "Settings" },
                { icon: "../../images/favorites.png", label: "Favorites" },
             ];
            // create jqxTree
            $('#jqxTree').jqxTree({ source: source, width: '250px', theme: theme });
            $('#Events').jqxPanel({ theme: theme, height: '250px', width: '200px' });
            $('#Events').css('border', 'none');
            // on to 'expand', 'collapse' and 'select' events.
            $('#jqxTree').on('expand', function (event) {
                var args = event.args;
                var item = $('#jqxTree').jqxTree('getItem', args.element);
                $('#Events').jqxPanel('prepend', '<div style="margin-top: 5px;">Expanded: ' + item.label + '</div>');
            });
            $('#jqxTree').on('collapse', function (event) {
                var args = event.args;
                var item = $('#jqxTree').jqxTree('getItem', args.element);
                $('#Events').jqxPanel('prepend', '<div style="margin-top: 5px;">Collapsed: ' + item.label + '</div>');
            });
            $('#jqxTree').on('select', function (event) {
                var args = event.args;
                var item = $('#jqxTree').jqxTree('getItem', args.element);
                $('#Events').jqxPanel('prepend', '<div style="margin-top: 5px;">Selected: ' + item.label + ' with value: ' + item.value + '</div>');
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style='float: left;'>
            <div id='jqxTree' style='float: left; margin-left: 60px;'>
            </div>
            <div style='margin-left: 20px; float: left;'>
                <div>
                    <span>Events:</span>
                    <div id='Events'>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

October 15, 2013 at 10:52 am Storing other data again item #30747

realtek

Participant

Sorry Dimitar,

I meant “label and value” not “item”.

So these are the only two custom fields we have?

Thanks

October 16, 2013 at 6:31 am Storing other data again item #30799

Dimitar

Participant

Hi realtek,

Yes, these are the only custom value fields when using the source property. If you use dataAdapter, the possibilities are greater. Here is an example with JSON data and three custom fields – text, value and type:

<!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/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/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = "";
                var data = [
                {
                    "id": "1",
                    "parentid": "-1",
                    "text": "fil1.txt",
                    "value": "../files/fil1.txt",
                    "type": "file"
                }, {
                    "id": "2",
                    "parentid": "-1",
                    "text": "fil2.txt",
                    "value": "../files/fil2.txt",
                    "type": "file"
                }, {
                    "id": "3",
                    "parentid": "-1",
                    "text": "map1",
                    "value": "../files/map1",
                    "type": "folder"
                }, {
                    "id": "4",
                    "parentid": "3",
                    "text": "fil3.txt",
                    "value": "../files/map1/fil3.txt",
                    "type": "file"
                }, {
                    "id": "5",
                    "parentid": "3",
                    "text": "fil4.txt",
                    "value": "../files/map1/fil4.txt",
                    "type": "file"
                }, {
                    "id": "6",
                    "parentid": "-1",
                    "text": "readme.txt",
                    "value": "../files/readme.txt",
                    "type": "file"
                }]
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'id' },
                        { name: 'parentid' },
                        { name: 'text' },
                        { name: 'value' },
                        { name: 'type' }
                    ],
                    id: 'id',
                    localdata: data
                };
                // create data adapter.
                var dataAdapter = new $.jqx.dataAdapter(source);
                // perform Data Binding.
                dataAdapter.dataBind();
                // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
                // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
                // specifies the mapping between the 'text' and 'label' fields.  
                var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
                $('#jqxTree').jqxTree({ source: records, width: '300px', theme: theme });
                $('#jqxTree').on('select', function (event) {
                    var args = event.args;
                    var item = $('#jqxTree').jqxTree('getItem', args.element);
                    var label = item.label;
                    var value = item.value;
                    var type = dataAdapter.records[item.id - 1].type;
                    $("#log").html("<strong>Type:</strong> " + type + ", <strong>Name:</strong> " + label + ", <strong>path:</strong> " + value);
                });
            });
        </script>
        <div id='jqxTree'>
        </div>
        <div id="log">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

October 22, 2013 at 10:27 pm Storing other data again item #31203

realtek

Participant

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

October 22, 2013 at 10:31 pm Storing other data again item #31204

realtek

Participant

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…

October 22, 2013 at 10:37 pm Storing other data again item #31205

realtek

Participant

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;
                                    
                });

October 23, 2013 at 6:21 am Storing other data again item #31232

Dimitar

Participant

Hi realtek,

Please call the selectItem method on the initialized event to make sure the data has been successfully bound to the tree before you invoke the method, i.e.:

$("#Tree").on("initialized", function () {
    var treeItems = $('#Tree').jqxTree('getItems');
    var firstItem = treeItems[0];
    var firstItemElement = firstItem.element;
    $('#Tree').jqxTree('selectItem', $("#Tree").find('li:first')[0]);
});

Best Regards,
Dimitar

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

October 23, 2013 at 8:42 am Storing other data again item #31243

realtek

Participant

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]);
				});

October 23, 2013 at 8:49 am Storing other data again item #31244

realtek

Participant

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?

October 23, 2013 at 3:22 pm Storing other data again item #31263

realtek

Participant

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

October 23, 2013 at 3:44 pm Storing other data again item #31264

realtek

Participant

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?

October 24, 2013 at 5:10 am Storing other data again item #31278

Dimitar

Participant

Hi realtek,

Please try mapping “ID” to “id” as you did with “VALUE” and “value” in the dataAdapter.getRecordsHierarchy method.

Best Regards,
Dimitar

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

October 28, 2013 at 10:30 pm Storing other data again item #31491

realtek

Participant

Hi Dimitar,

Is it possible to use the same logic for a jqxListbox that is bound to a datasource?

So for example:

$('#listBox').on("bindingComplete", function () {
		$('#listBox').on('checkChange', function (event) {
			var args = event.args;
			var checked = args.checked;
			if (checked) {
			var item = $('#listBox').jqxListBox('getItem', args.item.index);
			datatype = dataAdapter.records[item.id - 1].FieldType;
			
			}
		});
});

     var url = "json/admin/Fields.php";
                // prepare the data
                var source =
                {
                		data : {
                		
                		NUMBER : "18"
                		
                		},
                    datatype: "json",
                    datafields: [
                        { name: 'DisplayName' },
                    	{ name: 'Sequence' },
						{ name: 'FieldType' }
                    ],
                    id: 'id',
                    url: url,
                    type: "POST",
					async: false
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
				
                // Create a jqxListBox
                $("#listBox").jqxListBox({source: dataAdapter, checkboxes: true, allowDrag: false, enableSelection : true, equalItemsWidth:true, displayMember: "DisplayName", valueMember: "Sequence", width: '150', height: 300, theme: theme});

I’m sure this isn’t correct as I keep getting an undefined error: Uncaught TypeError: Cannot read property ‘FieldType’ of undefined

Obviously there is no getRecordsHierarchy but i don’t want to have a Hierarchy on these which isn’t possible on a listBox anyway.

Thanks

October 29, 2013 at 5:56 pm Storing other data again item #31540

realtek

Participant

Hi Dimitar,

Is this possible? I need to get this working for 2x ComboBox’s now.

Thanks

Author

Posts

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →

You must be logged in to reply to this topic.