Grid / API / Grid
material theme

Grid

A subclass of React.Component.

Represents the KendoReact Grid component.

class App extends React.Component {
   constructor(props) {
       super(props);
       this.state = {
           data: [
               { 'foo': 'A1', 'bar': 'B1' },
               { 'foo': 'A2', 'bar': 'B2' },
               { 'foo': 'A3', 'bar': 'B2' }
           ]
       };
   }
   render() {
       return (
           <Grid
               data={this.state.data}
               reorderable={true}
           >
               <GridColumn field="foo" />
               <GridColumn field="bar" />
           </Grid>
       );
   }
}
ReactDOM.render(<App />, document.querySelector('my-app'));

props Readonly<GridProps> intersected with Readonly<{ children?: ReactNode; }>

The props of the Grid component.

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.

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [
                { 'foo': 'A1', 'bar': 'B1' },
                { 'foo': 'A2', 'bar': 'B2' },
                { 'foo': 'A3', 'bar': 'B2' }
            ]
        };
        this.grid = null;
    }
    render() {
        return (
            <div>
                <Grid
                    data={this.state.data}
                    reorderable={true}
                    ref={(g) => { this.grid = g; }}
                >
                    <GridColumn field="foo" />
                    <GridColumn field="bar" />
                </Grid>
                <button onClick={() => console.log(JSON.stringify(this.grid.columns))}>
                    log current properties into browser console.
                </button>
            </div>
        );
    }
}
ReactDOM.render(<App />, document.querySelector('my-app'));
 /