Condition in template using current date + calculate date

[Thijs]

Hello,

I am looking for a solution of making a column in the grid display a colored flag, according to the condition of 2 dates of the entity (DateStart  + DateFinished) and the current date.

How can I use the current date? and how can I add a number of days/months to a date.

The Template I want should look something like this (where the C# syntax I used for the date does not work):

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

    ${if(DateFinished != null)}

    <i class="fa fa-flag fa-3x text-success" aria-hidden="true"></i>

    ${else if(DateTime.Now.AddDays(7) > DateStart )}

    <i class="fa fa-flag fa-3x text-warning" aria-hidden="true"></i>

    ${else if(DateTime.Now > DateStart )}

    <i class="fa fa-flag fa-3x text-danger" aria-hidden="true"></i>

    ${else}

        <span>--not started--</span>

    ${/if}

</script>

I am a new syncfusion user, so if anybody can point me a good reference source where I can find this information, thats very welcome!

[Madhu Sudhanan P]

Hi Thijs, 

Greetings from Syncfusion support. 

Grid uses ES6 syntax template engine and we can only use JavaScript inside the template code. To access current date using JavaScript, we can use following the code example.   

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

        ${if(DateFinished != null)} 

        <i class="fa fa-flag fa-3x text-success" aria-hidden="true"></i> 

        ${else if(new Date().setDate(new Date().getDate() + 7) > DateStart )} 

        <i class="fa fa-flag fa-3x text-warning" aria-hidden="true"></i> 

        ${else if(Date.now() > DateStart )} 

        <i class="fa fa-flag fa-3x text-danger" aria-hidden="true"></i> 

        ${else} 

            <span>--not started--</span> 

        ${/if} 

    </script> 

For date methods and the way to add days to the date value, please go through the below help links. 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setDate 

https://stackoverflow.com/questions/3818193/#answer-3818198 

Regards, 

Madhu Sudhanan P 

[Thijs]

Hello Madhu,

Thanx for Your reply, unfortunately I still can't figure it out. 

When I use only this if statement:

 ${else if(DateFinished != null)}

it works fine, but if I replace it with:

${else if(Date.now() > DateFinished)}

the result of the column in each row is #Status  (the name of the column)

Any Idea's what's wrong with the syntax, or how I can find out what's wrong with the syntax?

My complete template as I have it now:

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

    ${if(DateFinished != null)}

    <#i class="fa fa-flag fa-3x text-success" aria-hidden="true">

    ${else if(Date.now() > DateFinished)}

    <#i class="fa fa-flag fa-3x text-warning" aria-hidden="true">

    ${else}

    <#span>--not started--

    ${/if}

kind regards,

Thijs

[Hariharan J V]

Hi Thijs, 

 

Thanks for sharing this information. 

We have validated the provided code example and we suggest you to check `DateFininshed` is not equal to null in if and else if conditions to resolve this problem. 

 

 Please refer the below way to achieve your requirement.  

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

    ${if(DateFinished != null)} 

    <#i class="fa fa-flag fa-3x text-success" aria-hidden="true"> 

    ${else if(DateFinished != null  && Date.now() > DateFinished)} 

    <#i class="fa fa-flag fa-3x text-warning" aria-hidden="true"> 

    ${else} 

    <#span>--not started-- 

    ${/if} 

</script> 

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

Regards, 

Hariharan 

[Thijs]

Hello Hariharan,

The result is the same

I created the template below as a test, and the result in all rows that have a DateFinished is 'Date Is Null!'

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

    ${if(DateFinished == null)}

    <##span>DateFinished is null!

    ${else if(Date == null)}

    <##span>Date is null!

    ${else}

    <##span>in last else statement

    ${/if}

<##/script>

If I add a Date.Now() check the result of the template is #Status again, probably because it gives an error while trying to compile the template

[Mydeen S N]

Hi Thijs, 

 

Thanks for your patience. 

 

Your requirement for using Date.now can be achieved by using the Custom Helpers in the template. Please find the sample custom helper and template in below code 

 

Custom helper: 

 

<script> 

window.processData = function(value){ 

    

    if(value >=  5){ 

        return '<span >Higher value</span>' 

    } else { 

        return  '  <span >'+ Date.now()+'</span>' 

    } 

} 

</script> 

 

template: 

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

   <div>${processData(data.EmployeeID)}</diV> 

</script> 

 

 

 

In the above example custom helper window.processData  we can process the data processing within the helper function and return the desired result to the template output and in the template section we can call the custom helper as in the above snippet and pass the desired arguments with data prefix (data.EmployeeID) to the helper for process and get desired output. 

 

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

 

 

Regards,   

Mydeen S N