[英]Column edit on undefined field with ag-grid
I have configured the ag-grid for the column definitions like this below 我已经为下面的列定义配置了ag-grid
{
headerName: 'Model Level',
field: 'ModelLevelTimeSeries.Id.Value',
editable: false,
cellRendererFramework: RenderEntityComponent,
cellStyle: { textAlign: "center" },
suppressSizeToFit: true,
}
Basically the field from the back-end can return null 基本上,来自后端的字段可以返回null
"ModelLevelTimeSeries": {
"Id": null
}
or 要么
"ModelLevelTimeSeries": {
"Id": {
"Value": "dec70622-3ab3-4b47-a324-f69a14a53beb"
}
}
When I edit the cell value, it returns null
for the params.value
in agInit
method. 当我编辑单元格值时,它在
agInit
方法中为params.value
返回null
。
I'm using "ag-grid": "^17.0.0", "ag-grid-angular": "^17.0.0". 我正在使用“ ag-grid”:“ ^ 17.0.0”,“ ag-grid-angular”:“ ^ 17.0.0”。
just add , cellRnderer function in your column defincation 只需在您的列定义中添加,cellRnderer函数
cellRenderer: params => params.value ? params.value : ''
it will be like this now 现在会是这样
{
headerName: 'Model Level',
field: 'ModelLevelTimeSeries.Id.Value',
editable: false,
//add below line
cellRenderer: params => params.value ? params.value : ''
cellRendererFramework: RenderEntityComponent,
cellStyle: { textAlign: "center" },
suppressSizeToFit: true,
}
You can use value setter for your coldefs 您可以为您的Coldef使用值设置器
{
headerName: 'Model Level',
field: 'ModelLevelTimeSeries.Id.Value',
editable: false,
cellRendererFramework: RenderEntityComponent,
cellStyle: { textAlign: "center" },
suppressSizeToFit: true,
valueSetter: function(params: any){
if (params.oldValue !== params.newValue) {
params.data[params.colDef.field] = (params.newValue) !== "" ? params.newValue.toUpperCase() : "";
return true;
}
else {
return false;
}
}
}
In my experience, using params.data[params.colDef.field] in the valueSetter will not work if the field is.a.nested.key, because params.colDef.field just returns a string like "ModelLevelTimeSeries.Id.Value" 以我的经验,如果该字段为.nested.key,则在valueSetter中使用params.data [params.colDef.field]将不起作用,因为params.colDef.field仅返回类似“ ModelLevelTimeSeries.Id.Value”的字符串。
I have, for now, relied on lodash's set() to do it inside a valueSetter: 现在,我依靠lodash的set()在valueSetter中执行此操作:
import * as set from 'lodash/set'
changeDetectValueSetter (params) {
if (params.oldValue !== params.newValue) {
set(params.data, params.colDef.field, params.newValue) // had to use lodash set, because params.colDef.field is a string representation of a nested object key
// params.data.instruction.billingrecord.invoice_number = params.newValue // could have done this, but it's fixed for that field.
// params.data[params.colDef.field] = params.newValue // this does not work at all if the field is.a.nested.key
return true
} else {
return false
}
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.