Inline Editing in Grid Model is Null When in Window

[Scott]

I have a grid that display details of some items.  The grid has a custom command to open a window to display sub details of the selected item.  The grid that is displayed in the window that opens has inline editing turned on.  When I try to perform an update / create / delete, the Action is properly called, but the passed in model is null.

@(Html.Kendo().Grid<Carrier>()
      .Name("grid")
      .Columns(columns =>
          {
              columns.Bound(p => p.Name).Groupable(false).Width(125);
              columns.Bound(p => p.AuthorityReceived)
                     .Title("A")
                     .Filterable(false)
                     .Width(40)
                     .ClientTemplate("<input type='checkbox' disabled='disabled' #= AuthorityReceived ? checked='checked':'' # />");
              columns.Bound(p => p.W9Received)
                     .Title("W9")
                     .Filterable(false)
                     .Width(40)
                     .ClientTemplate("<input type='checkbox' disabled='disabled' #= W9Received ? checked='checked':'' # />");
              columns.Bound(p => p.InsuranceReceived)
                     .Title("Ins")
                     .Filterable(false)
                     .Width(40)
                     .ClientTemplate("<input type='checkbox' disabled='disabled' #= InsuranceReceived ? checked='checked':'' # />");
              columns.Bound(p => p.Phone1).Groupable(false).Title("Phone 1").Width(125);
              columns.Bound(p => p.Phone2).Groupable(false).Title("Phone 2").Width(125);
              columns.Bound(p => p.AfterHoursPhone).Groupable(false).Title("After Hrs #").Width(125);
              columns.Bound(p => p.Email).Groupable(false).Width(125);
              columns.Command(command => command.Custom("ViewComments").Click("showComments"));
          })
      .Groupable()
      .Pageable()
      .Sortable()
      .Scrollable()
      .Filterable()
      .Selectable()
      .Resizable(resize => resize.Columns(true))
      .Reorderable(reorder => reorder.Columns(true))
      .DataSource(
          dataSource => dataSource
                            .Ajax()
                            .PageSize(50)
                            .Read(read => read.Action("CarrierRead", "DataActions")))
      )

@(Html.Kendo().Window().Name("Comments")
      .Title("Comments")
      .Visible(false)
      .Modal(true)
      .Draggable(true)
      .Resizable()
      )

<script id="comments-template" type="text/x-kendo-template">
    <div id="details-container">
        <h3>#= Name #</h2>
    @(Html.Kendo().Grid<CarrierComment>()
          .Name("grid_#=CarrierId#")
          .Columns(columns =>
              {
                  columns.Bound(o => o.Comment);
                  columns.Bound(o => o.AddedBy).Width(150);
                  columns.Bound(o => o.TimeStamp).Format("{0:MM/dd/yyyy hh:mm tt}").Width(175);
                  columns.Command(command =>
                      {
                          command.Destroy();
                          command.Edit().UpdateText("Save");
                      }).Width(200);
              })
          .DataSource(
              dataSource =>
              dataSource
                  .Ajax()
                  .PageSize(5)
                  .Model(model => model.Id(p => p.CommentId))
                  .Create(update => update.Action("CommentCreate", "DataActions", new {carrierId = "#=CarrierId#"}))
                  .Update(update => update.Action("CommentUpdate", "DataActions"))
                  .Destroy(update => update.Action("CommentDelete", "DataActions"))
                  .Read(read => read.Action("CommentRead", "DataActions", new {carrierId = "#=CarrierId#"}))
          )
          .ToolBar(toolbar => toolbar.Create().Text("New Comment"))
          .Editable(editable => editable.Mode(GridEditMode.InLine))
          .Pageable()
          .Sortable()
          .Selectable()
          .Resizable(resize => resize.Columns(true))
          .Reorderable(reorder => reorder.Columns(true))
          .Scrollable()
          .ToClientTemplate())
    </div>
</script>

<script type="text/javascript">
    var detailsTemplate = kendo.template($("#comments-template").html());

    function showComments(e) {
        e.preventDefault();

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var wnd = $("#Comments").data("kendoWindow");

        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    }
</script>

[HttpPost]
        public ActionResult CommentRead([DataSourceRequest] DataSourceRequest request, int carrierId)
        {
            try
            {
                var facade = new CarrierFacade();
                var comments = facade.GetAllComments(carrierId);
                return Json(comments.ToDataSourceResult(request));
            }
            catch (DbException ex)
            {
                ViewBag.ErrorMessage = ex.Message;
                return View("Error");
            }
        }

        [HttpPost]
        public ActionResult CommentCreate([DataSourceRequest] DataSourceRequest request, CarrierComment comment)
        {
            if (comment != null && ModelState.IsValid)
            {
                try
                {
                    var facade = new CarrierFacade();
                    facade.InsertComment(comment);
                }
                catch (DbException ex)
                {
                    ViewBag.ErrorMessage = ex.Message;
                    return View("Error");
                }
            }

            return Json(new[] {comment}.ToDataSourceResult(request, ModelState));
        }

        [HttpPost]
        public ActionResult CommentUpdate([DataSourceRequest] DataSourceRequest request, CarrierComment comment)
        {
            try
            {
                var facade = new CarrierFacade();
                facade.UpdateComment(comment);
                return Json(ModelState.ToDataSourceResult());
            }
            catch (DbException ex)
            {
                ViewBag.ErrorMessage = ex.Message;
                return View("Error");
            }
        }

        [HttpPost]
        public ActionResult CommentDelete([DataSourceRequest] DataSourceRequest request, CarrierComment comment)
        {
            try
            {
                var facade = new CarrierFacade();
                facade.DeleteComment(comment.CommentId);
                return Json(ModelState.ToDataSourceResult());
            }
            catch (DbException ex)
            {
                ViewBag.ErrorMessage = ex.Message;
                return View("Error");
            }
        }

If I move the Grid out of the window, the model that is passed to my Controller's actions is no longer null.  Any idea why this would be?

[Scott]

OK, I've figured out the issue.  I was incorrect in saying that moving the grid out of the window fixed the issue.  The Model had a property in it name "Comment", which caused the incoming model to be null.  This appears to be true of ANY class that has a property named "Comment" that is being used as a model for the grid.

Is this a bug?  Is there another workaround other than changing the property name?

Thanks!

[Daniel]

Hello,

The property name is the same as the action parameter name so the model binder will try to bind it to the object and will fail. You should use a different name for the action parameter:

public ActionResult CommentUpdate([DataSourceRequest] DataSourceRequest request, CarrierComment carrierComment)

Regards,
Daniel
Telerik

[Rogerio]

This post was a helpful clue to me as well.  I was binding a class named "group" which was also the name of another parameter in the Response which through off the model binder.  Changing my class from "group" to "securityGroup" fixed it.  Thanks for the hint!