[英]React ag-grid row auto height doesn't work
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 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: 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
就我而言,我有
ra-ui-grid
它与您的组件相同 - UxDataGrid
Inside ra-ui-grid
I have next definitions:在
ra-ui-grid
我有下一个定义:
.html: .html:
<ag-grid-angular
class="ag-theme-balham grid"
...
></ag-grid-angular>
.ts: .ts:
defaultColDef: {
flex: 1,
...
},
.scss: .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然后在某些组件中,我使用带有 2 个包装器的 ra-ui-grid
.html .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: .scss:
.io {
height: calc(100% - 36px);
display: flex;
flex-direction: column;
&__table {
flex: 1;
min-height: 254px;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.