Template with Kendo Button issues

2 posts, 0 answers
  1. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 19 Aug 2014 Link to this post

    Hi, when adding a Kendo button to a notification template, the generated <script> tags are overlapping and causing the notification window to fail.  Am I missing something or is this a bug?  I'm about to give up and try the Kendo window control.

    HTML
    <script id="reportTemplate" type="text/x-kendo-template">
        <div style="height:100px; width:300px;border:thin solid black;">
            <h3><img src="/Content/Images/SuccessfulSaveTickMark.png" alt="" />#= title #</h3>
            <p>
                @Html.LabelFor(m => m.NotificationText)
            </p>
            <p>
                @(Html.Kendo().Button()
                    .Name("viewNowButton")
                    .HtmlAttributes(new { type = "button", onclick = "javascript:validateSession()" })
                    .Content("View Now")
                )
                @(Html.Kendo().Button()
                    .Name("viewLaterButton")
                            .HtmlAttributes(new { type = "button", onclick = "javascript:validateSession()" })
                    .Content("View Later")
                )
                @(Html.Kendo().Button()
                    .Name("downloadButton")
                            .HtmlAttributes(new { type = "button", onclick = "javascript:validateSession()" })
                    .Content("Download")
                )
            </p>
            <p>
                @(Html.Kendo().Button()
                    .Name("redirectToReportPickupButton")
                    .HtmlAttributes(new { type = "button", onclick = "javascript:validateSession()" })
                    .Content("Go to Report Pick Up Page")
                )
            </p>
        </div>
    </script>


    Output
    <script id="reportTemplate" type="text/x-kendo-template">
        <div style="height:100px; width:300px;border:thin solid black;">
            <h3><img src="/Content/Images/SuccessfulSaveTickMark.png" alt="" />#= title #</h3>
            <p>
                <label for="NotificationText">NotificationText</label>
            </p>
            <p>
                <button id="viewNowButton" onclick="javascript:validateSession()" type="button">View Now</button><script>
        jQuery(function(){jQuery("#viewNowButton").kendoButton({});});
    </script>
                <button id="viewLaterButton" onclick="javascript:validateSession()" type="button">View Later</button><script>
        jQuery(function(){jQuery("#viewLaterButton").kendoButton({});});
    </script>
                <button id="downloadButton" onclick="javascript:validateSession()" type="button">Download</button><script>
        jQuery(function(){jQuery("#downloadButton").kendoButton({});});
    </script>
            </p>
            <p>
                <button id="redirectToReportPickupButton" onclick="javascript:validateSession()" type="button">Go to Report Pick Up Page</button><script>
        jQuery(function(){jQuery("#redirectToReportPickupButton").kendoButton({});});
    </script>
            </p>
        </div>
    </script>
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 21 Aug 2014 Link to this post

    Hi Bob,

    Please refer to the following documentation section.

    http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/fundamentals#client-templates

    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