Access to value and text from template or inject data to template.

[Tomasz]

Hi i have a grid like this:

const country = [
    {name: 'United States', countryId: '1'},
    {name: 'Australia', countryId: '2'},
    {name: 'India', countryId: '3'}
];

const gridWiersze = new Grid({
    dataSource: window.orderData,
    editSettings: {
        allowEditing: true,
        allowAdding: true,
        allowDeleting: true,
        mode: 'Normal',
        newRowPosition: 'Bottom'
    },
    toolbar: ['Add', 'Delete', 'Edit', 'Update', 'Cancel'],
    toolbarClick: gridWierszeToolbarClickHandler.bind(this),
    columns: [
        {
            field: 'wierszId',
            isPrimaryKey: true,
            visible: false
        },
        {
            field: 'ilosc',
            headerText: 'Ilość',
            textAlign: 'Right',
            validationRules: {required: true, number: true}, width: 140
        },
        {
            field: 'rysunek',
            headerText: 'Rysunek',
            width: 120,
            template: '#wierszeRysunekTemplate',
            editType: 'dropdownedit',
            edit: {
                params: {
                    query: new Query(),
                    dataSource: country,
                    fields: {value: 'countryId', text: 'name'},
                    allowFiltering: true
                }
            }
        },

<script id="wierszeRysunekTemplate" type="text/x-template">
    <a rel='nofollow' href="#">${rysunek}</a>
</script>

in adding i see list of country names and it is right.

but after adding i see value 

i want to have in template acces to both values of country array row 

In with way i could do that?

i need something like : ${rysunek.countryId} ${rysunek.name}

or somehow pass data to template to do something like :

${countryNamesArray[rysunek]}

Please help me

[Shalini Maragathavel]

Hi Tomasz, 

Greetings from Syncfusion Support. 

Query: “i want to have in template access to both values of country array row” 

By default in EJ2 Grid we can able to access only the Grid datasource values in the column template and it is not feasible to access the dropdown dataSource values in the column template.  

Based on your requirement we suspect that you want display the text in the Grid and need to save the value in the dataSource. To achieve this, we suggest you to use the foreign key column of grid as demonstrated in the below code snippet, 

ej.base.enableRipple(true); 

 

    var grid = new ej.grids.Grid({ 

        dataSource: window.orderDatas, 

        

         

        columns: [ 

            { 

                field: 'OrderID', width: 120, headerText: 'Order ID', isPrimaryKey: true, textAlign: 'Right', 

                validationRules: { required: true, number: true } 

            }, 

            { 

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

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

            }, 

            

        ] 

    } 

); 

    grid.appendTo('#Grid'); 

Please find the  below sample for more information. 

Sample : https://stackblitz.com/edit/mbzynz?file=index.js 

Please refer the below documentation for more information. 

Documentation: https://ej2.syncfusion.com/documentation/grid/columns/#foreign-key-column

Please get back to us if you need further assistance. 

Regards, 

Shalini M 

[Tomasz]

Hi,

Thank you for answer.

It works ... almost :)

I want to use it with template.

When i use you solution without template it works fine but when i use template then i see numbers not names :/

Could you help me in this case?

Regards.

[Shalini Maragathavel]

Hi Tomasz, 

Sorry for the late reply. 

Based on your query we suspect that you want display the foreignKeyValue by using  column-template in the Grid and. To achieve your requirement we suggest you to use the custom helper function of grid as demonstrated in the below code snippet, 

 

    var grid = new ej.grids.Grid({ 

        dataSource: window.hierarchyOrderdata, 

         

        columns: [ 

            

            { 

              ...               

  field: 'EmployeeID', foreignKeyField: 'EmployeeID', foreignKeyValue: 'FirstName', dataSource: window.employeeData, template: '#template', 

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

            }, 

]     

 

<script id="template" type="text/x-template"> 

    <div class="image"> 

  <a>${customHelper(data)}</a> 

    </div> 

    

</script> 

<script> 

 <script> 

function customHelper(args) { 

   var str; 

   var gridObj = document.getElementById('Grid')['ej2_instances'][0]; // created grid instance 

 

// get a foreign-key value 

   if(args[gridObj.getForeignKeyColumns()[0].field]===args.foreignKeyData[gridObj.getForeignKeyColumns()[0].field]){ 

     str=args.foreignKeyData[gridObj.getForeignKeyColumns()[0].foreignKeyValue]; 

 

   }   

  return str; 

   

} 

  </script> 

 

Please find the  below sample for more information. 

Sample : https://stackblitz.com/edit/ehkxxr-a2yumy?file=index.html 

Please refer the below documentation for more information. 

 

Documentation:  

 

https://ej2.syncfusion.com/javascript/documentation/common/template-engine/#custom-helper 

https://ej2.syncfusion.com/javascript/documentation/api/grid/#getforeignkeycolumns  

Please get back to us if you need further assistance. 

Regards, 

Shalini M 

[Tomasz]

Works, thank you verry much :D

[Shalini Maragathavel]

 Hi Tomasz, 

Thanks for the update. 

We are happy to hear that your issue has been resolved. 

Please get back to us if you need further assistance. 

Regards, 

Shalini M.