反应 ag-grid 行自动高度不起作用 [英] React ag-grid row auto height doesn't work

问题描述

我试图在这里实现文档中描述的行自动高度功能:

https://www.ag-grid.com/javascript-grid-row-height/#auto-row-height

但是在我的情况下它似乎不起作用.对我来说，文本根本没有换行，它只是为每一行创建一个长行.

我已尽可能将代码调整到我自己的应用程序中，但也许我错过了一些东西?如果您能查看我的代码并告诉我是否缺少某些内容，我将不胜感激:

const defaultColDefProperties = {弹性:1，可真实，可调整大小:真实，浮动过滤器:真，过滤器:真实，wrapText: 真,自动高度:真，};const columnDefinition = [{headerName: "Key", field: "Key"},{headerName:值"，字段:值"}];const ConfigurationDataGrid = (props) =>{const [gridRowData, setGridRowData] = useState([]);const gridApi = useRef(null);useEffect(async() =>{const getRowData = async() =>{让 rowData = await WebApi.getRowData();setGridRowData(rowData);}等待 getRowData();},[]);const onGridReady = 参数 =>{gridApi.current = params.api;}const onColumnResized = (params) =>{params.api.resetRowHeights();}const onColumnVisible = (params) =>{params.api.resetRowHeights();}返回 (<div style={{ width: '100%', height: '100%' }}><UxDataGridid='数据网格'类名='自定义数据网格'onGridReady={onGridReady}columnDefs={columnDefinition}rowData={gridRowData}defaultColDef={defaultColDefProperties}onColumnResized={onColumnResized}onColumnVisible={onColumnVisible}/>

);}

css 类:

 .custom-datagrid {高度:100%；边框:0px；边距顶部:0px！重要；margin-right: 0px !important;margin-left: 0px !important;}

我错过了什么?

解决方案

就我而言，我有 ra-ui-grid 它与您的组件相同 - UxDataGrid

在 ra-ui-grid 里面我有下一个定义:

.html:

.ts:

 defaultColDef: {弹性:1，...},

.scss:

 ra-ui-grid {高度:100%；显示:弹性；flex-flow: 列 nowrap;.网格 {高度:100%；}}

然后在某些组件中，我使用带有 2 个包装器的 ra-ui-grid

.html

 
<div class="io__table"><ra-ui-grid[数据]=数据"[config]="gridConfig"[columns]=columnDefs"(onPaginationChanged)="paginationChanged.next($event)";></ra-ui-grid>

.scss:

 .io {高度:计算(100% - 36px)；显示:弹性；弹性方向:列；&__表{弹性:1；最小高度:254px；}}

I was trying to implement the row auto height feature described in the docs here:

https://www.ag-grid.com/javascript-grid-row-height/#auto-row-height

However it seems to not be working in my case. What happens for me is that the text doesn't wrap at all and it just creates a single long line for each row.

I've tried adapting the code as best as I could to my own app, but maybe I missed something? I'll be thankful if you could take a look at my code and tell me if something is missing:

const defaultColDefProperties = {
    flex: 1,
    editable: true,
    resizable: true,
    floatingFilter: true,
    filter: true,
    wrapText: true,
    autoHeight: true,
  };

const columnDefinition = [{headerName: "Key", field: "Key"},
                          {headerName: "Value", field: "Value"}];

const ConfigurationDataGrid = (props) =>
{                                                                           
    const [gridRowData, setGridRowData] = useState([]);  
    const gridApi = useRef(null);
    
    useEffect(async () =>
    {
      const getRowData = async () =>
      {
        let rowData = await WebApi.getRowData();     
        setGridRowData(rowData);   
      }
      await getRowData();
    },[]);

    const onGridReady = params => 
    {
      gridApi.current = params.api;
    }

    const onColumnResized = (params) => 
    {
      params.api.resetRowHeights();
    }
  
    const onColumnVisible = (params) => 
    {
      params.api.resetRowHeights();
    }

    return (
          <div style={{ width: '100%', height: '100%' }}>
              <UxDataGrid 
                id='datagrid' 
                className='custom-datagrid' 
                onGridReady={onGridReady}
                columnDefs={columnDefinition} 
                rowData={gridRowData} 
                defaultColDef={defaultColDefProperties}
                onColumnResized={onColumnResized}
                onColumnVisible={onColumnVisible}/>
          </div>
  );
}

The css class:

    .custom-datagrid {
    height: 100%;
    border: 0px;
    margin-top: 0px !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
  }

What am I missing?

解决方案

In my case I have ra-ui-grid it is the same as your component - UxDataGrid

Inside ra-ui-grid I have next definitions:

.html:

<ag-grid-angular
    class="ag-theme-balham grid"
    ...
></ag-grid-angular>

.ts:

        defaultColDef: {
            flex: 1,
            ...
        },

.scss:

    ra-ui-grid {
        height: 100%;
        display: flex;
        flex-flow: column nowrap;


        .grid {
            height: 100%;
         }
}

Then in some component, I am using ra-ui-grid with 2 wrappers

.html

    <div class="io">
        <div class="io__table">
            <ra-ui-grid
                [data]="data"
                [config]="gridConfig"
                [columns]="columnDefs"
                (onPaginationChanged)="paginationChanged.next($event)"
            ></ra-ui-grid>
        </div>
</div>

.scss:

        .io {
            height: calc(100% - 36px);
            display: flex;
            flex-direction: column;

            &__table {
                flex: 1;
                min-height: 254px;
            }
        }

这篇关于反应 ag-grid 行自动高度不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！