Blogs

It’s easy to display HTML instead of simple Text in the Tree nodes. You just need to set a HTML string to the label member as illustrated in the code below:

var data = [
    { label: "<b>Item 1</b>", expanded: true, items: [
        { label: "<i>Item 1.1</i>" },
        { label: "<i>Item 1.2</i>", selected: true }
    ]
    },
    { label: "<i>Item 2</i>" },
    { label: "<i>Item 3</i>" },
    { label: "<b>Item 4</b>", items: [
        { label: "<i>Item 4.1</i>" },
        { label: "<i>Item 4.2</i>" }
    ]
    },
    { label: "<i>Item 5</i>" },
    { label: "<i>Item 6</i>" },
    { label: "<i>Item 7</i>" }
];

Then you can initialize the Tree by using the jqxTree constructor and set the source property to the data object.

 $('#jqxTree').jqxTree({ source: data, width: '250px' });

CodeProject