如何阻止Kendo Grid命令列Ajax调用后网格自动滚动至顶部

你遇到的这个问题很常见——Kendo Grid的命令按钮自带一些内部事件逻辑，单纯的e.preventDefault()只能拦截浏览器层面的默认行为，没办法阻止Grid自身触发的滚动重置。我给你两个针对性的解决方案：

方案1：彻底拦截事件冒泡与默认行为 #

在点击事件里同时添加e.stopPropagation()，阻止事件向上冒泡到Grid的内部处理逻辑，这样就能避免触发滚动重置。另外我还修正了你代码里URL拼接的语法错误（Razor语法不能直接引用客户端的data变量）：

command: [
    {
        name: "reset",
        text: " ",
        className: "btn btn-sm btn-warning fas fa-undo",
        click: function (e) {
            // 同时阻止默认行为和事件冒泡，切断Grid的内部触发逻辑
            e.preventDefault();
            e.stopPropagation();
            
            var tr = $(e.target).closest("tr");
            var data = this.dataItem(tr);
            data.set("Decision", "testtest");
            
            // 修正URL拼接方式：先通过Razor生成基础地址，再拼接客户端参数
            $.ajax({
                url: '@Url.Action("Waiting", "Absence")' + '?Register_ID=' + data.Register_ID,
                type: "POST"
            });
        },
    }
]

方案2：手动保存并恢复滚动位置 #

如果方案1仍然无效，大概率是data.set()触发了Grid的UI重绘，导致滚动位置被重置。这时候可以在数据更新前记录滚动位置，重绘完成后再恢复：

command: [
    {
        name: "reset",
        text: " ",
        className: "btn btn-sm btn-warning fas fa-undo",
        click: function (e) {
            e.preventDefault();
            e.stopPropagation();
            
            var grid = this;
            // 记录Grid当前的滚动高度
            var scrollPosition = grid.content.scrollTop();
            
            var tr = $(e.target).closest("tr");
            var data = grid.dataItem(tr);
            data.set("Decision", "testtest");
            
            // 用setTimeout确保UI重绘完成后再恢复滚动
            setTimeout(function(){
                grid.content.scrollTop(scrollPosition);
            }, 0);
            
            $.ajax({
                url: '@Url.Action("Waiting", "Absence")' + '?Register_ID=' + data.Register_ID,
                type: "POST"
            });
        },
    }
]

额外提醒 #

如果你的Ajax请求完成后会调用grid.dataSource.read()这类刷新操作，也会导致滚动到顶部，这时候需要把滚动恢复逻辑放到dataBound事件里执行。

内容的提问来源于stack exchange，提问作者Creedplay