How to use templates to style the different nodes of the Ignite UI Tree control

Marina Stoyanova / Tuesday, June 17, 2014

Recently I published a blog about the changes around the template and how to use different template engines to customize the look and style of some of the Ignite UI controls. The Tree control goes under the same rules. If you want the structure of your jQuery Tree to be unique you can create a template and apply it to all of the nodes in it. In our UserVoice site we received a request for a way to style each tree node based upon a number of criteria. In the blog I will try to explain you how to achieve that.

Node’s templates

You can easily style any node by creating a template and providing it to each level of binding of the igTree. By setting the nodeContentTemplate option of the binding object, you can define custom HTML which will be shown for each node in the control. If you have read my blog about how to use different template engines with the Ignite UI controls you probably already know that you can create the template by using your favorite Template Engine and apply it to the tree. For the purpose of the sample I used the Infragistics template engine.

$("#tree").igTree({
    dataSource: files,
    dataSourceType: "json",
    checkboxMode: "triState",
    bindings: {
        textKey: "Text",
        imageUrlKey: "ImageUrl",
        nodeContentTemplate: "${Text}",
        childDataProperty: "Folder",
        bindings: {
            textKey: "Text",
            imageUrlKey: "ImageUrl",
            nodeContentTemplate: "${Text}",
            childDataProperty: "Folder",
            bindings: {
                textKey: "Text",
                imageUrlKey: "ImageUrl",
                nodeContentTemplate: "${Text}"
            }
        }
    }
});

This is how you can create a hierarchical tree structure and use different template for the separate levels of binding. When you add new child nodes they will be styled according to the template on the relevant level of the tree.

//remove a node
$(document).on('click', 'img[data-role=delete-node]', function () {
    var node = $(this).closest('li');
    $('#tree').igTree('removeAt', node.attr('data-path'));
});
//add new node
$(document).on('click', 'img[data-role=add-node]', function () {
    var node = $(this).closest('li');
    $('#tree').igTree('addNode', { Text: 'New Node' }, node);
});

Image:

igTree

Check out the live demo in jsFiddle.

Using conditional template

In the online documentation you can find a detailed step by step guidance how to add and remove nodes from the igTree control. We are going to use a context menu that offers choices such as adding a new node and deleting a node. For more information on how to create a context menu you can read the “The Infragistics Tree with a Context Menu” blog. Let’s see how to apply a predefined template when we add new sibling nodes or new child nodes.

We are going to create a condition template and initialize the igTree first.

Template:

<script id="template" type="text/template">
    {{if ${Type} == "MusicFolder"}}
    <img src="http://igniteui.com/images/samples/tree/book.png">
    {{elseif ${Type} == "PictureFolder"}}
    <img src="http://igniteui.com/images/samples/tree/coins.png">
    {{elseif ${Type} == "DocumentFolder"}}
    <img src="http://igniteui.com/images/samples/tree/documents-folder.png">
    {{elseif ${Type} == "Computer"}}
    <img src="http://igniteui.com/images/samples/tree/computer.png">
    {{elseif ${Type} == "MusicFile"}}
    <img src="http://igniteui.com/images/samples/tree/music.png">
    {{elseif ${Type} == "DocumentFile"}}
    <img src="http://igniteui.com/images/samples/tree/documents.png">
    {{elseif ${Type} == "PictureFile"}}
    <img src="http://igniteui.com/images/samples/tree/coins_add.png">
    {{else}}
    <img src="http://igniteui.com/images/samples/tree/documents-folder.png"/>
    {{/if}}
    ${Text} 
script>

Applying it for the template:

$("#tree").igTree({
    dataSource: files,
    dataSourceType: "json",
    checkboxMode: "triState",
    bindings: {
        nodeContentTemplate: $("#template").html(),
        childDataProperty: "Folder"
    }
});

Image:

igTree with template

As you can see from the above code snippet we have created a simple template with conditions which determine which image to be used for the particular node. This way you can easily create different appearance for the nodes based upon a number of criteria.

Now let’s start with adding a sibling node. First we are going to create a menu with a dialog with by using the igDialog, igEditor, igCombo and igButton controls. Because the purpose of the blog is to show you how to implement and use template for the different nodes, I’m going to focus on the event that is triggered when the save button is selected. What happens there is: The User selects “Add new sibling” and a dialog window appears asking for a name and type for the new node(it is important to set the type for the node because the image for the node will be determined based upon it) and to save it. When you select the save button we take the value that you have filled in the editor’s input and assign it to the “Text” variable in the predefined array that contains the data we want to add in the tree structure.

var newFolders = [{ Text: "Smth", Value: "File",Type:"",  Folder: "" }];

Then we use the addNode method. This method uses three parameters –node, parent and node index . To the node parameter (which specifies the data used to create the new nodes) we assign the new data with the changed text option. The other two parameters are optional. One is used to specify the jQuery object of the parent node the nodes are to be appended to and the other specifies the index at which the node to be inserted. We are going to use the first one and by using the parentNode method we will extract the element on the required level.

By using this addNode method the new node will go through the template that we use for the original rendering of the igTree.

Initialization of the Save button:

$("#btnSave").igButton({ 
    labelText: "Save",
    click: function () {
        if ($("#newValue").igEditor("validate")) {
            var newItem = newFolders.clone();
            newItem[0].Text = $("#newValue").val();
            var type = $("#combo").igCombo("value");
            type = type.replace(/\s/g, '');
            
            newItem[0].Type = type;
            $("#tree").igTree("addNode", newItem,
                $("#tree").igTree("parentNode", node.element)
            );
            $("#dialog").igDialog("destroy");
            $("#dialog").remove();
        }
    }
});

Image:

Adding sibling node to igTree

The situation with adding a child node is similar the only difference occurs on the third parameter of the addNode method. You don’t have to use the parentNode method here, you just need the node element.

Adding a child node element:

$("#btnSave").igButton({ 
    labelText: "Save",
    click: function () {
        if ($("#newValue").igEditor("validate")) {
            var newItem = newFolders.clone();                        
            newItem[0].Text = $("#newValue").val();
            var type = $("#combo").igCombo("value");
            type = type.replace(/\s+/g, '');
            newItem[0].Type = type;
            $("#tree").igTree("addNode", newItem, node.element);
            $("#dialog").igDialog("destroy");
            $("#dialog").remove();
        }
    }
});

Image:

Adding a child node to igTree

Summary

The Ignite UI Tree control simplifies the presentation of your hierarchical data into a web-based tree structure. By applying a template to the control you can easily style the nodes and even more you can create the template by using any available template engine such as jsRender, Handlebars, Mustache and others.

You can see a working demo on jsFiddle.

You can follow us on Twitter @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!