New to Kendo UI for jQuery? Download free 30-day trial

Use Kendo UI Widgets in the Column Template of the Grid Wrapper for React


Product Version 2018.1 117
Product Progress® Kendo UI® Wrappers for React


I am using the Kendo UI Grid React wrapper and have a button inside the Grid which uses a column template similar to the following:

<GridColumn width="60px" template='<button class="k-button submit"\>Skicka </button\>' /\>
<GridColumn template='<span style="color:red; font-weight: bold; font-size: 16px;" "<button class="k-button exclude" \>X</button\></span\>' width="20px" /\>  

How can I have a button group instead and implement it by using Kendo UI Wrappers for React?


Currently, you can initialize the column templates which use Kendo UI widgets with jQuery by utilizing dataBound event of the Grid.

<Grid dataSource={this.dataSource} dataBound={this.onDataBound}>
  <GridColumn template="<div class='toolbar'>"/>

class GridContainer extends React.Component {
 constructor(props) {
   this.onDataBound = function(){
        index : 1

For more information on how to implement the suggested approach, refer to this example.

In this article