How to apply multiple operator condition in template

[suraj]

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

 

    <div class="template_checkbox">

        ${ if ((is_rejected === false || is_rejected === null) && (is_emailshare === null))}

        ${ if (referTrak === "1") }

        ${ if (ReferTrekLight === 'Red') }

        <i class="fas fa-stop" style="color:red;"></i>

        ${ else if (ReferTrekLight === 'Green') }

        <i class="fas fa-check" style="color:green;"></i>

        ${ else if (ReferTrekLight === 'Orange') }

        <i class="fas fa-square" style="color:orange;"></i>

        ${ else }

        <i class="fas fa-square" style="color:red;"></i>

        ${ /if }

        ${ else }

        <i class="fas fa-circle" style="color:gray;"></i>

        ${ /if }

        ${ else }

        ${ if (quickmessage_responded === false) }

        ${ if (referTrak === "1") }

        ${ if (ReferTrekLight === 'Red') }

        <i class="fas fa-stop" style="color:red;"></i>

        ${ else if (ReferTrekLight === 'Green') }

        <i class="fas fa-check" style="color:green;"></i>

        ${ else if (ReferTrekLight === 'Orange') }

        <i class="fas fa-square" style="color:orange;"></i>

        ${ else }

        <i class="fas fa-square" style="color:red;"></i>

        ${ /if }

        ${ /if }

        ${ else }

        <i class="fas fa-circle" style="color:gray;"></i>

        ${ /if }

        ${ /if }

    </div>

</script
This code is not working. i have created same code in HTML

@if ((item.is_rejected == false || item.is_rejected == null) && item.is_emailshare == null)

                                        {

                                            if (referTrak == "1")

                                            {

                                                switch (item.ReferTrekLight)

                                                {

                                                    case "Red":

                                                        <span class="traffic-lights"><i class="fas fa-stop font23 color-red" aria-hidden="true"></i></span>

                                                        break;

                                                    case "Orange":

                                                        <span class="traffic-lights"><i class="fas fa-circle font24 color-orange-traffLight" aria-hidden="true"></i></span>

                                                        break;

                                                    case "Green":

                                                        <span class="traffic-lights"><i class="fas fa-check font30 color-green" aria-hidden="true"></i></span>

                                                        break;

                                                    default:

                                                        <span class="traffic-lights"><i class="fas fa-stop font23 color-red" aria-hidden="true"></i></span>

                                                        break;

                                                }

                                            }

                                            else

                                            {

                                                <span class="traffic-lights"><i class="fas fa-circle font24 color-gray-traffLight" style="color: #a9a9a9;" aria-hidden="true"></i></span>

                                            }

                                        }

                                        else

                                        {

                                            if (item.quickmessage_responded == false)

                                            {

                                                if (referTrak == "1")

                                                {

                                                    switch (item.ReferTrekLight)

                                                    {

                                                        case "Red":

                                                            <span class="traffic-lights"><i class="fas fa-stop font23 color-red" aria-hidden="true"></i></span>

                                                            break;

                                                        case "Orange":

                                                            <span class="traffic-lights"><i class="fas fa-circle font24 color-orange-traffLight" aria-hidden="true"></i></span>

                                                            break;

                                                        case "Green":

                                                            <span class="traffic-lights"><i class="fas fa-check font30 color-green" aria-hidden="true"></i></span>

                                                            break;

                                                        default:

                                                            <span class="traffic-lights"><i class="fas fa-stop font23 color-red" aria-hidden="true"></i></span>

                                                            break;

                                                    }

                                                }

                                            }

                                            else

                                            {

                                                <span class="traffic-lights"><i class="fas fa-circle font24 color-gray-traffLight" style="color: #a9a9a9;" aria-hidden="true"></i></span>

                                            }

                                        }
can please adjust same condition into grid template

[Aishwarya Rameshbabu]

Hi suraj,

Greetings from Syncfusion support.

Upon reviewing the provided information and code example, we have noted that you wanted to implement multiple conditions in the Syncfusion Grid column template. This can be effectively achieved by utilizing a custom helper function that returns the appropriate conditional template. We have adjusted the provided code accordingly. Please refer to the following code example for more details.

Index.cshtml

@Html.EJS().Grid("FlatGrid").DataSource((IEnumerable<object>)ViewBag.dataSource).Width("auto").Height("359").Columns(col =>

{

    …………………………………….

    …………………………………….

   col.Field("Refertrack").HeaderText("Refertrack").Template("#template").Width("125").Add();

}).Render()

 

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

    ${renderTemplate(data)}

</script>

 

<script type="text/javascript">

    function renderTemplate(data) {

    let template = `

        <div class="template_checkbox">

            ${((data.is_rejected === false || data.is_rejected === null) && data.is_emailshare === null) ? `

                ${data.referTrak === "1" ? `

                    ${data.ReferTrekLight === 'Red' ? `

                        <i class="fas fa-stop" style="color:red;"></i>

                    ` : data.ReferTrekLight === 'Green' ? `

                        <i class="fas fa-check" style="color:green;"></i>

                    ` : data.ReferTrekLight === 'Orange' ? `

                        <i class="fas fa-square" style="color:orange;"></i>

                    ` : `

                        <i class="fas fa-square" style="color:red;"></i>

                    `}

                ` : `

                    <i class="fas fa-circle" style="color:gray;"></i>

                `}

            ` : `

                ${data.quickmessage_responded === false ? `

                    ${(data.referTrak == "1") ? `

                        ${data.ReferTrekLight === 'Red' ? `

                            <i class="fas fa-stop" style="color:red;"></i>

                        ` : data.ReferTrekLight === 'Green' ? `

                            <i class="fas fa-check" style="color:green;"></i>

                        ` : data.ReferTrekLight === 'Orange' ? `

                           <i class="fas fa-square" style="color:orange;"></i>

                        ` : `

                            <i class="fas fa-square" style="color:red;"></i>

                        `}

                    ` : ''}

                ` : `

                     <i class="fas fa-circle" style="color:gray;"></i>

                `}

            `}

        </div>

    `;

    return template;

}

</script>

If you need any other assistance or have additional questions, please feel free to contact us.

Regards

Aishwarya R

[suraj]

Hi Aishwarya,

It worked perfectly.

Thanks

[Aishwarya Rameshbabu]

Hi suraj,

We are happy to hear that the provided solution was helpful. Please get back to us if you need any other assistance.

Regards

Aishwarya R