Use declared JavaScript variable in DataGrid Column template

[Hingle McCringleberry]

Hello,

I'm trying to use a declared JavaScript variable in a conditional statement in a data grid column template.

I declare the variable _selectedUserHistoryAgent in the JavaScript at the top of the page.

I'm trying to change the color of the text in the column template below to blue if the ACTION_BY_USERNAME data in that row is equal to the _selectedUserHistoryAgent variable.

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

                            ${if(ACTION_BY_USERNAME == _selectedUserHistoryAgent)}

                            <div style="color:blue">

                                ${ACTION_BY_DISPLAY}

                            </div>

                            ${else if(ACTION_BY_DISPLAY == 'N/A')}

                            <div style="color:#ccc">

                                ${ACTION_BY_DISPLAY}

                            </div>

                            ${else if(ACTION_BY_USERNAME != _selectedUserHistoryAgent) }

                            <div>

                                ${ACTION_BY_DISPLAY}

                            </div>

                            ${/if}

                        </script>

How do I do this?

Thank you

[Thiyagu Subramani]

Hi Joshua, 

 

Thanks for contacting Syncfusion forum. 

Based on your reported information we suspect that you want to change the color of the text in the column template based on declared variable value. To achieve this requirement we suggest to use window function directly to the template column and in this function you can use declared variables as per your requirements.  

In below sample we have checked conditions based on variable and returned required element with different text colors. Please refer to the below code and sample link.   

     <e-grid-column field="ShipCity" headerText="Ship City" template="${customHelper(data)}" width="150"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

<script type="text/javascript"> 

    window.customHelper = function (args) { 

        debugger; 

        var element; 

        var variable = "ANATR" 

        var variable2 = "BOLID" 

        if (args.CustomerID === variable) { 

            element = "<div style='color:blue'>" + args['CustomerID'] + "</div>" 

        } else if (args.CustomerID == variable2) { 

            element = "<div style='color:orchid'>" + args['OrderID'] + "</div>" 

        } else { 

            element = "<div style='color:red'>" + args['ShipCity'] + "</div>" 

        } 

        return element; 

    } 

</script> 

 

 

Screenshot :  

 

Please refer to the below sample. 

Sample link :  https://www.syncfusion.com/downloads/support/forum/157520/ze/UrlAdaptor-CRUD-NormatEdit-1870442471 

For reference : https://ej2.syncfusion.com/documentation/base/template-engine.html?lang=typescript#available-template-syntax  

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

Regards, 

Thiyagu S.