Column Template - access ForeingKeyField

[Andre Karner]

Hello everyone,

i try to merge other column values in a "virtual" column in my grid. 

In principle this works quite well, but I only have access to the values of the respective columns and not to ForeignKey Fields. Other columns are partly DropDownEdits with a Custom Datasource (URL Adaptor). 

I tried to do this with a valueAccessor or column template. Unfortunately there is no matching post in this forum, nor in the documentation.

Here is my code so far:

https://pastebin.com/x1bmFuAa

Any help is appreciated!

Best regards,

Andre

[Balaji Sekar]

Hi Andre, 

 

Greetings from the Syncfusion support. 

 

To achieve the foreignKeyColumn dataSource binding to the Grid’s Column using column.valueAccessor property of Grid. 

 

In column.ValueAccessor method, we found the Column value from column.dataSource by using the DataManager and it will return to the Grid. 

 

Please refer the below code example and sample for more information. 

[Index.js] 

let grid: Grid = new Grid( 

        { 

            dataSource: orderDetails, 

            allowPaging: true, 

            allowSorting: true, 

            allowFiltering: true, 

            toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 

            filterSettings: { type: 'Menu' }, 

            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, 

            columns: [ 

                 .     .     .     . 

                { 

                    field: 'CustomerID', foreignKeyField: 'CustomerID', foreignKeyValue: 'ContactName', dataSource: customerData, 

                    width: 150, headerText: 'Customer Name', validationRules: { required: true } 

                }, 

                    

                .     .     .     .                 

            ] 

        }); 

    grid.appendTo('#Grid'); 

 

function valueAccess(field: string, data: Object, column: Object){   

  let fkData = grid.getForeignKeyColumns()[0].columnData; // get the foreignKeyColumn dataSource 

  let fkValue  = new DataManager(fkData).executeLocal(new Query().where('CustomerID', 'equal', data['CustomerID']));  // find the value based on CustomerID from fkData 

  return fkValue[0]['ContactName']; // return ContactName value to the CustomerID column 

} 

 

 

Sample link: https://stackblitz.com/edit/tar8zp-hxalje?file=index.ts  

 

Help Documentation:     https://ej2.syncfusion.com/documentation/api/grid/valueAccessor/  

                                                https://ej2.syncfusion.com/documentation/api/data/dataManager/#executelocal  

 

Please get back to us, if you need further assistance. 

 

Regards, 

Balaji Sekar.