Search code examples
typescriptsyncfusionej2-syncfusion

Define ValueAccessor for Syncfusion grid column


I'm using SyncFusion Grid and I've defined a valueAccessor for a specific column as follow:

export interface GridColumn<idT> {
  ...
  valueAccessor?: (
    field: string,
    data: GridData<idT>,
    column: Column
  ) => ValueAccessor | string;
}

and here is the column definition:

{
     field: 'decimalCount',
     headerText: 'Decimals',
     textAlign: GridTextAlign.Center,
     headerTextAlign: GridTextAlign.Center,
     width: 50,
     editType: GridEditType.NumericTextBox,
     valueAccessor: (
        field: string,
        data: Partial<CustomDataGridData>
     ): string => data[field] ?? 'N/A',
}

but I'm getting the below error

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Partial<CustomDataGridData>'.
No index signature with a parameter of type 'string' was found on type 'Partial<CustomDataGridData>'.

In the html file the valueAccessor is applied like:

<e-column
    ...
    [valueAccessor]="column.valueAccessor ?? null"
>

I've managed to fix this by casting the data object to any => (data as any)[field] ?? 'N/A' and anything works as expected, but I can't understand the reason.


Solution

  • I managed to fix this by directly using the field name:

    valueAccessor: (_,data: Partial<CustomDataGridData>): string | number => data.decimalCount ?? 'N/A',