This is a migrated thread and some comments may be shown as answers.
reusable template
1 Answer 108 Views
This is a migrated thread and some comments may be shown as answers.
Veena
Top achievements
Rank 1
Veena asked on 13 Nov 2015, 10:59 PM

I have a one confirmation template and one information template that i want to use across my application in many files. Right now I am using the template in all the places and calling it in all pages. But I want to do something like this, where I can have these templates common and javascript method that takes message and returns true if clicked yes and returns false if clicked no. My application is asp.net mvc application.

<script id="template-confirmation" type="text/x-kendo-template">
    <p class="delete-message">#= data #</p>
    <button class="delete-confirm k-button">Yes</button>
    <button class="delete-cancel k-button">No</button>
</script>
 
<script id="template-information" type="text/x-kendo-template" style="align-content:center">
    <p class="delete-message" style="text-align:center">#= data #</p>
    <p style="text-align:center">
        <button class="delete-confirm k-button">OK</button
    </p>
</script>
 
 
    function dialogConfirm() {
        var kendoWindow = $("<div />").kendoWindow({
            title: "Confirm",
            resizable: false,
            modal: true,
            height: "100px",
            width: "300px"
        });
 
        kendoWindow.data("kendoWindow")
            .content($("#"+templatename+"").html())
            .center().open();
 
        kendoWindow
            .find(".delete-confirm,.delete-cancel")
                .click(function () {
                    if ($(this).hasClass("delete-confirm")) {
                       kendoWindow.data("kendoWindow").close();
                       return true;// if it is returned true I want to perform something
                    }
                    else if ($(this).hasClass("delete-cancel"))
                        kendoWindow.data("kendoWindow").close();
                        return false;// if it is returned false I want to perform something else
                })
                .end()
    }

 

Thanks,

Veena

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 18 Nov 2015, 07:48 AM
Hello Veena,

Kendo UI templates are responsible for rendering content based on some predefined HTML snippet, and also, injecting dynamic values in the template placeholders (e.g. #= data #). However, currently the Kendo UI template mechanism is not used at all and as a result, #=data# is not replaced by the actual string that you would like to show up in the Window. The provided code should be modified in the following way:

- old
kendoWindow.data("kendoWindow")
    .content($("#"+templatename+"").html())
    .center().open();

- new
kendoWindow.data("kendoWindow")
    .content(kendo.template($("#"+templatename).html())({data: "data foo"}))
    .center().open();

Please refer to the Kendo UI Templates documentation for more information.

http://docs.telerik.com/kendo-ui/framework/templates/overview

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
Veena
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or