Using Template for a ejTreeview

[Suthahar Krishnan]

I am looking for an example to implement a custom template for the ejTreeview.

My requriement is that the child items will have icon image and a slider associated with each of them.

I tried to use the example on :

https://help.syncfusion.com/api/js/ejtreeview#members:template

Need help with a working example.

[Karthik Ravichandran]

Hi Suthahar, 

 

Thanks for contacting Syncfusion support. 

 

We have analysed your query. We can achieve your requirement (“Child items will have icon image and a slider associated with each of them”) using “template” API in TreeView control. Please refer the below code block: 

[Script] 

  <script id="treeTemplate" type="text/x-jsrender"> 

 

        {{if hasChild}} 

        <div class={{>cls}}>{{>name}}</div> 

        {{else}} 

        <div class="cont-list"> 

            <img class="con-img" src="14.4.0.15/themes/web/content/images/treeview/template-image-{{>imgId}}.png" /> 

            <div class="cont-details"> 

                <b>{{>name}}</b><br /> 

                <span>{{>city}}</span> 

                <br /> 

                <div class="slider" data-value="{{>sliderValue}}" /> 

            </div> 

        </div> 

        {{/if}} 

 

    </script> 

 

 

  $("#treeview").ejTreeView({ 

                fields: { 

                    dataSource: treeData, 

                    id: "id", parentId: "pid", text: "name", hasChild: "hasChild" 

                }, 

                template: "#treeTemplate" 

            }) 

 

 

Based on your requirement we have prepared the sample and it can be available in the below link: 

http://jsplayground.syncfusion.com/tyd53eax 

 

To know more details about template in TreeView control, please refer the below link: 

https://help.syncfusion.com/js/treeview/template-support 

 

 

Please let us know if you need further assistance. 

 

 

Regards, 

Karthik R 

[Suthahar Krishnan]

Thanks!

[Karthik Ravichandran]

Hi Suthahar, 

 

Most welcome. 

 

Please let us know if you need further assistance. 

 

Regards, 

Karthik R