kendo-ui - 带有图标的 Kendo TreeView 远程数据

Question

我有一个从数据库中获取数据的 Kendo TreeView，基本上它看起来像这个 demo 。我想使用这个 Kendo icons 在文本前面添加图标。知道我该怎么做吗？或者它可以用CSS来完成？

Answer 1

只需按照 Telerik 网站中解释模板的示例即可。

https://demos.telerik.com/kendo-ui/treeview/templates

将模板脚本添加到您的 html

<script id="treeview-template" type="text/kendo-ui-template">
            #: item.text #
            # if (!item.items) { #
                <a class='k-icon k-i-close-outline' href='\#'></a>
            # } #
        </script>

添加到您的 Treeview 定义

$("#treeview").kendoTreeView({
                template: kendo.template($("#treeview-template").html()),

它完成了。

编辑条件着色

<script id="treeview-template" type="text/kendo-ui-template">

     # if(item.active=='n') { #
            <span style='color:red'> <a class='k-icon k-i-close-outline' ></a> #: item.group != null ? item.group : item.ledger #</span>
     # } else { #
                <span><a class='k-icon k-i-check-outline'></a>  #: item.group != null ? item.group : item.ledger #</span>
     # } # 


  </script>