Kendo 带有图标的 TreeView 远程数据

Question

我有一个 Kendo 从数据库中获取数据的 TreeView，基本上它看起来像这样 demo. And I wanted to add icon in front of the text using this 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").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>

Kendo 带有图标的 TreeView 远程数据

Kendo TreeView remote data with icons

kendo-ui

kendo-treeview

kendo-grid