New to Kendo UI for jQueryStart a free 30-day trial

Initialize DropDownList in the TreeView Template

Environment

ProductProgress® Kendo UI® TreeView for jQuery

Description

How can I place DropDownLists in the <script> of the TreeView template which will be populated from database and provide each DropDownList with a dynamically assigned id?

Solution

  • If you use the Kendo UI MVVM framework, initialize the DropDownLists with the data- attribute in the template.
  • Alternatively, initialize the widgets with JavaScript in the dataBound event of the TreeView.
tab-MVVM-Scenario
<div id="example">
  <div class="files"
       data-role="treeview"
       data-text-field="name"
       data-bind="source: files"
       data-template="treeview-template"
       style="height:800px;">
  </div>
</div>

<script id="treeview-template" type="text/kendo-ui-template">
    #: item.name #
    <input id="ddl-id-#:item.id#"
           data-role="dropdownlist"
           data-animation="false"
           data-text-field="ProductName"
           data-value-field="ProductID"
           data-bind="events: { open: onOpen }
                      source: dropDownSource">
</script>

<script>
  var viewModel = kendo.observable({
    onOpen: function(e) {
      setTimeout(function() {
        e.sender.open();
      }, 0);
    },
    dropDownSource: new kendo.data.DataSource({
      transport: {
        read: {
          url: "https://demos.telerik.com/service/v2/core/products"
        }
      }
    }),
    files: kendo.observableHierarchy([
      { name: "My Website", id: "one", expanded: true, items: [
        { name: "images", id: "two", expanded: true, items: [
          { name: "logo.png", id: "three" },
          { name: "my-photo.jpg", id: "four" }
        ] },
        { name: "resources", id: "five", expanded: true, items: [
          { name: "resources", id: "six" },
          { name: "zip", id: "seven" }
        ] },
        { name: "about.html", id: "eight" },
        { name: "index.html", id: "nine" }
      ] }
    ])
  });

  kendo.bind($("#example"), viewModel);
</script>

See Also