Conditional Template

[Arif Nurdiansyah]

Hello there, i want to make condional template
I've grid like this

   var grid5 = new ej.grids.Grid({

        dataSource: staff,

        editSettings: {

            allowEditing: false,

            allowAdding: false,

            allowDeleting: false,

            mode: 'Dialog',

            showConfirmDialog: true,

            showDeleteConfirmDialog: true

        },

        allowPaging: true,

        toolbar: ['Add', 'Edit', 'Delete', 'Search'],

        height: 500,

        columns: [

            { type: 'checkbox', field: 'CheckBox', width: 30 },

            { field: 'id', isPrimaryKey: true, visible: false, headerText: 'id', textAlign: 'Right', width: 10, type: 'number' },

            {

                field: 'officeFlow.permohonanBiayaId', headerText: 'Pengaju', width: 80, validationRules: { required: false },

                foreignKeyField: 'id', foreignKeyValue: 'nik', dataSource: permohonanbiaya

            },

            {

                field: 'officeFlow.permohonanBiayaId', headerText: 'Biaya Bensin', width: 80, validationRules: { required: false },

                foreignKeyField: 'id', foreignKeyValue: 'biayaBensin', dataSource: permohonanbiaya

            },

            {

                field: 'officeFlow.permohonanBiayaId', headerText: 'Biaya Penginapan', width: 100, validationRules: { required: false },

                foreignKeyField: 'id', foreignKeyValue: 'biayaPenginapan', dataSource: permohonanbiaya

            },

            {

                field: 'officeFlow.permohonanBiayaId', headerText: 'Biaya Penginapan Per Malam', width: 120, validationRules: { required: false },

                foreignKeyField: 'id', foreignKeyValue: 'biayaPenginapanPerMalam', dataSource: permohonanbiaya

            },

            {

                field: 'officeFlow.permohonanBiayaId', headerText: 'Jumlah Malam', width: 80, validationRules: { required: false },

                foreignKeyField: 'id', foreignKeyValue: 'jumlahMalam', dataSource: permohonanbiaya

            },

            {

                field: 'officeFlow.permohonanBiayaId', headerText: 'Tujuan', width: 80, validationRules: { required: false },

                foreignKeyField: 'id', foreignKeyValue: 'tujuan', dataSource: permohonanbiaya

            },

            {

                field: 'officeFlow.permohonanBiayaId', headerText: 'Keperluan', width: 80, validationRules: { required: false },

                foreignKeyField: 'id', foreignKeyValue: 'keperluan', dataSource: permohonanbiaya

            },

            {

                field: 'officeFlow.permohonanBiayaId', headerText: 'Total Biaya', width: 80, validationRules: { required: false },

                foreignKeyField: 'id', foreignKeyValue: 'totalBiaya', dataSource: permohonanbiaya

            },

            { field: 'isApproved', width: 50, headerText: 'isApproved', type: 'string' },

            { field: 'isReject', width: 50, headerText: 'isReject', type: 'string' },

            { field: 'action', width: 140, headerText: 'Aksi', type: 'string', template: '#aksi' },

        ],

        pageSettings: { pageCount: 2, pageSizes: true },

    });

    grid5.appendTo('#staff');


And the template

<sc class="modal fade" id="gambar" role="dialog">

    <div class="col-sm-12" id="aksi">

        <button class="approve btn btn-primary" data-id="${id}" data-approve="${isApproved}" data-reject="${isReject}" onclick="approve(${id})">

            Approve

        </button>

        <button class="reject btn btn-danger" data-id="${id}" data-approve="${isApproved}" data-reject="${isReject}" onclick="reject(${id})">

            Reject

        </button>

    </div>

</sc>

I want if the value isApprove then the button of the template will be disabled, any things how to do that?

Thanks!

[Hariharan J V]

Hi Arif, 

Thanks for contacting Syncfusion support. 

We suggest you to use the following if else template syntax to render a column template based on a condition. 

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

Please refer the code example below, 

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

    ${if(Discontinued === "true")} 

        <button class="approve btn btn-primary"> 

            Approve 

        </button> 

    ${else} 

        <button class="approve btn btn-primary e-disabled"> 

            Reject 

        </button> 

    ${/if} 

</script> 

In the above code we have checked for a condition based on that we will show any one of the “Approve/Reject” buttons. We have used “e-disabled” class to disable the “Reject” button. Please refer the sample link below, 

 

Sample : https://stackblitz.com/edit/lfzutw?file=index.html 

 

Please get back to us if you need further assistance. 

Regards, 

Hariharan 

[Philip]

The stated link to https://ej2.syncfusion.com/documentation/base/template-engine.html?lang=typescript#available-template-syntax  is dead. Trying to use the provided if/else syntax isn't working for me. I'm having trouble digging up current, relevant, accurate documentation on the template syntax for .NET Core EJ2 column grid, can you guys give me a pointer?

[Thavasianand Sankaranarayanan]

Hi Philip, 

Use the below documentation link for if else syntax in template engine. 

Documentation: https://ej2.syncfusion.com/documentation/common/template-engine/#available-template-syntax 

If you still facing the same issue then please reproduce the issue in the previously attached sample. 

Regards, 

Thavasianand S.