Компонент реакции DevExtreme DataGrid, проблема с мастером/подробностью

Мне нужна помощь, чтобы использовать шаблон Master/Detail в компоненте DataGrid пакета DevExtreme для реагирования. У меня есть эти ошибки:

# Вышеупомянутая ошибка произошла в компоненте: в DataGrid (созданном приложением) в div (созданном приложением) в приложении#

#TypeError: contentProvider не является функцией#

Кажется, что DataGrid не хочет работать с шаблоном, так как ошибка возникает только тогда, когда шаблон присутствует в коде.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import DataGrid, {Column,FilterRow,Pager,Paging,Editing,ColumnLookup} from "devextreme-react/ui/data-grid";
import * as AspNetData from "devextreme-aspnet-data-nojquery";
import { Template } from 'devextreme-react/core/template';

export default class App extends React.Component<any, IProp> {
        ....

    public render() {
        return (
            <div>
            <DataGrid
                dataSource={this.state.dataSource}
                remoteOperations={true}
                masterDetail={{enabled: true, template: "details"}}>

                <Template name="details">
                    <div>Hello</div>
                </Template>


                <Column dataField="name" caption="Наименование ДУ"/>
                <Column dataField="mnemoCode" caption="Мнемокод" dataType="string" />

                <Pager
                    allowedPageSizes={[5, 10, 15, 20]}
                    showPageSizeSelector={true}
                    showInfo={true}
                />
                <Paging
                    defaultPageIndex={0}
                    defaultPageSize={10}
                />
                </DataGrid>
            </div>
        );
    }
}

reactjs master-detail datagrid devextreme
person Victor Kharchenko    schedule 27.09.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Компонент шаблона требует рендеринга или свойств компонента (включенный контент не поддерживается).

Я бы рекомендовал использовать конфигурационный компонент MasterDetail, а не шаблон:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import DataGrid, {Column,FilterRow,Pager,Paging,Editing,ColumnLookup, MasterDetail} from "devextreme-react/ui/data-grid";
import * as AspNetData from "devextreme-aspnet-data-nojquery";

const DetailComponent = (props: any) => {
    return (
        <p>Row data:
            <br/>
            {JSON.stringify(props.data)}
        </p>
    );
};

export default class App extends React.Component<any, IProp> {
        ....

    public render() {
        return (
            <div>
            <DataGrid
                dataSource={this.state.dataSource}
                remoteOperations={true}>

                <Template name="details">
                    <div>Hello</div>
                </Template>


                <Column dataField="name" caption="Наименование ДУ"/>
                <Column dataField="mnemoCode" caption="Мнемокод" dataType="string" />

                <Pager
                    allowedPageSizes={[5, 10, 15, 20]}
                    showPageSizeSelector={true}
                    showInfo={true}
                />
                <Paging
                    defaultPageIndex={0}
                    defaultPageSize={10}
                />
                <MasterDetail enabled={true} component={DetailComponent} />
                </DataGrid>
            </div>
        );
    }
}
person Ilya Kh.D    schedule 27.09.2018
comment
Но как установить свойства DetailComponent? - person Rokusjar; 06.06.2019