Inline Editing in Grid Model is Null When in Window

4 posts, 0 answers
  1. Scott
    Scott avatar
    2 posts
    Member since:
    Apr 2013

    Posted 27 Jun 2013 Link to this post

    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?
  2. Scott
    Scott avatar
    2 posts
    Member since:
    Apr 2013

    Posted 28 Jun 2013 Link to this post

    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!
  3. Daniel
    Admin
    Daniel avatar
    2166 posts

    Posted 01 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Sam
    Sam avatar
    13 posts
    Member since:
    Aug 2015

    Posted 23 Mar Link to this post

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