Attach data to jqxTree for later reference

[gradualstudentMember]

Newbie question, can I attach data to items in a jqxTree, to allow lookup of the selected item in a corresponding datastructure? In my app, the label is nice, but meant really only for human readers (e.g. “Item 5”) whereas the app uses computer-generated identifiers to really track the associated objects (e.g. “234938sdfe03”)

I tried adding “data-id” in the source object sent to the constructor, but I didn’t see these values appear in the DOM elements like I expected, as say “data-xxx” attributes in the LI

Thanks!

var source = [
{ label: “Item 1”, expanded: true, data-id=”982349028″, items: [
{ label: “Item 1.1”, data-id=”234398932″ },
{ label: “Item 1.2”, selected: true, data-id=”43928923843″}
]
},
{ label: “Item 2”,data-id=”2394839″, },
{ label: “Item 3”,data-id=”2938492f”, },
{ label: “Item 4”, items: [
{ label: “Item 4.1”,data-id=”923849″, },
{ label: “Item 4.2”,data-id=”92384938″, }
]
},
{ label: “Item 5”,data-id=”18738374″, },
{ label: “Item 6”,data-id=”34093092″, },
{ label: “Item 7”,,data-id=”78927391″, }
];

// create jqxTree
$(‘#jqxTree’).jqxTree({ source: source });

[gradualstudentMember]

Not sure if this is the way a real programmer would do it, but this seems to work. Instead of putting in a simple string for the label, put an actual HTML element in the `source` object, e.g.

var source = [
{ label: "<div>Label 1</div>", items: [...] }, 
 ...
]

Of course the label is autogenerated by code, rather than typed. Now on select, can extract that identifier as follows:

$(‘#jqxTree’).bind(‘select’, function (event) {
var htmlElement = event.args.element;
var myElement = $(“.elementLabel”, htmlElement);
var elementId = myElement.data(‘id’);
console.log(elementId);

myApp.selectItemById(elementId);
});

(sorry if someone is getting multiple emails, trying to find the right way to specify HTML code so that it gets escaped and displayed verbatim rather than interpreted by the forum app)

[gradualstudentMember]

see the data-id tag disappeared in edit. For the record,…

{ label: <div  data-id='982349028' >Label 1</div>", items: [...] }, ... 

[Author]

Posts