[英]Angular Kendo UI Grid column not display data conditionally
如果从数据库返回的值为-1,我不想将数据显示到单元格中。 该单元格允许单元格编辑。 如果返回任何其他值,则应显示该值。 如果我们想再次保存它,单元格仍应保留其值。 为了实现这一点,我试图将单元格的颜色设置为白色/透明,如果值为-1。 当价值重新回到网格时,它就会这样做。 但是当我点击那个单元格时,它会显示-1。 所以我再次从cellClickHandler调用它,但没有解决目的。 有没有更好的方法,以便在-1时不显示该值? 或者,如果有人可以指导我在单元格内单击时纠正颜色问题。 这是我的代码:
html:
<kendo-grid-column field="MasterID" width="75">
<ng-template kendoGridCellTemplate let-dataItem>
<span class="whole-cell" [style.color]="colorTransparent(dataItem.MasterID)">
{{ dataItem.MasterID }}
</span>
</ng-template>
</kendo-grid-column>
//in component
public colorTransparent(MasterID: number): SafeStyle {
let result;
switch (MasterID) {
case -1:
result = '#ffffff'; //white
break;
default:
result = '#808080'; //grey
break;
}
return this.sanitizer.bypassSecurityTrustStyle(result);
}
//when you click a cell to edit
public cellClickHandler({ sender, rowIndex, column, columnIndex, dataItem, isEdited }) {
this.colorTransparent(dataItem.MasterID);
if (!isEdited && !this.isReadOnly(column.field)) {
sender.editCell(rowIndex, columnIndex, this.createFormGroup(dataItem));
}
}
是否要允许用户编辑该特定字段? 如果没有,那么您可以继续进行设置,并有条件地将类"k-grid-ignore-click"
到值为-1的单元格中。 这将阻止用户单击单元格以显示-1
值。
有关这方面的更多信息,请在此处查看Telerik文档。
编辑:如果您仍然希望允许用户编辑该字段,我建议您设置一个服务来提取数据并对其进行格式化。 这样,您可以将此特定字段中以-1
为单位的任何值映射为null
。 将数据保存回db时,将所有未从null
更改的值映射回-1
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.