This is a migrated thread and some comments may be shown as answers.

Form in a kendoWindow

1 Answer 592 Views
Window
This is a migrated thread and some comments may be shown as answers.
Soham
Top achievements
Rank 1
Soham asked on 26 Jan 2017, 01:33 PM
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.

1 Answer, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 30 Jan 2017, 10:38 AM
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.
Tags
Window
Asked by
Soham
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Share this question
or