We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Condition in template using current date + calculate date

Thread ID:

Created:

Updated:

Platform:

Replies:

143613 Mar 28,2019 11:03 PM UTC Apr 9,2019 01:28 PM UTC ASP.NET Core - EJ 2 5
loading
Tags: General
Thijs
Asked On March 28, 2019 11:03 PM UTC

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 [Syncfusion]
Replied On March 29, 2019 08:55 AM UTC

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. 


Regards, 
Madhu Sudhanan P 


Thijs
Replied On April 3, 2019 08:53 PM UTC

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 [Syncfusion]
Replied On April 4, 2019 10:49 AM UTC

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
Replied On April 4, 2019 07:25 PM UTC

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 [Syncfusion]
Replied On April 9, 2019 01:28 PM UTC

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  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;