React with Kendo-ui Grid - Wrong column header

Question

I have a React application using redux as state manager. In this application we are deciding to use Kendo Ui grids. The first test is Ok but we noticed that the columns are totally wrong. We define only 5 Columns to be displayed in the table but we noticed that all the columns from the json object get displayed. For example in the render method I have this code:

render() {
        return (
            <div>
                <Grid
                    style={{ height: '400px' }}
                    data={this.state.gridData}
                >
                    <Column field="ProductID" title="ID" width="40px" />
                    <Column field="ProductName" title="Name" width="250px" />
                    <Column field="Category.CategoryName" title="CategoryName" />
                    <Column field="UnitPrice" title="Price" width="80px" />
                    <Column field="UnitsInStock" title="In stock" width="80px" />
                </Grid>
            </div>
        );
    }

which should show only:

ID  |  Name  |  CategoryName  |  Price  |  In stock

but what it renders are those headers:

ProductID | ProductName | SupplierID | CategoryID | UnitPrice | UnitsInStock

which are the from the json object directly:

"ProductID " : 1,
"ProductName" : "Chai",
"SupplierID" : 1,
"CategoryID" : 1,
"UnitPrice" : 18.0000,
"UnitsInStock" : 39

In other words, no matter which columns I define (as <Column /> tag), the grid shows always the json field as column headers.

Following libs are imported:

import { Grid, GridColumn as Column, GridCell } from '@progress/kendo-react-grid';

I'm using exactly the exmaple from this page: https://www.telerik.com/kendo-react-ui/components/grid/

There is no error in the console, so it is hard to find whats going on. Any idea?

Update: I added this console.log statement and i see that the columns are empty:

constructor(props: IProps) {
   super(props);
   this.state = { producuts: [{ ProductID: 'Cindy', ProductName: 'Jones', UnitPrice: '[email protected]' }]
        };

        this.grid = null;
      }
      render() {
        return (
          <div>
                <Grid
                    data={this.state.producuts}
                    reorderable={true}
                    ref={(g) => { this.grid = g; }}
                >
                    <GridColumn field="ProductID" title="ID" />
                    <GridColumn field="ProductName" title="Name" />

                </Grid>
                <button onClick={() => {
                  console.log(this.grid);
                  console.log(JSON.stringify(this.grid.columns));
                  }}>
                  log current properties into browser console.
                </button>
          </div>
        );
      }

This line console.log(JSON.stringify(this.grid.columns)) has always empty array result []

Although the headers should be:

ID | Name

but they appear like this:

Answer 1

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.