Using Template for a ejTreeview

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.

3 Replies

KR Karthik Ravichandran Syncfusion Team January 2, 2017 01:45 PM UTC

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: 
 
To know more details about template in TreeView control, please refer the below link: 
 
 
Please let us know if you need further assistance. 
 
 
Regards, 
Karthik R 



SK Suthahar Krishnan January 6, 2017 01:03 AM UTC

Thanks!


KR Karthik Ravichandran Syncfusion Team January 6, 2017 01:58 PM UTC

Hi Suthahar, 
 
Most welcome. 
 
Please let us know if you need further assistance. 
 
Regards, 
Karthik R 


Loader.
Up arrow icon