ej2 synfusion ASP.NET conditional column template if condition not working for button

Question

<script>
    const email = '[email protected]';
    const email1 = '[email protected]';
    const comparison = email.localeCompare(email1, undefined, { sensitivity: 'base' });
</script>

<script id="edit" type="text/x-template">
    ${if(comparison === 0)}
        <span onclick="EditDetails(this)" id="editBtn"><i class="fas fa-edit fa-lg"></i></span>
    ${/if}
</script>

I have this code shown above in which I want to compare the two values and the result of that comparison I want to do in the column template condition but its not working. Am I doing something wrong here?

I tried this code and I am expecting it to render the span tag only when the if condition is satisfied.

Answer 1

You are using JavaScript-style conditionals (${if(comparison === 0)}) within a template script, which is not the standard way to handle conditionals in ASP.NET or with Syncfusion's templates. ASP.NET and Syncfusion use different syntax for their templates.

If you're dealing with client-side JavaScript and Syncfusion's JavaScript library, you should follow their API for conditional rendering. This might involve using a function that returns the appropriate HTML based on the condition.

function getEditButton(email, email1) {
    const comparison = email.localeCompare(email1, undefined, { sensitivity: 'base' });
    if (comparison === 0) {
        return '<span onclick="EditDetails(this)" id="editBtn"><i class="fas fa-edit fa-lg"></i></span>';
    }
    return ''; 
}

In your column template, you'd then call getEditButton(email, email1) to get the appropriate HTML based on the condition.

For server-side approaches, you will need to handle this logic in your C# code and then render the appropriate HTML in your Razor view.