Home How to Send Data to KendoWindow Close Event
Reply: 0

How to Send Data to KendoWindow Close Event

user3402
1#
user3402 Published in June 24, 2018, 3:06 am

I'm trying to open a Kendo UI kendoWindow from within an MVC View. I also use a Partial View as the content of the kendoWindow. Moreover, I use the Kendo UI MVVM pattern to bind my elements.

First let me to show you my main View and my pop-up Partial View (kendoWindow).

The important part of my main View (Parent) is as follows:

@{
    ViewBag.Title = "My Main View";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="~/Scripts/ViewModel/main.js"></script>
<script src="~/Scripts/InitView/main.js"></script>

<script type="text/javascript">
    var viewModel;

    $(function () {
        viewModel = initVm({
            GetPartialContent_Url: '@Url.Action("GetPartialContent")'
        });

        initView(viewModel);
        kendo.bind($("#container"), viewModel);
        viewModel.Onread();
    });
</script>

<div id="container">
    <div id="Window-box"></div>
    // Some other elements like the button which opens the kendoWindow are defined here.
</div>

My initVm is as follows:

function initVm(arg) {
    var vm = kendo.observable({
        onOpenKendoWindow: function () {
            $("#Window-box").kendoWindow({
                iframe: true,
                content: arg.GetPartialContent_Url,
                title: 'Some Title',
                width: 500,
                height: 'auto',
                close: function (e) {
                    //Is it possible to get some data from kendoWindow (Partial View) here?
                }
            });

            var dialog = $("#Window-box").data("kendoWindow");
            dialog.maximize();
        }
    });

    return vm;
}

Until now, I showed you the important parts of my main View. Now I want to show you the important parts of my kendoWindow (Partial View).

My Partial View which is used as the content of the kendoWindow is as follows:

@{
    Layout = "~/Views/Shared/_PartialLayout.cshtml";
}

<script src="~/Scripts/ViewModel/partial.js"></script>
<script src="~/Scripts/InitView/partial.js"></script>

<script type="text/javascript">
    var partialVM;

    $(function () {
        partialVM = initPartialVm({
            GetTransactions_Url: '@Url.Action("GetTransactions", "Account")'
        });

        initPartialView(partialVM);
        kendo.bind($("#container"), partialVM);
    });
</script>

<div id="container">
    <div id="gridTransactions"></div>
</div>

And my initPartialVm is as follows:

function initPartialVm(arg) {
    var vm = kendo.observable({
        onSelectTransaction: function () {
            // KendoWindow should be closed here and passing some data from here to main View (close event of kendowWindow);
        }
    });

    return vm;
}

Note: The 'gridTransactions' is a Kendo UI GridView (inside of kendoWindow - Partial View). Each rows of this grid has a select button and the 'onSelectTransaction' function is fired when each of these select buttons is clicked.

And finally, the main question is that, how can I close the kendowWindow by clicking each select button of the GridView and pass some data to the close event of the kendowWindow?

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.314021 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO