Getting Started
24 Nov 201718 minutes to read
Before we start with the TreeView, please refer this page for general information regarding integrating Syncfusion widget’s.
Control Initialization
-
Open the command prompt in the folder ember-app or the folder in which the application is created.
-
Use the command ember generate route treeview/default to create template
default.hbsfile in templates folder and routerdefault.jsfile in routes folder. It also add the routing content inrouter.js. -
Use below code in
default.hbsin templates folder to render the TreeView.
{{#ej-treeview id="defaulttreeview" }}
<ul>
<li>Discover Music
<ul>
<li>Hot Singles</li>
<li>Rising Artists</li>
<li>Live Music</li>
<li>Best of 2013 So Far</li>
</ul>
</li>
<li>Sales and Events
<ul>
<li>100 Albums - $5 Each</li>
<li>Hip-Hop and R&B Sale</li>
<li>CD Deals</li>
</ul>
</li>
<li>Categories
<ul>
<li>Songs</li>
<li>Bestselling Albums</li>
<li>New Releases</li>
<li>Bestselling Songs</li>
</ul>
</li>
<li>MP3 Albums
<ul>
<li>Rock</li>
<li>Gospel</li>
<li>Latin Music</li>
<li>Jazz</li>
</ul>
</li>
<li>More in Music
<ul>
<li>Music Trade-In</li>
<li>Redeem a Gift Card</li>
<li>Branded T-Shirts</li>
<li>Mobile MVC</li>
</ul>
</li>
</ul>
{{/ej-treeview}}- Use the below code in
default.jsin routes folder to bind the model to the TreeView.
export default Ember.Route.extend({
model(){
return {
}
}Running the application
- To run the application, execute below command.
ember serve- Browse to http://localhost:4200 to see the application. And navigate to TreeView sample (http://localhost:4200/treeview/default). The component is rendered as like the below screenshot. You can make changes in the code found under app folder and the browser should auto-refresh itself while you save files.
Check boxes
TreeView consists of built-in checkbox option and it can be displayed to the left of the tree node by setting the showCheckbox property as true. It allows you to select more than one node at a time.
Indeterminate Checkboxes
TreeView supports tristate checkboxes in addition with standard two state checkboxes. By default TreeView has been enabled with tristate in checkboxes. You can enable 2-state checkboxes by using autoCheckParentNode as false.
{{#ej-treeview id="defaulttreeview" e-showCheckbox = true e-autoCheckParentNode = false }}
<ul>
<li>Discover Music
<ul>
<li>Hot Singles</li>
<li>Rising Artists</li>
<li>Live Music</li>
<li>Best of 2013 So Far</li>
</ul>
</li>
<li>Sales and Events
<ul>
<li>100 Albums - $5 Each</li>
<li>Hip-Hop and R&B Sale</li>
<li>CD Deals</li>
</ul>
</li>
</ul>
{{/ej-treeview}}Auto Checkable
By default checkbox state of child nodes depends up on parent node checkbox state and also parent node state gets updated based on child nodes state. You can turn off this option by setting autoCheck as false to make independent parent and child nodes checkboxes.
{{#ej-treeview id="defaulttreeview" e-showCheckbox = true e-autoCheck = false }}
<ul>
<li>Discover Music
<ul>
<li>Hot Singles</li>
<li>Rising Artists</li>
<li>Live Music</li>
<li>Best of 2013 So Far</li>
</ul>
</li>
<li>Sales and Events
<ul>
<li>100 Albums - $5 Each</li>
<li>Hip-Hop and R&B Sale</li>
<li>CD Deals</li>
</ul>
</li>
</ul>
{{/ej-treeview}}Populating data
TreeView can be populated with local or remote data source by using a property dataSource, which is the member of fields property.
In TreeView, you should use “fields” property to go with data source. It specifies the mapping fields for the data source to receive the data, query to process the data and field mappers to map the data members.
Fields
The following table contains the list of members with description for fields property.
| Properties | Description |
|---|---|
|
|
The data source contains the list of data for generating the TreeView list. |
|
|
It specifies the query to retrieve the data from the online server. |
|
|
It specifies the name of the table from which data to be processed from given data source. |
|
|
It specifies the ID of the node. |
|
|
It specifies the parent id of the node |
|
|
It specifies the text content of the node. |
|
|
It specifies the node has child (which is the nested or inner level of nodes). Also it’s used in load on demand of tree data. |
|
|
It specifies the tree node to be in expanded state |
|
|
It specifies the select node at initialize. N> only one node get selected by default. If you enable multiple selection in TreeView then you can able to select one or more nodes at initialize. |
|
|
It specifies the node to be in checked state, if tree node represented with checkboxes. |
|
|
It defines the image location. |
|
|
It defines the image attributes such as height, width, styles, etc. |
|
|
It defines the sprite CSS for the image tag. |
|
|
It defines the HTML attributes such as class and styles for a node ("li" tag). |
|
|
It defines the HTML attributes such as class and styles for a link tag, which is child of node. |
{{ej-treeview id="localData" e-fields = model.Fields }}let dataList = [
{ id: 1, name: "Fiction Book Lists", hasChild: true, expanded: true },
{ id: 2, pid: 1, name: "To Kill a Mockingbird " },
{ id: 3, pid: 1, name: "Pride and Prejudice " },
{ id: 4, pid: 1, name: "Harry Potter" },
{ id: 5, pid: 1, name: "The Hobbit " },
{ id: 6, name: "Mystery Book Lists", hasChild: true, expanded: true },
{ id: 7, pid: 6, name: "And Then There Were None " },
{ id: 8, pid: 6, name: "Angels & Demons" },
{ id: 9, pid: 6, name: "In Cold Blood " },
{ id: 10, pid: 6, name: "The Name of the Rose " },
{ id: 11, name: "Horror Novels", hasChild: true },
{ id: 12, pid: 11, name: "The Shining (The Shining, #1) " },
{ id: 13, pid: 11, name: "The Haunting of Hill House " },
{ id: 14, pid: 11, name: "The Silence of the Lambs (Hannibal Lecter, #2) " },
{ id: 15, name: "Novel Lists", hasChild: true },
{ id: 16, pid: 15, name: "Shadow Hills (Shadow Hills, #1) " },
{ id: 17, pid: 15, name: "After Forever Ends " },
{ id: 18, pid: 15, name: "Angel Star" },
{ id: 19, pid: 15, name: "Raised by Wolves" },
{ id: 20, pid: 15, name: "Falling From Grace" }]
export default Ember.Route.extend({
model(){
return {
Fields: { id : "id", parentId: "pid", text: "name", hasChild:"hasChild", expanded:"expanded", dataSource : dataList}
}
}