New to KendoReactLearn about KendoReact Free.

GridHandle

Represent the ref of the Grid component.

NameTypeDefaultDescription

columns

GridColumnProps[]

A getter of the current columns. Gets the current column width or current columns, or any other GridColumnProps for each defined column. Can be used on each Grid instance. To obtain the instance of the rendered Grid, use the ref callback. The following example demonstrates how to reorder the columns by dragging their handlers and check the properties afterwards. You can check the result in the browser console.

jsx
const App = () => {
    const [data, setData] = useState([
        { foo: 'A1', bar: 'B1' },
        { foo: 'A2', bar: 'B2' },
        { foo: 'A3', bar: 'B2' }
    ]);

    const grid = useRef<GridHandle>();

    return (
        <div>
            <Grid data={data} reorderable={true} ref={grid}>
                <GridColumn field="foo" />
                <GridColumn field="bar" />
            </Grid>
            <button onClick={() => console.log(JSON.stringify(grid.current?.columns))}>
                log current properties into browser console.
            </button>
        </div>
    );
};

export default App;
ReactDOM.render(<App />, document.querySelector('my-app'));

element

"null" | HTMLDivElement

Returns the HTML element of the Grid component.

fitColumns

(columnIds: string[]) => void

Method to fit columns according to their content.

props

GridProps

The props values of the Spreadsheet.

scrollIntoView

(options: { rowIndex: number; }) => void

Method to allow the scroll to be set to a specific row index when the Grid is scrollable. It is zero based.

Not finding the help you need?
Contact Support