Angular Kendo UI Grid列无法有条件地显示数据

时间:2019-04-18 16:32:20

标签: angular kendo-ui conditional-formatting

如果数据库返回的值为-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));
        }
    }

1 个答案:

答案 0 :(得分:0)

是否要允许用户编辑该特定字段?如果不是,那么您可以继续进行设置,并有条件地将类"k-grid-ignore-click"添加到值为-1的单元格中。这将防止用户单击单元格以显示-1值。

有关此的更多信息,请查看Telerik文档here

编辑:如果您仍然希望允许用户编辑该字段,建议您设置服务以提取数据并设置其格式。这样,您就可以映射此特定字段中以-1null形式出现的任何值。将数据保存回数据库时,请将所有未从null更改的值映射回-1