reusable template

[Veena]

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

[Dimo]

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