Custom Command refusing to work in editorfortemplate

[David]

I am trying to use a custom command but its not working it refuses to work in a editorfortemplate of the main grid but it should work without issues. But it brakes the popup and does not load can someone help as to why please.

Basically I am wanting three fields in the inline popup name, start time,end time and duration from my activity lines model.

 

@model FuelActivityTrackerDal.ViewModels.ActivityEditViewModal

<style>
    numberCircle {
        border-radius: 50%;
        behavior: url(PIE.htc);
        /* remove if you don't care about IE8 */
        width: 36px;
        height: 36px;
        padding: 8px;
        background: #fff;
        border: 2px solid #666;
        color: #666;
        text-align: center;
        font: 60px Arial, sans-serif;
    }
</style>
<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">



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

                                                          .Columns(columns =>
                                                          {
                                                              columns.Bound(p => p.Description).Filterable(false);
                                                              columns.Bound(p => p.StaffMemeber).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 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>

    <script type="text/x-kendo-template" id="template">
        <div id="details-container">
            <h2>#= FirstName # #= LastName #</h2>
            <em>#= Title #</em>
            <dl>
                <dt>City: #= City #</dt>
                <dt>Address: #= Address #</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>

    @*<div class="k-edit-form-container">
        <h3>Activity</h3>
        <br />
        @Html.HiddenFor(model => model.Name)

        <div class="k-edit-label">
            @Html.LabelFor(model => model.Name)
        </div>


        <div class="k-edit-label">
            @Html.LabelFor(model => model.Description)
        </div>
        <div class="k-edit-field">
          </div>
        <div class="k-edit-label">
            @Html.LabelFor(model => model.HoursLeftOnProject)
        </div>
        <div class="k-edit-field">
            @Html.Kendo().IntegerTextBoxFor(model => model.HoursLeftOnProject)
        </div>
        <div class="k-edit-label">
            @Html.LabelFor(model => model.ActivityDate)
        </div>
        <div class="k-edit-field">
            @Html.Kendo().DateTimePickerFor(model => model.ActivityDate)
        </div>*@

</div>

 

 

 

[Viktor Tachev]

Hello David,

I examined the provided code and the behavior you are seeing can be caused by a script error stating that showDetails function is not defined. You can open the browser console by pressing F12 and confirm if this is the case. 

In order to resolve the error I suggest moving the definition of showDetails function outside the popup template. Place it above the Grid that is using the custom popup editor and see how the behavior changes. 


Regards,
Viktor Tachev
Progress Telerik

[David]

Ok I did what you said its not braking the layout now the button view details is their but there is a null content comming up is that in realtion to this.

[David]

Hi the following code worked but I have a new problem in the popup I want to reference the activity lines model as you see in the second grid. But its only allowing me to select the main model from the page. I will show a graphic of what I am trying to achieve.

@model FuelActivityTrackerDal.ViewModels.ActivityEditViewModal


<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">
            <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-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-md-10">
                    <label for="inputLastname" class="form-control">Description</label>
                    @Html.Kendo().TimePickerFor(model => model,)

                </div>
            </div>

        </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>


</div>

 

 

 

 

 

 

 

[David]

Also how do i control with width of the window using percentages instead of pixels is that possible same question for the grid and the popup editor mode btw.

[Alex Hajigeorgieva]

Hello, David,

The way the Kendo UI Window is used to display details is via the grid with a name "activityLines".

When the custom command is clicked, the "this.dataItem()" refers to the data item which is bound to the row which was clicked. It is not clear to me what you are trying to display in the window. Is it a collection which is part of the main dataItem but not shown in the main grid?

If this is the case, then usually, the main dataItem is passed to a controller to retrieve the collection, much like in this demo:

https://demos.telerik.com/aspnet-mvc/grid/hierarchy

Alternatively, you may use Local data binding to pass the model items to the grid in the popup if they are available in it.

https://demos.telerik.com/aspnet-mvc/grid/local-data-binding

It would be great if you could share the Model and what is displayed in each scenario so we can give you more specific advice.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik