Skip to content

Latest commit

 

History

History
91 lines (79 loc) · 2.41 KB

attach-methods-to-items.md

File metadata and controls

91 lines (79 loc) · 2.41 KB
title page_title description slug previous_url tags component type res_type
Attach Methods to Data Items in the TreeView
Attach Methods to Data Items and Use Templates - jQuery TreeView
Learn how to attach methods to data items at different levels of the Kendo UI for jQuery TreeView component and use them in a template.
howto_attache_methodsto_dataitems_treeview
/controls/navigation/treeview/how-to/templates/attach-methods-to-items
telerik, kendo, jquery, treeview, atach, methods, to, data, items
treeview
how-to
kb

Environment

Product Progress® Kendo UI® TreeView for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript

Description

How can I attach methods to data items at different levels and then use them in a template in the Kendo UI for jQuery TreeView?

Solution

The following example demonstrates how to achieve the desired scenario.

    <div id="treeview"></div>

    <script>
      var SubCategory = {
        displayName: function() {
          return this.SubCategoryName;
        }
      };

      var Category = {
        displayName: function() {
          return this.CategoryName;
        },
        children: {
          schema: {
            data: "subcategories",
            model: SubCategory
          }
        }
      };

      $("#treeview").kendoTreeView({
        template: "#: item.displayName() #",
        dataSource: {
          data: [
            { CategoryName: "Reds", status: "online", subcategories: [
              { SubCategoryName: "Yellow" },
              { SubCategoryName: "Orange" },
              { SubCategoryName: "Red" }
            ] },
            { CategoryName: "Blues", status: "offline", subcategories: [
              { SubCategoryName: "Green" },
              { SubCategoryName: "Turquose" },
              { SubCategoryName: "Blue" }
            ] }
          ],
          schema: {
            model: Category
          }
        }
      });
    </script>

See Also