[英]Angular ag-grid cell renderer checkbox not refresh value
I created cell renderer for checkbox input but when I click checkbox it change the value inside but not on the cell.我为复选框输入创建了单元格渲染器,但是当我单击复选框时,它会更改单元格内部的值而不是单元格上的值。
See plunker example: Plunker参见 plunker 示例: Plunker
refresh
method should be called on change but somehow it is not.应该在更改时调用
refresh
方法,但不知何故它不是。
onCellClicked
function returns still same value no matter how I click on checkbox.无论我如何单击复选框,
onCellClicked
函数都会返回相同的值。
I tried cellEditor: 'agRichSelect'
with two possible values true
and false
which worked fine but I need checkbox.我试过
cellEditor: 'agRichSelect'
有两个可能的值true
和false
,它们工作正常,但我需要复选框。
Thaks for any ideas!感谢您的任何想法!
First , for tracking changes of ngModel
you need to use (ngModelChange)
instead of (onChange)
. 首先,为了跟踪
ngModel
变化,您需要使用(ngModelChange)
而不是(onChange)
。
Second , you shouldn't use params.value
for ngModel
binding, params
- is a part of grid
, so just avoid mixing things and keep it separately.其次,您不应该将
params.value
用于ngModel
绑定, params
- 是grid
的一部分,因此只需避免混合并单独保存即可。
Third , in refresh
function inside cellRenderer
you shouldn't update params
, refresh
function used internally for grid
. 第三,在
cellRenderer
内部的refresh
函数中,您不应该更新params
,即grid
内部使用的refresh
函数。
// Mandatory - Get the cell to refresh. Return true if the refresh succeeded, otherwise return false.
// If you return false, the grid will remove the component from the DOM and create
// a new component in its place with the new values.
refresh(params: any): boolean;
Fourth , if you want to update value inside cellRenderer
you should use ICellEditorComp
interface instead of ICellRendererComp
( ICellRendererAngularComp
and ICellEditorAngularComp
on Angular
case)第四,如果你想更新
cellRenderer
值,你应该使用ICellEditorComp
接口而不是ICellRendererComp
(在Angular
情况下, ICellRendererAngularComp
和ICellEditorAngularComp
)
Fifth , you forgot to setup checkbox field editable: true
in columnDefs
第五,您忘记在
columnDefs
设置复选框字段editable: true
And the last one - you've just created checkbox (out of grid
scope) which is looked like a working sample, but it's not.最后一个- 您刚刚创建了复选框(超出
grid
范围),它看起来像一个工作示例,但事实并非如此。
You need to understand the full edit process if ag-grid
, so just check here details about cell rendering , cell editing and much more.如果
ag-grid
,您需要了解完整的编辑过程,因此只需在此处查看有关单元格渲染、单元格编辑等的详细信息。
And here you can see how exactly custom checkbox renderer will work :而在这里,你可以看到如何准确地定制复选框渲染器将工作:
function booleanCellRenderer(params) {
var valueCleaned = booleanCleaner(params.value);
if (valueCleaned === true) {
return "<span title='true' class='ag-icon ag-icon-tick content-icon'></span>";
} else if (valueCleaned === false) {
return "<span title='false' class='ag-icon ag-icon-cross content-icon'></span>";
} else if (params.value !== null && params.value !== undefined) {
return params.value.toString();
} else {
return null;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.