Passing data to Kendo Window on a button click of Kendo Grid

Question

on a button click event (custom command in the grid), i would like the data to kendo window (loadcontentfrom) action and wondering if anyone can guide please?

<div class="container-fluid">
<div class="row">
    <div class="col-md-4">
        @Html.Label("Summary")
        @(Html.Kendo().Grid<Settings.Services.Models.DocumentTypeStatusList>()
     .Name("EmpGrid")
     .Columns(columns =>
     {
         columns.Bound(c => c.DocumentType.DocumentTypeDescription).Width(200);
         columns.Bound(c => c.Status).Width(100);
         columns.Command(c => c.Custom("ADD").IconClass("k-icon k-i-plus").Click("showDetails")).Width(100);

     })
     .HtmlAttributes(new { style = "height: 700px;" })
        .Scrollable()
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
     .DataSource(dataSource => dataSource
         .Ajax()
         .Model(model =>
                 {
                     model.Id(p => p.DocumentType.DocumentTypeId);
         })
         .Read(read => read.Action("GetAllDocumentsTypeStatus", "Home"))
         .PageSize(20)
         )


        )

        @(Html.Kendo().Window().Name("Details")
.Title("Add/Edit Document Type Setting")
.Visible(false)
.Modal(true)
.Draggable(true)
.Width(600)
.LoadContentFrom("ModifyDocumentTypeSettings", "Home")
.Actions(actions => actions.Close())
        )
    </div>


</div>

this is the javascript function that gets the value from the grid but how do i pass it to the kendo window function:

 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();
   }

This is resolved by refactoring the code as below (see this question for more information: how to set LoadContentFrom kendo window in run time):

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
   
    $(document.body).append('<div id="Window"></div>');
    $('#Window').kendoWindow({
        title: "Add/Edit Document Type Setting",
        modal: true,
        resizable: false,
        width: 400,
        content: "/Home/ModifyDocumentTypeSettings/" + dataItem.id,
        visible: false,
        minHeight: 350,
        animation: {
            open: {
                effects: "expandVertical",
                duration: 1000
            },
        },
        close: function () {
            setTimeout(function () {
                $('#Window').kendoWindow('destroy');
            }, 200);
        }
    }).html('<img src="761.gif" />').data('kendoWindow').center().open();

score 0 · Answer 1 · edited Sep 03 '21 at 21:46

This is resolved by refactoring the code as below (see this question for more information: how to set LoadContentFrom kendo window in run time):

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

$(document.body).append('<div id="Window"></div>');
$('#Window').kendoWindow({
    title: "Add/Edit Document Type Setting",
    modal: true,
    resizable: false,
    width: 400,
    content: "/Home/ModifyDocumentTypeSettings/" + dataItem.id,
    visible: false,
    minHeight: 350,
    animation: {
        open: {
            effects: "expandVertical",
            duration: 1000
        },
    },
    close: function () {
        setTimeout(function () {
            $('#Window').kendoWindow('destroy');
        }, 200);
    }
}).html('<img src="761.gif" />').data('kendoWindow').center().open();

Passing data to Kendo Window on a button click of Kendo Grid

1 Answers1