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

3 posts, 0 answers
  1. Steven
    Steven avatar
    7 posts
    Member since:
    Aug 2010

    Posted 28 Aug 2015 Link to this post

    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. Steven
    Steven avatar
    7 posts
    Member since:
    Aug 2010

    Posted 28 Aug 2015 in reply to Steven Link to this post

    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>
    }

  3. Dimo
    Admin
    Dimo avatar
    8353 posts

    Posted 01 Sep 2015 Link to this post

    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
Back to Top