jqxtree with directive

[akshatnParticipant]

Hi,
is there any way to create jqx-tree with directive. i need to create jqx tree with html tag load.

[Peter StoevKeymaster]

Hello akshatn,

There is such demo available online: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/tree.htm?arctic

Best Regards,
Peter Stoev

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

[akshatnParticipant]

Thanks Peter, how can i provide json data to this directive. i am using:
<jqx-tree jqx-create=”true” jqx-settings=”modalData.treeDefinition”></jqx-tree>

here ‘modalData.treeDefinition’ = { source: records , jqx-height: ‘100%’, jqx-width: ‘100%’};

and records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘text’, map: ‘label’}]);

my basic question is how to use json data in directive now.

[Peter StoevKeymaster]

Hi akshatn,

jqxTree does not have a property called jqx-width. It has “width”. It also does not have jqx-height. It has “height. I would suggest you at first to look at the help documentation about using jQWidgets with AngularJS and then proceed. The initialization of the widgets with AngularJS is pretty much the same as initialization of widgets without it.

Best Regards,
Peter Stoev

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

[raoParticipant]

Hi Team,
Apart from height & width, can you please comment on ‘source’ attribute ?
Does it really require ‘parentid’ as well; although the data is in hierarchy ; of which ‘items’ array has child nodes data?

Regards,
Rao.

[raoParticipant]

Hi Team,

Further to my query above, i am seeking for the ‘select’ event handle as well.

In jquery model it works as follows :

$(‘#jqxTree’).on(‘select’,function (event){
var args = event.args;
var item = $(‘#jqxTree’).jqxTree(‘getItem’, args.element);
alert(“selected item”+item);
}

How can we achieve the same with Angular Directive implementation (<jqx-tree> )?

Regards,
Rao.

[Peter StoevKeymaster]

Hi Rao,

Event Handling is demonstrated on: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/directive-event.htm?arctic. More information about Event handling on: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/index.htm. The Tree’s source as shown on: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/index.htm?(arctic)#demos/jqxtree/defaultfunctionality.htm

should be in that format:

     var source = [
            {
                icon: "../../images/mailIcon.png", label: "Mail", expanded: true, items: [
                  { icon: "../../images/calendarIcon.png", label: "Calendar" },
                  { icon: "../../images/contactsIcon.png", label: "Contacts", selected: true }
                ]
            },
            {
                icon: "../../images/folder.png", label: "Inbox", 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" }
            ];

Best Regards,
Peter Stoev

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

[Author]

Posts