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

Kendo Window Not Posting Back to Viewmodel When Using @Html.EditorFor

2 Answers 331 Views
Window
This is a migrated thread and some comments may be shown as answers.
Steven
Top achievements
Rank 1
Steven asked on 28 Aug 2015, 12:18 PM

I am attempting to use a Kendo UI Window modal to edit an IList<T> and it is posting back NULL in the controller. I found a fairly old posts here from 2012 but was wondering if anyone has a newer solution or if there are any other alternatives?

Main View: 

@using (Html.BeginForm())
{
    @(Html.Kendo().Window()
        .Name("seg_locations_modal")
        .Title("Other Locations")
        .Content(@<TEXT>
            <div id="modal-content" class="split-sub-content-container" style="width:480px;">
                <ul>
                    @Html.EditorFor(x => x.Locations)
                </ul>
            </div>
            <div class="form-submit-container" style="width:480px; margin:0;">
                <p><button id="add-location" type="button" name="add-location" title="Close">Add Location</button></p>
                <p><button id="close-modal" type="button" name="close-modal" title="Close">Close Window</button></p>
            </div>
        </TEXT>)
        .Width(500)
        .Height(500)
        .Draggable(true)
        .Modal(true)
        .Visible(false)
    )
 
}

EditorTemplate: 

@model ReMemberMvc.Data.Model.Locations
@{
    Layout = null;
}
<li class="locations-row">
    <div data-locationsid="@Model.LocationsId" data-locationsseq="@Model.Seq">
        @Html.HiddenFor(x => x.LocationsId)
        @Html.HiddenFor(x => x.Seq)
        <span class="locations-description-column">@(Html.Kendo().TextBoxFor(x => x.Description).HtmlAttributes(new { style = "width:301px;", placeholder = "Bridgewater, NJ" }))</span>
        <span class="locations-employeerange-column">@(Html.Kendo().DropDownListFor(x => x.EmployeeRangeId).OptionLabel("Not Provided").DataTextField("Description").DataValueField("EmployeeRangeId").DataSource(source => { source.Read(read => { read.Action("GetEmployeeRangeList", "SelectLists"); }); }))</span>
    </div>
</li>

ViewModel: 

using ReMemberMvc.Data.Model;
using System.Collections.Generic;
 
namespace ReMemberMvc.Data.ViewModels
{
    public class SegApplicationViewModel
    {
        public virtual SegApplication SegApplication { get; set; }
 
        public virtual IList<Locations> Locations { get; set; }
    }
}

Thank you in advance.

2 Answers, 1 is accepted

Sort by
0
Steven
Top achievements
Rank 1
answered on 28 Aug 2015, 02:13 PM

I managed to use a work around that seems to have solved my issue--albeit not quite as elegant as I would like--I am using jQuery to clone the modified EditorFor content to a staging <DIV> within the form and it seems to be posting the IList<T> data back to the ViewModel and Controller.  See below.

Still, I would like to know if anyone has also encountered this issue recently and if there is another solution?

Main View: 

@using (Html.BeginForm())
{
    <div id="modal-content-save" style="display:none;"></div>
    <div class="form-submit-container">
        <button type="submit" name="submit" id="submit" title="Submit/Save">Submit/Save</button>
    </div>
    @(Html.Kendo().Window()
        .Name("seg_locations_modal")
        .Title("Other Locations")
        .Content(@<TEXT>
            <div id="modal-content" class="split-sub-content-container" style="width:480px;">
                <ul>
                    @Html.EditorFor(x => x.Locations)
                </ul>
            </div>
            <div class="form-submit-container" style="width:480px; margin:0;">
                <p><button id="add-location" type="button" name="add-location" title="Close">Add Location</button></p>
                <p><button id="close-modal" type="button" name="close-modal" title="Close">Close Window</button></p>
            </div>
        </TEXT>)
        .Width(500)
        .Height(500)
        .Draggable(true)
        .Modal(true)
        .Visible(false)
    )
    <script type="text/javascript">
        $(function () {
            $('#close-modal').click(function (e) {
                $('#modal-content-save').empty();
                $('#modal-content').clone().appendTo('#modal-content-save');
                $("#seg_locations_modal").data("kendoWindow").close();
                e.preventDefault();
            });
        });
    </script>
}

0
Dimo
Telerik team
answered on 01 Sep 2015, 08:50 AM
Hello Steven,

Please check the following documentation section:

http://docs.telerik.com/kendo-ui/web/window/overview#using-kendo-ui-window-with-a-form

Regards,
Dimo
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Window
Asked by
Steven
Top achievements
Rank 1
Answers by
Steven
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or