时间戳

首页 > 解决方案 > 如何使用远程数据获取 Kendo HierarchicalDataSource 的长度？

javascript - 如何使用远程数据获取 Kendo HierarchicalDataSource 的长度？

问题描述

我正在开发一个 Javascript 函数，该函数将使用获取数据的 url 设置 kendo.data.HierarchicalDataSource 对象。在这个函数的最后，如果数据源确实有数据，我想用数据设置一个树视图（这已经在工作了）。如果它没有数据，而不是设置树视图，我想让一个标签可见，告诉用户没有数据。

我的问题：如何确定 HierarchicalDataSource 中有/没有数据？当我尝试调用任何函数或获取 getData 的任何属性时，它返回未定义。

function loadTreeGroupData(applicationId) {
    var treeview = $("#treeview-kendo").data("kendoTreeView");
    var url = $('#urlHolders').data("gettreeUrl");
    var appId = 0;

    if (applicationId != undefined && applicationId != "")
        appId = applicationId;

    var getData = new kendo.data.HierarchicalDataSource({
        change: function (e) {
            for (var i = 0; i < e.items.length; i++) {
                e.items[i].load();
            }
        },
        transport: {
            read: {
                url: url, //"GetAlertsTree",
                dataType: "json",
                contentType: "application/json",
                data: { applicationId: appId }
            }
        },
        schema: {
            model: {
                id: "id",
                hasChildren: "hasChildren",
                children: "measureGroups"
            }
        }
    });   

    if (/*the treeview has data*/) {
        treeview.setDataSource(getData);
    } else {
        /*set a label that tells the user that there's no data*/
    }

}

标签： javascriptkendo-uitelerik

解决方案

I would suggest you to do the following changes in your code:

  1. Set the HierarchycalDataSource at the treeView initialization, instead of add it later;

  2. Declare treeView's div and label as display:none or whatever the way you hide them;

  3. Use DataSource's requestEnd event to show/hide the elements.

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/treeview/remote-data-binding">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
    
    

</head>
<body>
            <div id="example">
            <div class="demo-section k-content">
                <div id="treeview" style="display: none"></div>
                <div id="no-data-label" style="display: none">No data found</div>
            </div>
            <script>
              
                var serviceRoot = "https://demos.telerik.com/kendo-ui/service";
                    homogeneous = new kendo.data.HierarchicalDataSource({
                        transport: {
                            read: {
                                url: serviceRoot + "/Employees",
                                dataType: "jsonp"
                            }
                        },
                        schema: {
                            model: {
                                id: "EmployeeId",
                                hasChildren: "HasEmployees"
                            }
                        },
                        requestEnd: (e) => {
                          if (e.response && e.response.length) {
                            $("#treeview").show();
                            $("#no-data-label").hide();
                          }
                          else {
                            $("#treeview").hide();
                            $("#no-data-label").show();
                          }
                        }
                    });

                $("#treeview").kendoTreeView({
                    dataSource: homogeneous,
                    dataTextField: "FullName"
                });
            </script>
        </div>


    

</body>
</html>

Dojo

推荐阅读