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

[Stefan]

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]

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. 

https://ej2.syncfusion.com/aspnetcore/Schedule/EventTemplate#/material  

http://www.syncfusion.com/downloads/support/forum/141967/ze/schedule1482479284 

 

<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]

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]

Hi Stefan, 

 

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. 

https://www.syncfusion.com/feedback/4421/template-engine-not-working-when-passing-two-parameters 

 

<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