Form in a kendoWindow

2 posts, 0 answers
  1. Soham
    Soham avatar
    1 posts
    Member since:
    Jan 2017

    Posted 26 Jan Link to this post

    I am trying to build an ASP.NET 4 MVC web service using kendo UI in which I have the following requirements 

     1. posting data in a kendo Window. The kendo Window will contain a form. (I am trying to achieve this using iframe.)
     2. and retrieving back the updated data from the form. 

    Home.cshtml

        <div id="actionFormWindow"></div>

    TriageForm.cshtml

        @model BugViewModel
        <form>
          //display the model data
        </form>
        <button class="k-button" id="okButton">Ok</button>
        <button class="k-button" id="cancelButton">Cancel</button>

    JavaScript

        var dataItem = {
            "Date": "2016-12-31",
            "Id": "1234-csj4-sadf-random",
            "Scenario": "abc",
            "IsFixed": "No"
         };

        var bugActionFormWindow = $("#actionFormWindow")
            .kendoWindow({
                title: "Please confirm the details",
                visible: false, 
                modal: true,
                actions: ["Maximize", "Close"],
                width: "700px",
                height: "500px",
                iframe: true
            }).data("kendoWindow");

        bugActionFormWindow.refresh({
            url: "/bugTriage/triageform",
            data: dataItem,
            dataType: "json"
        });

        bugActionFormWindow.center().open();

    Controller.cs

        public ActionResult TriageForm(BugViewModel vm) {

                return this.View(vm);
        }

    BugViewModel.cs

        public class BugViewModel{
           public string Date {get; set;}
           public string Id {get; set;}
           public string Scenario {get; set;}
           public string IsFixed {get; set;}
        }

    The data in the controller is null. Please suggest if I am doing anything wrong. Also I am unaware how can I get the updated data in the `Home` view. Kendo Window refresh documentation says it "Returns the window object to support chaining". But I can't understand how to get the return value.
  2. Tsvetina
    Admin
    Tsvetina avatar
    1901 posts

    Posted 30 Jan Link to this post

    Hello Soham,

    In order to post data to a page that will be loaded in an iframe, you have to create a form and post it with a target being the iframe. The iframe should have a name set at the time it is rendered. This article demonstrates such an approach:
    Post to Iframe

    Note that, currently, data via the Window's refresh method is sent only when loading a partial view without an iframe.

    If I understand correctly, you want to post to an external address from your window and that is why you are using an iframe. But if I am mistaken and you actually only want to submit the data from the view to the controller, I would suggest creating the Window from static HTML or by loading its content via AJAX without an iframe. This will make it easier to both set data to the Window and then retrieve it back to submit to the controller.

    I hope this helps.

    Regards,
    Tsvetina
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top