reusable template

2 posts, 0 answers
  1. Veena
    Veena avatar
    14 posts
    Member since:
    Oct 2015

    Posted 13 Nov 2015 Link to this post

    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

  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 18 Nov 2015 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
Back to Top