我有一个带有两个选项卡的选项卡条。在第一个选项卡中，我有一个搜索文本框和网格来显示搜索结果。当用户使用搜索框找到该项目时，他们在网格中选择该项目，并将选项卡切换到 Treeview 并在 Treeview 中选择该项目(所有这些组件都是 kendo ui mvc)。
搜索正在运行并且 Treeview 项目已被选择，但是它尚未向下滚动到 View 中的项目位置。这是我的代码，但无法使滚动工作。我正在使用jquery插件scrollto。
索引.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
任何建议表示赞赏，提前致谢。
最佳答案
您发布的示例通过滚动拆分器的 k Pane 来工作。您要在其中创建树的选项卡条没有 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 )
关于javascript - kenodui Treeview滚动到节点问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28733244/