kendo UI TreeView 如果透過DataSource來綁定

這個簡單的Sample是用來說明，我們如果透過一個DataSource來Binding TreeView這個元件

並且綁定一個行為會在Consloe 顯示 我們點選的該筆資料訊息

首先我們需要一個DataSource

 var inline = new kendo.data.HierarchicalDataSource({
                    data: [
                        { categoryName: "StorageA",sprite:"folder", subCategories: [
                          { subCategoryName: "Wall Shelving",HtmlAttributes:'{"url":"abc","title":"test"}'},
                            { subCategoryName: "Floor Shelving",HtmlAttributes:'{"url":"abc","title":"test"}'},
                            { subCategoryName: "Kids Storage" ,HtmlAttributes:'{"url":"abc","title":"test"}'}
                        ] },
                        { categoryName: "Lights",sprite:"folder", subCategories: [
                            { subCategoryName: "Ceiling" ,HtmlAttributes:'{"url":"abc","title":"test"}'},
                            { subCategoryName: "Table" ,HtmlAttributes:'{"url":"abc","title":"test"}'},
                            { subCategoryName: "Floor",HtmlAttributes:'{"url":"abc","title":"test"}' }
                        ] },
                        {categoryName: "StorageB",sprite:"folder", subCategories: [
                            { subCategoryName: "Wall Shelving",HtmlAttributes:'{"url":"abc","title":"test"}'},
                            { subCategoryName: "Floor Shelving",HtmlAttributes:'{"url":"abc","title":"test"}'},
                            { subCategoryName: "Kids Storage",HtmlAttributes:'{"url":"abc","title":"test"}'},
                            {categoryName: "StorageC",sprite:"folder",
                             subCategories: [
                              { subCategoryName: "Wall Shelving" ,HtmlAttributes:'{"url":"abc","title":"test"}'},
                              { subCategoryName: "Floor Shelving" ,HtmlAttributes:'{"url":"abc","title":"test"}'},
                              { subCategoryName: "Kids Storage" ,HtmlAttributes:'{"url":"abc","title":"test"}'}
                            ] }
                        ] }
                    ],
                    schema: {
                        model: {
                            children: "subCategories"
                        }
                    }
                });

我們使用HierarchicalDataSource的DataSource 並且我們自定義了一個HtmlAttributes的屬性來存放該項目的URL與名稱

<script id="treeview-template" type="text/kendo-ui-template">
            
              # if (!item.subCategories) { #    
               <span class="opentab" data-options=#= item.HtmlAttributes # >#= item.subCategoryName #</span>            
              # } else { # 
                #: item.categoryName # 
              # }#        
</script>

透過一個kendo ui的template 綁定一個 data-options

 $("#treeview-right").kendoTreeView({
                    dataSource: inline,
                    dataTextField: [ "categoryName", "subCategoryName" ],
                    dataSpriteCssClassField: "sprite",
                     template: kendo.template($("#treeview-template").html())
                    });
                   
                  $(document).on("dblclick", ".opentab", function () {
                      var option = $(this).data("options");
                       console.log(option.title);
});

並且接下來就是進行一些初始化的設定，設定資料來源與欄位設定，最後記得要綁定double click的行為，讓資料會被選取顯示!

 附上檔案