Conditional field in edit template

[Pio Luca Valvona]

Hi, I'm using EJ2. ASP. MVC and I need to create a template for the edit dialog of a grid, in the template I need to display a conditional checkbox, I use this code:

<script id="dialogTemplate" type="text/x-template">
  <div class="form-group">
    <label for="EmailRegistrationSent">EmailRegistration Sent</label>
    {{if EmailRegistrationSent}}
                <input type="checkbox"
                       id="EmailRegistrationSent"
                       name="EmailRegistrationSent"
                       checked="checked"
                       class="e-field e-checkbox valid"
                       style="width:30px"
                       disabled="disabled" />
            {{else}}
                <input type="checkbox"
                       id="EmailRegistrationSent"
                       name="EmailRegistrationSent"
                       class="e-field e-checkbox valid"
                       style="width:30px"
                       disabled="disabled" />
            {{/if}}


  </div>
</script>

But the render of the dialog shows me the if block verbatim:

{{if Deleted}}{{else}}{{/if}}

I also tried to use the ternary like this:

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

  <div class="form-group">

    <label for="EmailRegistrationSent">EmailRegistration Sent</label>

    ${ EmailRegistrationSent

        ? '<input type="checkbox" id="EmailRegistrationSent" name="EmailRegistrationSent" checked="checked" class="e-field e-checkbox" style="width:30px" disabled />'

        : '<input type="checkbox" id="EmailRegistrationSent" name="EmailRegistrationSent" class="e-field e-checkbox" style="width:30px" disabled />' }

  </div>

</script>

but in this case the template is not displayed.

[Rajapandi Ravi]

Hi Pio,

Greetings from Syncfusion support

Based on your query, we could see that you would like to be rendering the checkbox conditionally in the dialogTemplate. You can achieve your requirement, by defining single input with a dynamic checked attribute like the below. Please refer the below code example, sample and video demo for more information.

editpartial.cshtml

 

<div class="form-row">

    <label for="Verified">Verified</label>

    <input type="checkbox" id="Verified" name="Verified"

           class="e-field e-checkbox valid" style="width:30px"

           disabled="disabled" @(Model.Verified ? "checked=\"checked\"" : "") />

</div>

Sample: Check the attachment.

Video demo:

Regards,

Rajapandi R

Attachment: 197631sample_e13fe15f.zip

[Pio Luca Valvona]

Thanks, but my template type is type="text/x-template" and my model in view returns a list.

I can't use @(Model.Verified ? "checked=\"checked\"" : "")

Is it possible to use the ${} syntax?

[Santhosh Iruthayaraj]

Hi Pio,

You can use the ${} syntax to conditionally render the checkbox element within the “x-template” dialog template. Please refer to the code snippet and the updated sample provided below for your reference:

 

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

    <div class="form-group">

        <label for="Verified">Verified</label>

        ${if(Verified)}

        <input type="checkbox"

               id="Verified"

               name="Verified"

               checked="checked"

               class="e-field e-input e-check valid"

               style="width:30px"

               disabled="disabled" />

        ${else}

        <input type="checkbox"

               id="Verified"

               name="Verified"

               class="e-field e-input e-check valid"

               style="width:30px"

               disabled="disabled" />

        ${/if}

    </div>

</script>

 

Regards,

Santhosh I

Attachment: 197631sample_3017c78a.zip

[Price Lincoln]

Great question! If you’re using Syncfusion’s Grid or Form component, you can use a ternary binding (visible = {data.field == value ? true : false}) or handle the actionComplete event to toggle field visibility. What version are you on?