Question

我有一个带有两个标签的标签条。在第一个标签中，我有一个搜索文本框和网格来显示搜索结果。当用户使用搜索框找到项目时，他们会选择网格中的项目，并将标签切换到树视图并选择树视图中的项目（所有这些组件都是kendo ui mvc）。

搜索正在运行并且选择了树视图项，但是它没有向下滚动到视图中的项目位置。这是我的代码，但无法使滚动工作。我正在使用jquery插件scrollto。

Index.cshtml：

<body>
    <div class="container-fluid">
        <section style="padding-top:10px;"></section>
        <div style="float:left; position:fixed">
            @(Html.Kendo().TabStrip()
                .Name("tabstrip")
                .Events(events => events
                    .Activate("onTabActivate")
                )
                .Items(tabstrip =>
                {
                    tabstrip.Add().Text("Search")
                        .Selected(false)
                        .Content(@<text>
                            <div>
                                <div style="padding-bottom:5px; padding-bottom:5px;">
                                    <input type="text" class="clearable" id="search" name="search" placeholder="Enter a Account Name or Number" />
                                </div>
                                @(Html.Kendo().Grid<SageEMS.CRM.WebApp.DataService.AccountTreeItem>()
                                        .Name("searchGrid")
                                        .Events(events => events
                                            .Change("onGridSelect"))
                                        .Columns(columns =>
                                        {
                                            columns.Bound(acc => acc.AccountName);
                                        })
                                         .DataSource(dataSource => dataSource
                                                                        .Ajax()
                                                                        .Model(model => model.Id(w => w.Account))
                                                                        .ServerOperation(false)
                                                                        .Read(read => read.Action("LoadSearchResult", "Home").Data("searchAccounts"))
                                        )
                                     .Pageable()
                                     .Selectable()
                                )
                            </div>
                        </text>);
                    tabstrip.Add().Text("Accounts")
                    .Selected(false)
                    .Content(@<text>
                        <div class='k-scrollable' style='height: 400px; overflow: auto;'>
                            @(Html.Kendo().TreeView()
                                .Name("treeview")

                                .Events(events => events
                                    .Expand("onExpand")
                                    .Select("onTreeviewSelect"))
                                .DataTextField("AccountName")
                                .DataSource(dataSource => dataSource
                                    .Model(m => m
                                    .Id("Account")
                                    .HasChildren("HasChildren"))
                                    .Read(read => read.Action("LoadAccountTree", "Home").Data("loadChildren"))
                                )
                            ))
                        </div>
                    </text>);

                })
            )
        </div>

        <div id="dvSections" style="padding-left:450px;">
            @{Html.RenderPartial("Sections", Model);}
</div>

</div>
<script>
    var _selectedAccount = null;
    var _selectedTrackingItem = null;
    var _searchValue;
    var _selectedGridItem = null;

    var $search = $('#search');
    var $treeview = $("#treeview");
    var $searchGrid = $("#searchGrid");
    var $txtSelectedAccount = $('#txtSelectedAccount');
    var $tabstrip = $("#tabstrip");

    $search.on('change keyup copy paste cut', function () {
        // set delay for fast typing
        setTimeout(function () {
            _searchValue = $('#search').val();
            $searchGrid.data("kendoGrid").dataSource.read();
        }, 500);
    });

    $(function () {

        $txtSelectedAccount.text("All");
        $treeview.select(".k-first");
    });

    function searchAccounts() {
        if (_searchValue) {
            return {
                searchTerm: _searchValue
            };
        }
    }

    function onExpand(e) {

        _selectedAccount = $treeview.getKendoTreeView().dataItem(e.node).id;
        $txtSelectedAccount.text(this.text(e.node));
    }

    function loadChildren() {

        if (_selectedAccount) {
            return {
                id: _selectedAccount
            };
        }
    }

    function onTabActivate(e) {

        var tab = $(e.item).find("> .k-link").text();

        if (tab == "Search")
            $search.focus();

        if (tab == "Accounts") {

            if (_selectedGridItem == null) return;

            var dataItem = getTreeItem(_selectedGridItem.id);

            if (dataItem)
                selectNodeInTree(dataItem);
        }
    }

    function onTreeviewSelect(e) {

        _selectedAccount = $treeview.getKendoTreeView().dataItem(e.node).id;
        $txtSelectedAccount.text(this.text(e.node));
    }

    function onGridSelect(e) {

        var grid = $searchGrid.data("kendoGrid");
        _selectedGridItem = grid.dataItem(grid.select());

        var tabStrip = $tabstrip.kendoTabStrip().data("kendoTabStrip");
        tabStrip.select(1); 

        // Get the tree item and select it
        var dataItem = getTreeItem(_selectedGridItem.id);

        if (dataItem)
            selectNodeInTree(dataItem);
        else
            findExpandSearch(_selectedGridItem.id);
    }

    function getTreeItem(id) {

        var treeView = $treeview.data('kendoTreeView');
        var dataSource = treeView.dataSource;
        var dataItem = dataSource.get(id);

        return dataItem;
    }

    function findExpandSearch(id) {

        // item is not loaded in treeview yet, find parent and trigger load children and search again
        var url = "@Url.Action("LoadTreePath")";
        $.ajax({
            url: url,
            type: "POST",
            data: JSON.stringify({ id: id }),
            dataType: "json",
            contentType: 'application/json; charset=utf-8',
            cache: false,
            success: function (data) {
                if (data && data.length > 1) {

                    $.each(data, function (index, value) {
                        _selectedAccount = value;
                        loadChildren();
                    });

                    var dataItem = getTreeItem(data[0]);

                    if (dataItem)
                        selectNodeInTree(dataItem);
                }
            },
            error: function (error, h, status) {
                alert(error.responseText);
            }
        });
    }

    function selectNodeInTree(item) {

        var treeView = $treeview.data("kendoTreeView");
        var node = treeView.findByUid(item.uid);

        if (node) {
            treeView.select(node);
            treeView.trigger("select", { node: node });
            treeView.element.closest(".k-scrollable").scrollTo(treeView.select(), 450);
        }
        else
           alert('Account not found in tree.');
    }  
</script>
<script src="../../Content/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>

我使用了以下示例作为指南：

http://dojo.telerik.com/uYutu/23

任何建议都表示赞赏，提前谢谢。

Answer 1

您发布的示例通过滚动拆分器的k窗格来工作。您正在创建树的标签页没有k-scrollable，因此您需要创建自己的可滚动容器：

<div class='scrollable' style='height: 300px; overflow: auto;'>
    <div id="treeview-left"></div>
</div>

然后滚动

tree.element.closest(".scrollable").scrollTo(tree.select(), 150)

另外，我认为不需要触发select事件，因为select方法会为你做这件事。

（demo）

Answer 2

我在Treeview设置中遇到了类似的问题，这个问题与你的很接近，并且正如LarsHöppner的解决方案中所描述的那样使用了scrollTo（）。

我的问题原来是应用于我的树视图的高度样式。在树视图上定义任何高度会破坏scrollTo（）操作。一旦我删除了违规的CSS课程，它工作正常。要检查的东西。

kenodui treeview滚动到节点问题

2 个答案: