We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Using Template for a ejTreeview

Thread ID:

Created:

Updated:

Platform:

Replies:

128044 Dec 28,2016 10:50 AM Jan 6,2017 08:58 AM JavaScript 3
loading
Tags: ejTreeView
Suthahar Krishnan
Asked On December 28, 2016 10:50 AM

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 [Syncfusion]
Replied On January 2, 2017 08:45 AM

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 


Suthahar Krishnan
Replied On January 5, 2017 08:03 PM

Thanks!

Karthik Ravichandran [Syncfusion]
Replied On January 6, 2017 08:58 AM

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;