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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Calling ej.base.Internationalization from templates (e.g. EventTemplate)

Thread ID:

Created:

Updated:

Platform:

Replies:

141967 Jan 13,2019 04:11 PM UTC Jan 24,2019 12:24 PM UTC ASP.NET Core - EJ 2 3
loading
Tags: Scheduler
Stefan
Asked On January 13, 2019 04:26 PM UTC

I'm trying to figure out how to call functions including parameters from the templates.

Using the following Event Template as a sample, I've tried different approaches to obtain a formatted string of date in a reusable way.


1) use a global var intl = new ej.base.Internationalization();
               
Time: ${intl.formatDate(StartTime, { type: 'dateTime', skeleton: 'short' })} - ${EndTime}

This doesn't work, I assume that the curly braces need to be escaped but I couldn't figure out how. Without the parameters it works fine:
Time: ${intl.formatDate(StartTime)} 

2) global function
function getTimeLocaleString(date, type, skeleton) {
     return intl.formatDate(date, { type: type, skeleton: skeleton });
}
               
Time: ${getTimeLocaleString(data.StartTime, 'dateTime', 'short')} - ${EndTime}
This also didn't work, either the events are simply rendered with the template ID, or the schedule refuses to load with reference errors or similar.

3) attempt to escape curly braces etc, similar to JS Render
Finally I have tried to escape the characters, beginning with the Curly Braces. Later I've even tried to escape the quotes, but no luck there.
 ${intl.formatDate(data.StartTime, { type: "dateTime", skeleton: "short" })}

Could you please elaborate on the template engine? A simple function call appeared possible, but any custom parameters appear to mess up the template.

Thank you!

Karthigeyan Krishnamurthi [Syncfusion]
Replied On January 16, 2019 12:07 PM UTC

Hi Stefan,  
 
Thank you for contacting Syncfusion support. 
 
We have prepared the sample for your requirement and kindly refer the below online sample link too. 
 
<script id="event-template" type="text/x-template"> 
    <div class='template-wrap'> 
        <div class="subject">${Subject}</div> 
        <div class="time">${getTimeString(data.StartTime)} - ${getTimeString(data.EndTime)}</div> 
        <div class="description">${Description}</div> 
    </div> 
</script> 
 
<script type="text/javascript"> 
        var instance = new ej.base.Internationalization(); 
        window.getTimeString = function (value) { 
            return instance.formatDate(value, { skeleton: 'hm' }); 
        }; 
    </script> 
 
Regards, 
Karthigeyan 
 


Stefan
Replied On January 16, 2019 04:53 PM UTC

Dear Karthigeyan
unfortunately this does not answer my question. I was wondering if and how I could call functions including parameters from content templates (Could you please elaborate on the template engine? A simple function call appeared possible, but any custom parameters appear to mess up the template.)

To use your example (shortened) I'd like to call 
<script id="event-template" type="text/x-template"> 
  <div class="time">${intl.formatDate(data.StartTime, { type: "dateTime", skeleton: "short" })}</div> 
</script> 
or alternatively a normal function call
<script id="event-template" type="text/x-template"> 
  <div class="time"> ${getTimeLocaleString(data.StartTime, 'dateTime', 'short')}</div> 
</script> 
Obviously, some escaping would be required for the curly braces {} inside the template call and possibly the " quotes, I couldn't find out how to do that (if it is possible at all).

Thank you
Stefan

Karthigeyan Krishnamurthi [Syncfusion]
Replied On January 24, 2019 12:24 PM UTC

 
Thanks for your update. 
 
Currently there is no support to parse the template function with more than one parameter. We have checked by sending the single object parameter like below and template is not parsed correctly, we confirm this as a bug and logged a defect report. You can keep track of the bug from the feedback portal below. 
 
<script id="event-template" type="text/x-template"> 
    <div class='template-wrap'> 
        <div class="subject">${Subject}</div> 
        <div class="time">${getTimeString({ value: data.StartTime,  type: 'dateTime', skeleton: 'short' })} - <br /> ${getTimeString({ value: data.EndTime,  type: 'dateTime', skeleton: 'short'})}</div> 
    </div> 
</script> 
<script type="text/javascript"> 
    var instance = new ej.base.Internationalization(); 
    window.getTimeString = function (obj) { 
        debugger 
        return instance.formatDate(obj.value, { type: obj.type, skeleton: obj.skeleton }); 
    }; 
</script> 
 
The fix will be available in our upcoming Volume1, 2019 main release which is scheduled to be rolled out at mid of March 2019. 
 
If you have any more specification/precise replication procedure or a scenario to be tested you can add it as a comment in the portal. 
 
Regards, 
Karthigeyan 
 
 


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

Live Chat Icon For mobile
Live Chat Icon