I am getting the following errors when I run the following example :https://demos.telerik.com/aspnet-core/window
In the index page I am trying to reference this kendo.window.min.js, here is my code for the view:
@page "/"
@model StaffPortalCore.Views.Home.CropperModel
@{
}
@* Make sure tag helpers are not available for the Window content *@
@removeTagHelper "*, Microsoft.AspNet.Mvc.Razor"
@removeTagHelper "*, Microsoft.AspNetCore.Mvc.Razor"
@using Kendo.Mvc.UI;
@using (Html.BeginForm("Index", "Cropper", FormMethod.Post))
{<head>
<script type="text/javascript" src="@Url.Content("~/js/kendo.window.min.js")"></script>
</head>
<div class="configurator">
<div class="header">Configurator</div>
<div class="box-col">
<h4>Animation Settings</h4>
<ul class="options">
<li>
@Html.RadioButton("animation", "zoom")
@Html.Label("zoom", "default/zoom animation")
</li>
<li>
@Html.RadioButton("animation", "toggle")
@Html.Label("toggle", "toggle animation")
</li>
<li>
@Html.RadioButton("animation", "expand")
@Html.Label("expand", "expand animation")
</li>
<li>
@Html.CheckBox("opacity")
@Html.Label("opacity", "animate opacity")
</li>
</ul>
</div>
<div class="box-col">
<h4>Window Settings</h4>
<ul class="options">
<li>
@Html.CheckBox("draggable")
@Html.Label("draggable", "draggable")
</li>
<li>
@Html.CheckBox("resizable")
@Html.Label("resizable", "resizable")
</li>
</ul>
</div>
</div>
<button >Apply</button>
}
@(Html.Kendo().Window()
.Name("window")
.Animation(animation =>
{
animation.Open(open =>
{
if (ViewBag.animation == "expand")
{
open.Expand(ExpandDirection.Vertical);
}
if (ViewBag.animation == "zoom")
{
open.Zoom(ZoomDirection.In);
}
if (ViewBag.opacity)
{
open.Fade(FadeDirection.In);
}
});
animation.Close(close =>
{
close.Reverse(true);
if (ViewBag.animation == "expand")
{
close.Expand(ExpandDirection.Vertical);
}
if (ViewBag.animation == "zoom")
{
close.Zoom(ZoomDirection.Out);
close.Reverse(false);
}
if (ViewBag.opacity)
{
close.Fade(FadeDirection.In);
}
});
})
.Content(@<text>
<div style="text-align: center;">
<p>ARNE JACOBSEN EGG CHAIR<br /> Image by: <a href="https://www.conranshop.co.uk/" title="https://www.conranshop.co.uk/">https://www.conranshop.co.uk/</a></p>
</div>
</text>)
.Width(500)
.Draggable((bool)ViewBag.draggable)
.Resizable(resize => resize.Enabled((bool)ViewBag.resizable))
.Title("EGG CHAIR")
.Actions(actions => actions
.Custom("custom")
.Minimize()
.Maximize()
.Close()
)
.Events(events=> events.Close("close"))
)
<div class="responsive-message"></div>
<script type="text/javascript">
function close() {
$("#undo").fadeIn(300);
}
$(document).ready( function () {
var dialog = $("#window");
$("#undo")
.bind("click", function () {
$("#window").data("kendoWindow").open();
$("#undo").fadeOut(300);
});
dialog.data("kendoWindow").wrapper
.find(".k-i-custom").parent().click(function (e) {
alert("Custom action button clicked");
e.preventDefault();
});
});
</script>
<style>
#example {
min-height: 400px;
}
#undo {
text-align: center;
position: absolute;
white-space: nowrap;
padding: 1em;
cursor: pointer;
}
.k-window {
z-index: 100000;
}
@@media screen and (max-width: 1023px) {
div.k-window {
display: none !important;
}
}
</style>
An here is code for the controller:
using Microsoft.AspNetCore.Mvc;
namespace StaffPortalCore.Controllers
{
public class CropperController : Controller
{
public ActionResult Index(string animation, bool? opacity, bool? draggable, bool? resizable)
{
ViewBag.animation = animation ?? "expand";
ViewBag.opacity = opacity ?? true;
ViewBag.draggable = draggable ?? true;
ViewBag.resizable = resizable ?? true;
return View();
}
}
}
Can someone please advise which scripts I need to reference and how I should reference them. Thank in advance
1 Answer, 1 is accepted
Hi Jesse,
I see the current thread is a duplicate of a support ticket where I have provided a possible answer to your scenario. I am posting the answer here as well so that members of the community can benefit from the information too.
Normally such errors will appear if the required client-side resources have been not been included. You can do this by either:
For example:
<link href="https://cdn.kendostatic.com/2022.1.119/styles/kendo.bootstrap-main.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.kendostatic.com/2022.1.119/js/jquery.min.js"></script>
<script src="https://cdn.kendostatic.com/2022.1.119/js/jszip.min.js"></script>
<script src="https://cdn.kendostatic.com/2022.1.119/js/kendo.all.min.js"></script>
<script src="https://cdn.kendostatic.com/2022.1.119/js/kendo.aspnetmvc.min.js"></script>In addition, I would suggest also referring to the following resources when it comes to working with the Telerik UI for ASP.NET Core HTML Helpers:
Regarding the Telerik UI for ASP.NET Core Tag Helpers:
In order to utilize the Telerik UI for ASP.NET Core Tag Helper within an ASP.NET Core, you have to manually add the @addTagHelper directive in the respective cshtml file. You can do this on a global scale by including them within the Views/_ViewImports.cshtml. For example:
_ViewImports.cshtml
@using Kendo.Mvc.UI @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @addTagHelper *, Kendo.Mvc
For more information, you can review the Tag Helpers overview article
With that said, the Window Overview Demo exposes a configuration for both the HTML Helper and Tag Helper of the Telerik UI for ASP.NET Core Window. Notice, that the configurations are both identical with the aim to produce the same result. In this regard, I am happy to let you know that our team is currently working on expanding the demos so that users can switch manually between a Tag Helper to Html Helper implementation of a demo and vice versa.
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.