Question

我们利用Kendo UI的树形视图来查看用户创建的节点的分层视图。每个节点只是一个容器，可以单击它以切换其下方的抽屉，该抽屉显示用户的任务和其他详细信息。当用户单击容器并显示在Kendo网格中时，将通过API调用按需获取此数据。

每个节点还可以包含子节点，可以使用Treeview的常规功能对其进行扩展/折叠：单击节点左侧的箭头可以显示/隐藏其下方的所有内容。子树显示在节点抽屉的下方。

当用户尝试为其信息抽屉已打开的节点扩展子代时，出现了我的问题。此时已经填充了Kendo网格，但是expand函数似乎试图重新加载网格的内容，并返回“ Uncaught TypeError：无法读取属性'length'为null”，这可能是因为网格正在尝试显示空。

到目前为止，我已经尝试调查了为什么展开/折叠Kendo函数试图重新加载节点的数据，但是无济于事。一次只能打开一个节点抽屉，因此我真的只需要提取一次数据（当用户第一次单击该特定节点时）。

树视图模板：

<div class="tree"
            data-role="treeview"
            data-load-on-demand="false"
            data-auto-bind='false'
            data-drag-and-drop="true"
            data-bind="source: dsDisplayedPriorities">
        </div>

JS代码，可在单击节点时主动填充该节点的抽屉。基本上，这将找到优先级的（节点的）ID，并获取与之关联的所有任务，并将其存储在“任务”对象中。该对象充当剑道网格的数据源。

clickTogglePriorityDetail: function (e: any) {
            var priorityID = e.data.RockID;
            var vmDetails = kendo.observable({
                PriorityOwner: e.data.RockOwner,
                PriorityOwnerPicture: e.data.Picture,
                PriorityDescription: e.data.RockDescription,
                PriorityName: e.data.RockName,
                Tasks: null
            });

            getPriorityTasks(priorityID).done(function (priorityTaskModel: any) {
            var retrievedTasks = new kendo.data.DataSource({
                            data: priorityTaskModel,
                            schema: {
                                model: {
                                    id: "ID"
                                }
                            }
                        });
            vmDetails.set('Tasks', retrievedTasks.options.data);
            var populatedDetail = priorityDetail.append(priorityDetailTemplate);
                        kendo.bind(populatedDetail, vmDetails);
                    }).fail(function (error: any) {
                    });
                }
        },

显示显示任务的剑道网格的模板：

<script id="templatePriorityInfo" type="text/x-kendo-template">
    <div class="spaced-modules">
        <div>
            <h3>
                <span data-bind="text:PriorityDescription"></span>
            </h3>
        </div>
    </div>
    <div class="spaced-modules">
        <div>
            <div class="grid thin task-preview no-scroll"
                 data-role="grid"
                 data-bind="source: Tasks"
                 data-sortable='true'
                 data-scrollable='false'
                 data-auto-bind='false'
                 data-pageable='{ "pageSize": 3 }'
                 data-row-template='priority-detail-tasks-row-template'
                 data-columns="[{title:'Related Tasks', width: 110},{title:'Due Date'}]">
            </div>
        </div>
    </div>
</script>

Kendo Treeview：节点正在尝试在扩展时重新加载内容，但返回null

0 个答案: