Telrik Kendo UI не рендеринг всплывающих окон

Question

Я использую всплывающее окно telerik kendo ui в ядре asp.net, используя в качестве примера следующие документы:

https://demos.telerik.com/aspnet-core/grid/custom-command

Но когда я смотрю на консоль отладки, когда янажмите на ребро в ребре, я нахожу следующее.

Я получаю следующее

Невозможно получить собственность 'content 'с неопределенной или нулевой ссылкой

Когда я нажимаю на эту строку в окне консоли, я перехожу к этому блоку кода.

wnd.content (detailsTemplate (dataItem));

<div class="container py-5">
<div class="row">
    <div class="col-md-10 mx-auto">
        <form>
            <div class="form-group row">
                <div class="col-sm-9">
                    <label for="inputFirstname">Activty Name</label>
                    <input type="text" class="form-control" id="inputFirstname" placeholder="Activity name">
                </div>
            </div>
            <div class="form-group row">

                <div class="col-sm-3">
                    <label for="inputLastname" class="form-control">Activity Start Date</label>
                    @Html.Kendo().DateTimePickerFor(model => model.ActivityDate)
                </div>
                <div class="col-sm-3">
                    <label for="inputLastname" class="form-control">Activity End Date</label>
                    @Html.Kendo().DateTimePickerFor(model => model.ActivityEndDate)
                </div>

            </div>
            <div class="form-group row">

                <div class="col-sm-3">
                    <label for="inputLastname" class="form-control">Location</label>
                    @foreach (var item in (SelectList)ViewBag.Location)
                    {
                        @Html.RadioButtonFor(model => model.OnSite, item.Value, false)
                        <label class="control-label">@item.Text</label>
                    }
                </div>

            </div>
            <div class="form-group row">
                <div class="col-md-10">
                    <label for="inputLastname" class="form-control">Description</label>
                    @Html.TextAreaFor(model => model.Description, new { @class = "whatever-class", @cols = 115, @rows = 10 })

                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-6">
                    <label for="inputCity">Status </label>
                    <select asp-for="Status"
                            class="form-control"
                            asp-items="@(new SelectList(@ViewBag.ProjectStatusTypes,"LookupCode", "LookupDescription"))"></select>


                </div>
                <div class="col-sm-3">
                    <label for="inputState">ActivityType </label>
                    <select asp-for="ActivityType"
                            class="form-control"
                            asp-items="@(new SelectList(@ViewBag.ProjectTypes,"LookupCode", "LookupDescription"))"></select>


                </div>
            </div>

            <div class="form-group row">
                <div class="col-sm-6">
                    <label for="inputCity">Staff </label>
                    <select asp-for="StaffID"
                            class="form-control"
                            asp-items="@(new SelectList(@ViewBag.ListOfStaff,"StaffID", "FirstName"))"></select>

                </div>
                <div class="col-sm-3">
                    <label for="inputState">Hours Left On Project </label>
                    <label for="inputState"><div class="badge" style="font-size:18px;">26</div> </label>
                    <label for="projecthours">If Porject hours fall below ten Contact Charlie.</label>
                </div>
            </div>


            <div class="form-group row">

                <div class="col-sm-12">

                    @(Html.Kendo().Grid<FuelActivityTrackerDal.Models.ActivityLines>().Name("activityLines")

                    .Columns(columns =>
                    {
                        columns.Bound(p => p.Description).Filterable(false);
                        columns.Bound(p => p.StartTime).Filterable(false);
                        columns.Bound(p => p.EndTime).Filterable(false);
                        columns.Bound(p => p.Status);
                        columns.Command(command => command.Custom("ViewDetails").Click("showDetails"));

                    })
                        .DataSource(dataSource => dataSource
                        .Ajax()
                        .Events(events => events.Error("error_handler"))
                       .Model(model => model.Id(p => p.ActivityLineId))
                       .Read(read => read.Action("ActivityLines_Read", "Activity"))))
                </div>
            </div>

            <div class="form-group row">
                <div class="col-sm-6">

                </div>
            </div>


            <button type="button" class="btn btn-primary px-4 float-right">Add Work Item</button>
            <button type="button" class="btn btn-primary px-4 float-right">Put Case & Client On Hold</button>
            <button type="button" class="btn btn-primary px-4">Cancel</button>
        </form>
    </div>
</div>
@(Html.Kendo().Window().Name("Details")
    .Title("Customer Details")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(300)       
)
<script type="text/x-kendo-template" id="template">
    <div id="details-container">
        <h2>#= Description # #= Description #</h2>
        <em>#= Description #</em>
        <dl>
            <dt>City: #= Description #</dt>
            <dt>Address: #= Description #</dt>
        </dl>
    </div>
</script>

<script type="text/javascript">
    var detailsTemplate = kendo.template($("#template").html());

    function showDetails(e) {
        e.preventDefault();

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var wnd = $("#Details").data("kendoWindow");

        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    }
</script>