Modify x-template Using JavaScript

[Michael Jean]

I have a text/x-template section that I want to modify when a user closes a modal. How do I access an individual cell template on the client side to modify it's DOM element?

[Thiyagu Subramani]

Hi Michael, 

Greetings form Syncfusion support. 

By default we are using JavaScript’s template for our components. text/x-template is the default template definition. Hence you have to define template like this only. Syncfusion JavaScript (Essential JS 2) has built-in template engine which provides options to compile template string into a executable function. Then the generated executable function can be used for rendering DOM element using desired data.  

UG: https://ej2.syncfusion.com/documentation/common/template-engine/ 

If you have any concerns, please share below details then only we can provide the appropriate solution as soon as possible. 

1. Please share your exact requirement briefly.
2. Using template what you want to render/achieve. Share pictorial representation of your needs?
3. Share complete component rendering code.
4. Are you want to render different template for each cell ?
5. Syncfusion package version

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

Regards, 

Thiyagu S 

[Michael Jean]

1. I need to modify the template SVG icon outside of the grid using javascript.
2. Here is my current template <script id="GradeLinkTemplate" type="text/x-template">

    ${if(GradeFlagLink)}

    ${if(SOWName)}

    ${if(SegmentId)}

    ${if(TaskCount===0)}

    <a rel='nofollow' href="javascript:ShowGradeModal(${GradeFlagLink},${SOWName},${SegmentId});">

        <svg class="SolidFlag" xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22">

            <path id="flag" d="M17.533,6.588,17,4H5V26H7.667V16.941h7.467l.533,2.588H25V6.588Z" transform="translate(-5 -4)" />

        </svg>

    </a>

    ${/if}

    ${if(TaskCount>0)}

    <a rel='nofollow' href="javascript:ShowGradeModal(${GradeFlagLink},${SOWName},${SegmentId});">

        <svg class="HollowFlag" xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22">

            <path id="flag" d="M7.5,7.5H19.532l1.649,2.75H27.5V22.625H18.929l-1.65-2.75H8.929V29.5H7.5ZM26.071,21.25V11.625H20.357l-1.65-2.75H8.929V18.5H18.1l1.649,2.75Z" transform="translate(-7.5 -7.5)"></path>

        </svg>

    </a>

    ${/if}

    ${/if}

    ${/if}

    ${/if}

</script>

3. I want to be able to swap out the <svg> dom element. To toggle from a filled flag to an empty flag.

[Michael Jean]

Was there any documentation around modifying the templated column fields client side?

[Thiyagu Subramani]

Hi Michael, 

Thanks for your update. 

Currently we are validating your requirement at our end and we will update further details on or before 29^th September 2021. Until that time we appreciate your patience. 

Regards, 

Thiyagu S 

[Michael Jean]

Hello Thiyagu,

Any luck on this?

Regards,

Michael

[Thiyagu Subramani]

Hi Michael, 

Thanks for your patience and sorry for the delay. 

Based on your shared information we suspect that you want to check multiple conditions in JavaScript template engine. To achieve this requirement we suggest you to use else if and else statement instead of using if statement for multiple conditions like below. Please refer to the below code for more reference. 

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

    ${if(CustomerID === "ANATR")} 

    . . . .  . 

    ${else if(CustomerID === "ANTON")} 

     . . . . .  

    ${else} 

    . . . .  . . 

    ${/if} 

</script> 

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

Regards, 

Thiyagu S