Kendo React UI Grid 滚动到末列问题 如何添加箭头按钮无需滚动浏览全列

Kendo React UI 的 Grid 组件原生支持列滚动导航箭头功能，无需完全自定义开发，具体实现方式如下：

方法1：使用内置滚动箭头（推荐） #

最新版本的 Kendo React Grid 已经封装好了列滚动按钮能力，仅需要给 Grid 组件的 scrollable 属性添加 scrollButtons: true 配置即可直接生效：

<Grid
  data={tableData}
  scrollable={{
    horizontal: true,
    scrollButtons: true // 开启内置滚动箭头
  }}
  // 其余Grid配置项
>
  {/* 列定义 */}
</Grid>

开启后Grid会自动在内容区域的左右两侧渲染固定的滚动箭头，点击即可按固定步长横向滚动浏览列，滚动到边界时对应箭头会自动禁用。

方法2：自定义滚动箭头（适用于需要定制按钮样式/交互的场景） #

如果内置的箭头样式、滚动逻辑不符合业务需求，可以通过Grid暴露的实例方法自定义实现，核心代码示例如下：

import { useRef } from 'react';
import { Grid, GridColumn } from '@progress/kendo-react-grid';

const CustomScrollGrid = () => {
  const gridRef = useRef(null);
  // 左滚动
  const handleScrollLeft = () => {
    gridRef.current?.element.querySelector('.k-grid-content').scrollBy({
      left: -300, // 自定义滚动步长
      behavior: 'smooth' // 平滑滚动效果，不需要可去掉
    });
  };
  // 右滚动
  const handleScrollRight = () => {
    gridRef.current?.element.querySelector('.k-grid-content').scrollBy({
      left: 300,
      behavior: 'smooth'
    });
  };

  return (
    <div style={{ position: 'relative' }}>
      {/* 自定义箭头按钮，可根据需要修改样式 */}
      <button onClick={handleScrollLeft} style={{ position: 'absolute', left: 0, top: '50%', zIndex: 10 }}>←</button>
      <button onClick={handleScrollRight} style={{ position: 'absolute', right: 0, top: '50%', zIndex: 10 }}>→</button>
      <Grid
        ref={gridRef}
        data={tableData}
        scrollable={{ horizontal: true }}
        // 其余Grid配置项
      >
        <GridColumn field="id" title="ID" width={120} />
        <GridColumn field="name" title="名称" width={150} />
        {/* 其余列定义 */}
      </Grid>
    </div>
  );
};

• 你可以根据需求调整按钮的样式、滚动步长、触发逻辑，也可以添加边界判断，当滚动到最左侧/最右侧时禁用对应按钮。

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