Question

我使用自己的数据源使用剑道树视图。从那里我想为一些节点添加自定义css类。

假设我想在动态加载的Kendo UI TreeView中为某些树节点添加红色背景。我怎么能这样做？

My expectation sample image is given below

Answer 1

要动态地将CSS类应用于kendo树视图节点，我已经使用jquery找到了解决方案。在数据源内部，我们可以定义Node的 level ，并根据级别我们可以在Kendo树视图数据绑定事件中添加CSS类。

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/treeview/dragdrop">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.flat.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.flat.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>
        <div id="example">
            <div class="demo-section k-content">
                <h4>Treeview One</h4>
                <div id="treeview-left"></div>
                <h4 style="padding-top: 2em;">Treeview Two</h4>
                <div id="treeview-right"></div>
            </div>

            <script>
                

                $("#treeview-right").kendoTreeView({
                    dragAndDrop: true,
                    dataSource: [
                        { text: "Storage", Level: "first", expanded: true, items: [
                            { text: "Wall Shelving",Level: "second",items:[{text:"hi",Level: "third",}] },
                            { text: "Floor Shelving",Level: "second" },
                            { text: "Kids Storage",Level: "second" }
                        ]
                        },
                        { text: "Lights",Level: "first", items: [
                            { text: "Ceiling",Level: "second" },
                            { text: "Table",Level: "second" },
                            { text: "Floor",Level: "second" }
                        ]
                        },{ text: "fight",Level: "first", items: [
                            { text: "Ceiling",Level: "second" },
                            { text: "Table",Level: "second" },
                            { text: "Floor",Level: "second" }
                        ]
                        }
                    ],
                   dataBound:function(e){
                    
                     var treeview = $("#treeview-right").data("kendoTreeView");
                     $('#treeview-right ul li').each(function(i)
                      {
                       debugger;
                       	var dataItem = treeview.dataItem(this);
                       if(dataItem.Level == "first"){
                         $(this).addClass("first");
                       }
                       if(dataItem.Level == "second"){
                         $(this).addClass("second");
                       }
                       if(dataItem.Level == "third"){
                         $(this).addClass("third");
                       }

                      });
                     

                   }
                 
                });
            </script>

            <style>
                #treeview-left,
                #treeview-right
                {
                    overflow: visible;
                }
              .first{ color:red }
              .second{ color:green }
              .third{ color:blue }
            </style>
        </div>


</body>
</html>

Answer 2

今天，我使用剑道模板自己解决了这个问题。下面的代码段很简单，但是如果要在渲染中包含JavaScript逻辑，请参见Telerik的演示：https://demos.telerik.com/kendo-ui/treeview/templates。

我的JavaScript数据如下：

[
    { title: 'Label', extraClasses: 'st-assembly' }
]

我按如下方式初始化我的树形视图：

 $('#structure-tree').kendoTreeView({
    dataSource: PrimaryStructure,
    dataTextField: 'title',
    template: '<span class="#: item.extraClasses #">#: item.title #</span>',
    select: onKendoTreeViewSelect,
    dragAndDrop: true,
 });

在模板之前，treeview元素呈现为：

<span class="k-in">Label</span>

现在该元素呈现为：

<span class="k-in"><span class="st-assembly">Label</span></span>

希望这会有所帮助。

如何为Kendo Tree View节点添加自定义CSS？

2 个答案: