Обновление сетки - PullRequest
       7

Обновление сетки

0 голосов
/ 18 июня 2019

Я использую ag-grid для отображения данных. Но не все данные в сетке взяты из rowData, который я передаю в gridAPI. Один из столбцов рассчитывается на основе данных строки и другого набора данных. Сетка также имеет кнопку редактирования при нажатии, появляется диалоговое окно, где пользователь может изменить одно из значений и сохранить на сервере. Когда действие сохранения завершено, диалоговое окно закрывается и управление передается в Grid, но ячейка Grid не обновляется. Я знаю, почему сетка не освежает. причина, по которой я передаю rowData, не обновляется напрямую, но изменился другой набор данных, на основе которого я вычислил одно из значений столбца. Мой код ниже. Если вы видите метод getDefaultMArketName, который используется как valueGetter для второго столбца. это приводит к тому, что сетка не обновляется. Есть указатели?

    type Props = {
    companiesWithMarket: any;
    defaultMarkets:any;
    editMyPreferences?:(companyWithMarket:any)=>void;
    }
    type State = {
    }

    export class MyGrid extends React.PureComponent<Props, State> {

    static contextTypes = {
    menuController: PropTypes.object.isRequired,
    clipboardService: PropTypes.object.isRequired,
    };

    getColumns = memoizeOne( (editMyPreferences): Array<ColDef> =>{
    return [
    {headerName: 'Company', field: 'companyName', width: 500, cellClass: 
    "fullText", autoHeight: true},
    {headerName: 'Default Market', valueGetter: this.getDefaultMarketName,
        width: 500, cellClass: "fullText", autoHeight: true},
    {headerName: 'Edit',  width: 80,
        cellRenderer:'renderer_myPreferencesEdit',
        cellRendererParams:{
            editMyPreferences:editMyPreferences
        }
    }
    ];
    })

   private static gridComponents = {
    'renderer_myPreferencesEdit':CellRenderer_EditMyPreferences
   };

   getDefaultMarketName = (params) => {

    let defaultMarkets= this.props.defaultMarkets;
    let marketName ,i;

    for (i = 0; i < defaultMarkets.length; i++) {
        if (params.data.companyId === defaultMarkets[i].companyId) {
            marketName =  defaultMarkets[i].marketName;
            return marketName;
        }
        else {
            marketName =  "";
        }
    }
    return null;

   };

   render(){

   const {companiesWithMarket,editMyPreferences,defaultMarkets} = 
   this.props;
   const columnDefs = this.getColumns(editMyPreferences);

    return (
        <div className={cx(flexAgGridContainerCss)}>
            <AgDataGrid
                columnDefs={columnDefs}
                frameworkComponents={MyGrid.gridComponents}
                suppressMovableColumns
                suppressCellSelection
                suppressRowHoverHighlight
                rowData={companiesWithMarket}
                deltaRowDataMode
                getRowNodeId={MyGrid.getRowNodeId}
                onGridReady={MyGrid.onGridReady}
                onGridSizeChanged={MyGrid.onGridSizeChanged}
                onColumnResized={MyGrid.onColumnResized}
                onCellContextMenu={this._onContextMenu}
            />
        </div>
        );
     }

    private static onGridReady(params) {
    const gridApi = params.api;
    gridApi.sizeColumnsToFit(); // for * size columns
    }

    private static onGridSizeChanged(params) {
    const gridApi = params.api;

    gridApi.sizeColumnsToFit(); // for * size columns
    }

    private static onColumnResized(params) {
    const gridApi = params.api;

    gridApi.resetRowHeights();  // for autoHeight...
    }

   //this is used to update only one row value instead of updating the  
   whole 
    grid. fast performance
    private static getRowNodeId(data: CompanyDTO) {
    return ''+data.companyId + ','+ data.companyId;
    }

    //private refreshCells(params){
    //    let defaultMarkets = this.props.defaultMarkets;
    //   const gridApi = params.api;
    //}

   _onContextMenu: (agEvent: CellContextMenuEvent) => void =
    createOnGridContextMenu(this,
        MyPreferencesGrid.gridComponents,
        null,
        true);
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...