Как обработать заголовок большого столбца для переноса на следующую строку - PullRequest
Новая
       23

Как обработать заголовок большого столбца для переноса на следующую строку

0 голосов
/ 03 апреля 2019

Я использую AGGrid в своем коде React, и некоторые тексты заголовков столбцов слишком длинные, поэтому при их отображении я не могу прочитать весь заголовок столбца, но вижу несколько ... Есть ли способ обернуть текст заголовка в следующую строку, не увеличивая всю ширину столбца? Я пытался использовать setHEaderHeight. это не переносит текст на следующую строку. 

type Props = {
    comDto:CompDTO;
}
type State = {
}

const componentCssClass = componentStyle(`
    
    .ag-cell.fullText {
        white-space: normal;
        word-break: normal;
        line-height: 1.4em;
        padding-top: 4px;
        padding-bottom: 4px;
    }      
`);

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

    static compCols: Array<ColDef> = [
        {headerName: 'Market', field: 'marketType.marketName', width: 250},
        {headerName: 'My Role', field: 'myConfirmationRole', width: 150},
        {headerName: 'CP Matching', field: 'partyMatchingRole', width: 150},
        {headerName: 'BR Matching', field: 'MatchingRole', width: 150},
        {headerName: 'Reg Role', field: 'usRegRole', width: 150},
        {headerName: 'Create USIs on My Behalf', field: 'createUSIOnBehalf',
            cellRenderer: 'renderer_complistcheckbox'},
        {headerName: 'Voluntarily Report to MY Company', field: 'voluntaryReport', 
            cellRenderer: 'renderer_complistcheckbox'},
        {headerName: 'Use VICE DCO Valuation', field: 'useDCOValuations', width: 200,
            cellRenderer: 'renderer_comlistcheckbox'},
    ];

    private static gridComponents = {
        'renderer_complistcheckbox': CellRenderer_ReadOnlyCheckbox
    };

    render(){
        const {compDto} = this.props;
        return (
            <div className={cx(flexAgGridContainerCss, componentCssClass)}>
                <AgDataGrid
                    frameworkComponents={ComGrid.gridComponents}
                    columnDefs={CompGrid.compCols}
                    suppressMovableColumns
                    suppressCellSelection
                    suppressRowHoverHighlight
                    rowData={compDto.marketRoles}
                    onGridReady={CompGrid.onGridReady}
                    onGridSizeChanged={CompGrid.onGridSizeChanged}
                    onColumnResized={CompGrid.onColumnResized}
                />
            </div>

        );
    }

    private static onGridReady(params) {
        const gridApi = params.api;
        gridApi.setHeaderHeight(30);
        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...
    }


}

спасибо

1 Ответ

0 голосов
/ 04 апреля 2019

Насколько я понимаю, вы ищете autoSizeColumn(). 

.
.
let ColumnApi;
.
.
onGridReady= (gridApi, columnApi ) => {
    gridApi.setHeaderHeight(30);
    gridApi.sizeColumnsToFit();
    ColumnApi = columnApi;
    this.autoSizeColumn();
};

autoSizeColumn = () => {
    let allcolumn = [];
    ColumnApi.getAllColumns().forEach((column) => {
        allcolumn.push(column.colId);
    });
    ColumnApi.autoSizeColumns(allcolumn);
}

Вы можете назвать это autoSizeColumn ();, откуда вы добавляете свои строки.Его базовая перестановка размера заголовка столбца для строки с максимальной шириной делает размер заголовка вашего столбца.

Примечание: autoSizeColumn функция не изменяет заголовки столбцов, которые не видны на странице.

Для получения дополнительной информации и документов вы можете проверить эту ссылку

...