标签: dx-data-grid

如何使用DevExtreme和Angular2在EditMode中隐藏DataGrid列？

<h3>Test</h3>
<dx-data-grid id="gridContainer" 
[dataSource]="xxx" 
[allowColumnReordering]="true" 
[allowColumnResizing]="true" 
[rowAlternationEnabled]="true">
<dxo-column-chooser [enabled]="true"></dxo-column-chooser>
    <dxi-column dataField="Id" 
    [visible]="false" 
    [width]="50"
    [allowEditing]="false" ></dxi-column>
    <dxi-column dataField="Name"></dxi-column>
    <dxi-column dataField="Type"></dxi-column>
    <dxi-column dataField="Data"></dxi-column>
    <dxo-editing mode="form"
                 [allowUpdating]="true"
                 [allowDeleting]="true"
                 [allowAdding]="true">
    </dxo-editing>
</dx-data-grid>

列不显示在网格上,而是显示在Editform上.

谢谢您的帮助.

状态字段（最后一行），我们希望过滤器选项显示“活动”和“非活动”，而不是 true false。有一种编码方法可以做到这一点，但我们正在使用模板创建表。我觉得这非常容易做到，只是在文档中没有看到它。

      <dxi-column dataField="TruckNumber" caption="Truck #" alignment="left"></dxi-column>
      <dxi-column dataField="PlateNumber" caption="License Plate #" alignment="left"></dxi-column>
      <dxi-column dataField="Phone" dataType="string" alignment="left"></dxi-column>
      <dxi-column dataField="Status" alignment="center"></dxi-column>

角度 4.4.6

最后一个问题是，我无法从使用 [calculateCellValue]="function" 调用的函数访问 component.ts 的上下文，如果我使用 .bind(this) 传递它，DataGrids 交互功能将不再工作。

最后一个问题：如何防止 .bind(this) 以避免 DataGrid 的功能变得不起作用，或者确保我不需要执行 [calculateCellValue]="function.bind(this)" 来传递 DataGrid 的上下文组件到函数，并以其他方式使用正常的 [calculateCellValue]="function" 方法传递上下文。

代码如下所示：

我将 DxDataGrid 与 DxiColumns 一起使用，它调用组件函数：

<dxi-column dataField="exampleField" [calculateCellValue]="getExamplevalues"></dxi-column>

Angular 组件中的 getExamplevalues 函数如下所示：

getExampleValues(dataGridContext: any) {
    return this.exampleItems.length;
}

exampleItems 在组件的 ngOnInit 函数中启动：

  public example$: Subscription;
  public exampleItems: any;

  constructor(private exampleService: ExampleService) { }

  ngOnInit(): void {
    this.example$ = this.exampleService.getAll().subscribe(items => this.exampleItems = items);
  }

但是，在 getExamplevalues 函数中， this.exampleItems 始终未定义，因为该函数仅返回 DxDataGrid 的上下文，而不返回 Angular component.ts 上下文。

解决方案是改变：

<dxi-column dataField="exampleField" [calculateCellValue]="getExampleValues"></dxi-column>

=>

<dxi-column …