This is a migrated thread and some comments may be shown as answers.

Template with Kendo Button issues

1 Answer 136 Views
Notification
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 1
Bob asked on 19 Aug 2014, 04:32 PM
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>

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 21 Aug 2014, 08:37 AM
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!
 
Tags
Notification
Asked by
Bob
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or