1. Home
  2. Forum
  3. ASP.NET MVC
  4. Tile & Tree View template rendering problem

Tile & Tree View template rendering problem

For Tiles, there is sample templates shown in the documentation as below:

<div id="tile"></div>
    <div id="imageTemplate">
        <div id="appimage">
        </div>
        <div class="tileMargin">
            <span class="caption">Google Search</span><br />
            <span class="description">The world’s information</span><br />
            <span class="sub">Free</span>
        </div>
    </div>
    <div id="captionTemplate" class="title">Windows Store</div>

However the documentation didn't tell how could we insert the values into the template, say we would like to replace "Google Search" with Id iterate from our model, can we have a sample on how to do that?
For Tree View, we have the following code:
<script id="treeTemplate" type="text/x-jsrender">
    {{if HasChild}}
    <div class={{>Name}} -style>{{>Name}}</div>
    {{else}}
    <div class="cont-list">
        <div class="cont-details">
            <span>{{>Name}}</span>
            <span>{{>Count}}</span>
        </div>
        <div class="cont-del"></div>
        <div class="treeFooter"></div>
    </div>
    {{/if}}
</script>
@(Html.EJ().TreeView("tree").Template("#treeTemplate").LoadOnDemand(true)
    .ClientSideEvents(e => e.NodeSelect("onTreeNodeSelect"))
    .ClientSideEvents(e => e.BeforeExpand("onBeforeExpand"))
    .TreeViewFields(f => f.Datasource(Model).Id("Id").ParentId("Pid").Text("Name").Expanded("Expanded").HasChild("HasChild"))
)
But the tree rendered the same as without specify the Template("#treeTemplate") attribute, are we missed something?

1 Reply
HP Harikrishnan P Syncfusion Team September 1, 2015 09:56 AM UTC

Hi Ferry,

Thanks for contacting Syncfusion support.

Query: However the documentation didn't tell how could we insert the values into the template, say we would like to replace "Google Search" with Id iterate from our model, can we have a sample on how to do that?

We have prepared a sample based on your requirement, could you please check with the sample in the following location?

Sample Location: Tile and TreeView sample

In the above sample we have used ViewModel to pass the data to view page and iterate the values in the Model to specify the values for the Tile Template. Please check with it and let us if it helps to achieve your requirement.

Query 2: But the tree rendered the same as without specify the Template ("#treeTemplate") attribute, are we missed something?

We are unable to reproduce the above reported issue. Could you please check with the above attached sample? We suspect that you have not included the “Template” property. We need to include this property and pass the “id” of the template as the value for this property.
If still you face any difficulties, kindly revert back the provided sample based on your application along with the replication procedure to reproduce the issue at our end. This would be more helpful for us to provide a solution at the earliest.

To know about the list of properties, methods and events supported by any JS component, go to the online help link for JS (http://helpjs.syncfusion.com/js/overview) and click on the “API reference” section and navigate to the particular component. For example, to know all the available options in DatePicker check the following link,
 
http://helpjs.syncfusion.com/js/api/ejdatepicker

For getting started and to know about the important features in any particular component, go to the help link and click on the particular component. For example, getting started and key features in DatePicker can be found in

http://helpjs.syncfusion.com/js/datepicker/overview

Please let us know if you have further queries.

Regards,
HariKrishnan  

Loader.
Up arrow icon