Реагируйте с Kendo-ui Grid - Неправильный заголовок столбца - PullRequest
Новая
       45

Реагируйте с Kendo-ui Grid - Неправильный заголовок столбца

0 голосов
/ 03 сентября 2018

У меня есть приложение React, использующее Redux в качестве менеджера состояний. В этом приложении мы решаем использовать сетки Kendo Ui. Первый тест в порядке, но мы заметили, что столбцы совершенно неверны. Мы определяем только 5 столбцов для отображения в таблице, но мы заметили, что отображаются все столбцы из объекта json. Например, в методе рендеринга у меня есть этот код: 

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>
        );
    }

, который должен показывать только: 

ID  |  Name  |  CategoryName  |  Price  |  In stock

но он отображает заголовки: 

ProductID | ProductName | SupplierID | CategoryID | UnitPrice | UnitsInStock

непосредственно из объекта json: 

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

Другими словами, независимо от того, какие столбцы я определяю (как тег <Column />), сетка всегда показывает поле json в качестве заголовков столбцов.

Импортированы следующие библиотеки: 

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

Я использую именно пример с этой страницы: https://www.telerik.com/kendo-react-ui/components/grid/

В консоли нет ошибок, поэтому трудно найти, что происходит. Есть идеи?

Обновление: Я добавил этот оператор console.log и вижу, что столбцы пусты: 

constructor(props: IProps) {
   super(props);
   this.state = { producuts: [{ ProductID: 'Cindy', ProductName: 'Jones', UnitPrice: 'cindy.jones@telerik.com' }]
        };

        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>
        );
      }

Эта строка console.log(JSON.stringify(this.grid.columns)) всегда содержит пустой массив []

Хотя заголовки должны быть: 

ID | Name

но они выглядят так: enter image description here

1 Ответ

0 голосов
/ 04 сентября 2018

У меня недавно была такая же проблема. Мы используем «ответный горячий загрузчик», который приводит к описанной вами ошибке.

В исходном коде сетки приведено сравнение типов: 

this.initColumns(children.filter(function (child) { return child && child.type === GridColumn; }));

При использовании реагирующего с горячей загрузкой столбца имеет тип не GridColumn, а тип Proxycomponent. Таким образом, проверка типа завершается неудачно, и сетка отображает столбцы по умолчанию.

Обход: 

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;

Отключение создания прокси решает проблему, но этот обходной путь довольно грязный.

В нашем проекте мы отключили ответную-горячую загрузку, чтобы решить эту проблему.

...