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

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
        });
    }
});

I have this kendo grid and I wanto to select a item and automatic scroll to it, the change event is triggered but when I select from code the offset().top has the same values for both elements and when I select it with the mouse it works

Here I make the selection in the code

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

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

If somebody can help me to select the item using code and automatic scroll to it ?

Answer 1

您的行选择器是正确的，但我将其缩短为：

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

问题在于如何计算 scrollTop 的值。由于您在网格上而不是在整个页面上使用 animate()，因此您需要行相对于网格而不是页面的相对偏移量。即使网格已经滚动，您也可以使用 position() (offset() gives you the offset relative to the document). And you don't need to substract the offset of the grid, actually you need to add the 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

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

Scroll to selected row when the row is selected programatic

scroll

kendo-grid

selecteditem