All Components

This website hosts Kendo UI wrappers of Kendo UI for jQuery widgets intended to be used in the React ecosystem.

Go to the native Kendo UI implementations for React

Column Templates

When your projects requires you to render complex displays in the Grid columns, and not single fields, you have to additionally configure the columns.

<GridColumn field="UnitPrice" title="Unit Price" format="{0:c}" width="120px" template="<span class='customElement' style='color:orange;'>#:UnitPrice#</span>" />
  • Templates are only supported in the form of strings. Templates in the form of React components are not currently supported.
  • The rowTemplate configuration is not currently supported.

For more information on column templates, refer to the documentation of the Kendo UI Grid for jQuery.

class GridContainer extends React.Component {
    constructor(props) {
        super(props);

        this.dataSource = new kendo.data.DataSource({
            transport: {
                read:  {
                    url:"https://demos.telerik.com/kendo-ui/service/Products",
                    dataType: "jsonp"
                }
            },
            batch: true,
            pageSize: 10,
            schema: {
                model: {
                    id: "ProductID",
                    fields: {
                        ProductID: { editable: false, nullable: true },
                        ProductName: { validation: { required: true } },
                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                        Discontinued: { type: "boolean" },
                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                    }
                }
            }
        })
    }

    render() {
        return (
            <Grid dataSource={this.dataSource}
                pageable={true} height={450}>
                <GridColumn field="ProductName" title="Product Name" />
                <GridColumn field="UnitPrice" title="Unit Price" format="{0:c}" width="120px" template="<span class='customElement' style='color:orange;'>#:UnitPrice#</span>" />
                <GridColumn field="UnitsInStock" title="Units In Stock" width="120px" />
                <GridColumn field="Discontinued" width="120px" />
            </Grid>
        );
    }
}

ReactDOM.render(
    <GridContainer />,
    document.querySelector('my-app')
);
In this article