score:2

Accepted answer

i recently had the same problem. we are using 'react-hot-loader' which leads to your described error.

in the source code of the grid is a type comparison:

this.initcolumns(children.filter(function (child) { return child && child.type === gridcolumn; }));

when using react-hot-loader a column is not of type gridcolumn, but of type proxycomponent. so the type check fails and the grid renders the default columns.

workaround:

reacthotloader.disableproxycreation = true;

var grid = (<kendogrid data={ { data: this.state.products, total: 1} }
  pageable={true}  >
  <kendocolumn field="productname" title="product name" />
  <kendocolumn field="unitprice" title="unit price" format="{0:c}" width="120px" />
  <kendocolumn field="unitsinstock" title="units in stock" width="120px" />
  <kendocolumn field="discontinued" width="120px" />
</kendogrid>);

reacthotloader.disableproxycreation = false;

disabling the proxy creations solves the problem, but this workaround is quite dirty.

we disabled react-hot-loader in our project to solve this issue.


Related Query

More Query from same tag