Question

grid.kendoGrid({
    dataTextField: "Description",
    dataValueField: "ID",
    dataSource: {
        data: gridData
    },
    filterable: {
        extra: false,
        operators: {
            string: {
                startswith: $("#" + getId(controlPrefix, "hiddenFilterStartsWith")).val(),
                endswith: $("#" + getId(controlPrefix, "hiddenFilterEndsWith")).val(),
                eq: $("#" + getId(controlPrefix, "hiddenFilterEq")).val(),
                neq: $("#" + getId(controlPrefix, "hiddenFilterNeq")).val(),
                contains: $("#" + getId(controlPrefix, "hiddenFilterContains")).val()
            }
        },
        messages: {
            clear: $("#" + getId(controlPrefix, "hiddenFilterClear")).val(),
            filter: $("#" + getId(controlPrefix, "hiddenFilterFilter")).val(),
            info: $("#" + getId(controlPrefix, "hiddenFilterInfo")).val()
        }
    },
    columns: [
        { field: "ID", title: gridTitles[0], width: 200 },
        { field: "Description", title: gridTitles[1], width: 200 }
    ],
    height: 450,
    selectable: "row",
    change: function (e) {
        this.element.find(".k-grid-content").animate({
            scrollTop: this.select().offset().top - this.element.find('.k-grid-content').offset().top
        });
    }
});

我有这个kendo网格，我想要选择一个项目并自动滚动到它，更改事件被触发但是当我从代码中选择offset（）。top时，两个元素的值都相同，当我选择它时使用鼠标工作

在这里，我在代码中进行选择

var employeeFilter = $("#" + getId(controlPrefix, inputControlId)).val();

if (employeeFilter != "") {
    grid.data("kendoGrid").select(grid.data("kendoGrid").tbody.find(">tr:has(td:contains('" + employeeFilter + "'))"));
}

如果有人可以帮助我使用代码选择项目并自动滚动到它？

Answer 1

你的行选择器是正确的，但我这样缩短了它：

grid.data("kendoGrid").select(grid.find("tr:has(td:contains('" + employeeFilter + "'))"));

问题是如何计算scrollTop的值。由于您在网格上使用animate()而不是整个页面，因此您需要行与网格的相对偏移，而不是页面。您可以使用position()获得父级的相对偏移量（offset()为您提供相对于文档的偏移量）。并且您不需要减去网格的偏移量，实际上您需要添加scrollTop()值以获得scrollTop的正确值，即使网格已经滚动也是如此。

这就是你的工作方式：

var kendoGrid = grid.data("kendoGrid");
kendoGrid.element.find(".k-grid-content").animate({
                            scrollTop: kendoGrid.select().position().top 
                                       - kendoGrid.element.find('.k-grid-content').position().top 
                                       + kendoGrid.element.find('.k-grid-content').scrollTop()
                    });

您可以在此处试用：http://dojo.telerik.com/OvIMa

以编程方式选择行时，滚动到所选行

1 个答案: