![]() ![]() TreeViews are best used when your content is nested as opposed to flat. This is our updated code with the template: $('#tree').kendoTreeView(, So that our TreeView recognizes our icon proptery, we need to define the sprite field name with the dataSpriteCssClassField option. We will be using the Font Awesome icon fonts, but you could also use another icon font. In this example, we will add a new property to our items called icon that has the CSS class of our icon font. For example, to get the text of an item we use item.text. The syntax to get a value from one of the items is item.key where key is replaced with the name of the property. The syntax begins with #= and ends with #. To use variables within our template, we will need to use a special syntax. To convert this to a template, we will need to replace the icon class name and the text of the node with variables. If you were going to write out the HTML, the markup would look like this: For our bookmark example, we want to put a folder icon next to parent nodes, and a file icon next to leaf nodes. You define the template by adding a template field to the TreeView’s options. The template can be an HTML element or it can contain properties of the item. Templates allow you to customize the appearance of items in your TreeView. This is the updated code for our TreeView: The HTML is reduced to a single, empty element. ![]() To add a subtree to a node, an items array is added to the object. Because our tree has only one node at the top, the dataSource will contain only one object. These objects represent the top-most level of the tree. Īnother way to initialize a TreeView is to configure the component's dataSource option. And the third example uses the Material theme. The second example uses the Bootstrap theme. The first example uses the Kendo UI theme. The following are examples of a TreeView styled with different themes. Next, you initialize the component by calling $(element).kendoTreeView(). Subtrees are added by placing a element within a element. The first element is the root of the tree. The basic implementation for a TreeView can be made from a element. Next, you will see how to implement the Kendo UI TreeView component. It can be used in a code editor to show a project’s file structure or in a browser to list a user’s bookmarks. A TreeView is useful when your content has a single root that all other items descend from. Child nodes are indented to show the parent they belong to. Each parent node in the tree can be expanded and collapsed to show and hide its child nodes. The TreeView is a component that displays items in a hierarchical, tree-like structure. Like the ToolBar, this next component is also a unique addition to your supply of tools. In a recent component spotlight, you took command of the ToolBar. See how you can easily create and style a custom TreeView in Kendo UI. To display items in a hierarchical, tree-like structure with expandable parent and child nodes, you need a TreeView. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |