CODEWITHSUNDEEP
angularkendo-ui
dpdragnev
dpdragnev

Reputation: 2111

Kendo UI jQuery templates with Angular 4

I am working on a project (Angular 4 + Kendo UI) that requires the use of the Scheduler widget. Since the Angular 2+ version is not ready, I was forced to use the jQuery version of Kendo UI. For the most part I am able to get by, but now I am trying to customize the event template and I realized that Angular 4 does not accept the tag in its templates therefore I am getting an error if I try to use:

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

My question is: Is there away to use templates when using kendo ui jquery with Angular 2+?

Thank you.

Upvotes: 0

Views: 499

Answers (1)

dpdragnev
dpdragnev

Reputation: 2111

I was playing around with different options and managed to make it work.

It turns out that kendo.template(...) can accept the template content as a string. So, instead of using the script tag, I just plugged in the template content directly.

Here is an example, on how to create a template for a schedule event tooltip:

ngAfterViewInit(): void {
        
        $("#scheduler").kendoTooltip({
            filter: ".k-event:not(.k-event-drag-hint) > div, .k-task",
            position: "top",
            width: 250,
            content: kendo.template(`#var element = target.is(".k-task") ? target : target.parent();#
            #var uid = element.attr("data-uid");#
            #var scheduler = target.closest("[data-role=scheduler]").data("kendoScheduler");#
            #var model = scheduler.occurrenceByUid(uid);#

            #if(model) {#
                #=model.description#
            #} else {#
                <strong>No event data is available</strong>
            #}#`)
        });
        
}

Note that you can use the ` to surround a multi line template string as you would for the component template.

Probably not the best approach, but it is the only one I could find that works. If anyone has a better solution, please share it here.

Hope that saves someone a few hours of their life :)

Thanks.

Upvotes: 1

Related Questions