How do I generate React Kendo dynamically?

Question

I'm trying to build a kendo grid using the new KendoReact library, and my render method is below.

render() {
    var allColumns = this.state.data.length > 0 ? Object.keys(this.state.data[0]) : []
    var columnsToShow = allColumns.map((item,i) => <GridColumn field={item} key={i} />);
    return (<div> 
        <Grid
            data={this.state.data}
        >
            {columnsToShow}

        </Grid>
    </div>
    );
}

Since GridColumns have to be defined (not automatic), I wanted to generate them dynamically, i.e. in line 3 var columnsToShow. Could someone help me understand why the columns don't show, but the data does render? (I know data is present because if I define it sepecifically <GridColumn field="Name" /> it works.)

score 1 · Accepted Answer · answered Oct 15 '18 at 07:09

It seems that the code above is fine. When using your dynamic creation of columns

var allColumns = this.state.data.length > 0 ? Object.keys(this.state.data[0]) : []
var columnsToShow = allColumns.map((item,i) => <GridColumn field={item} key={i} />);

inside the official Kendo React Grid demo the columns are generated successfully. The columns titles could be changed via applying the Title prop on each column.

How do I generate React Kendo dynamically?

1 Answers1