Define ValueAccessor for Syncfusion grid column

Question

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.

score 0 · Answer 1 · answered Oct 26 '21 at 13:01

From the shared code snippet i could see that you have set a custom type for the data argument and the error shows that ‘string’ type value returned in the data is not present in that custom interface. So for this case please set the data type directly as an Object as demonstrated in the below code snippet,

{field: 'decimalCount', valueAccessor: (field: string, data: Object): string => data[field] ?? 'N/A'}

More details on defining value accessor through TS way for angular Grid columns can be checked in the below documentation link,

Documentation: https://ej2.syncfusion.com/documentation/grid/columns/#valueaccessor

Please find the below sample prepared based on this for your reference,

Sample: https://stackblitz.com/edit/angular-8azapo-z2qdpl?file=app.component.ts

I also tried with `Object` but the error persists ```Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Object'. No index signature with a parameter of type 'string' was found on type 'Object'``` — Sergiu Molnar, Oct 26 '21 at 14:39

score 0 · Accepted Answer · answered Oct 26 '21 at 16:13

0

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

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

answered Oct 26 '21 at 16:13

Sergiu Molnar

865
1
11
22

score 0 · Answer 3 · answered Nov 03 '21 at 11:13

With the value accessor function the Grid returns the data directly as an Object type since the field types are anonymous. This can be checked in the below API document link,

API: https://ej2.syncfusion.com/documentation/api/grid/valueAccessor/

But in the shared code it could be seen that you have defined custom type for the value accessor function data in the sample level(data: GridData). This will cause the mentioned problem since the data of Object type returned from the Grid will not match with this custom type.

So you can resolve this problem by setting the data type as Object in your sample level GridColumn interface as demonstrated in the below code snippet,

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

Define ValueAccessor for Syncfusion grid column

3 Answers3