Kendo Telerik MVC binding property to a sub-grid is not working

Question

I just started working with Telerik Grids and I don't know if this is the proper way to do it but my boss want to do edit the data inline in the same grid, and now I have a problem:

This is my Data Model:

        public class InternVM
        {
            public int InternId { get; set; }
            public Guid UserId { get; set; }

            [Required]
            [MaxLength(50)]
            [Display(Name = "User ID")]
            public string UserName { get; set; }

            [Required]
            [MaxLength(50)]
            public string LastName { get; set; }

            [Required]
            [MaxLength(50)]
            public string FirstName { get; set; }

            [UIHint("Date")]
            [Display(Name ="Certified")]
            public DateTime? CertifiedDate { get; set; }
            public string Status { get; set; }

            [UIHint("InternSchedule")]
            public List<InternScheduleVM> Schedules { get; set; }

            [UIHint("InternAttorneyDDL")]
            public List<AttorneyVM> Attorneys { get; set; }
        }

I created a main grid like this:

@(Html.Kendo().Grid<InternVM>()
      .Name("InternGrid")
      .Columns(columns =>
      {
          columns.Command(command => { command.Edit().Text(" ").CancelText(" ").UpdateText(" "); command.Destroy().Text(" "); })
            .Width(100).Locked(true).Lockable(false);
          columns.Bound(c => c.InternId).Visible(false);
          columns.Bound(c => c.UserName).Width(200);
          columns.Bound(c => c.LastName).Width(200);
          columns.Bound(c => c.FirstName).Width(200);
          columns.Bound(c => c.Attorneys).ClientTemplate("#=DisplayAttorneys(Attorneys)#").Width(200);
          columns.Bound(c => c.Status).Width(200);
          columns.Bound(c => c.CertifiedDate).Format("{0:dd/MM/yyyy}").Width(200);
          columns.Bound(c => c.Schedules).ClientTemplate("#=DisplaySchedules(Schedules)#").Width(700);
      })
      .Scrollable()
      .DataSource(dataSource => dataSource
          .Ajax()
          .Model(m => {
              m.Id(c => c.InternId);
              m.Field(c => c.UserId).DefaultValue(Guid.NewGuid());
              m.Field(c => c.Attorneys).DefaultValue(new List<AttorneyVM>());
          })
          .Read(read => read.Action("Read", "Intern"))
          .Destroy(destroy => destroy.Action("Destroy", "Intern"))
          .Update(update => update.Action("Update", "Intern"))
          .Create(create => create.Action("Create", "Intern"))
          .Events(events => events.RequestEnd("onRequestEnd"))
      )
      .ToolBar(toolbar => { toolbar.Create().Text("Add"); })
      .Editable(editable => editable.Mode(GridEditMode.InLine))
      .HtmlAttributes(new { @style = "height:450px"})
      .Events(e => e.BeforeEdit("onBeforeEdit"))
 )

And one of the fields is using a EditorTemplateView which is another Grid (Schedules) like this:

            @model IEnumerable<InternScheduleVM>
        <script>
            function onRequestEnd(e) {
                if (e.type == "update" || e.type == "create" || e.type == "remove") {
                    $("#InternScheduleGrid").data("kendoGrid").dataSource.read();
                }
            }

            function onRequestStart(e) {
                if (e.type == "read")
                    //console.log("onRequestStart");
            }

            function getParentId() {
                let parentId = $('#parentIdInput').val();
                return {
                    internId: parentId
                };
            }

        </script>
        <p>
        </p>
        <div>
            @(Html.Kendo().Grid(Model)
                .Name("InternScheduleGrid")
                .Columns(columns =>
                {
                    columns.Command(command => { command.Edit().Text(" ").CancelText(" ").UpdateText(" "); command.Destroy().Text(" "); }).Width(100);
                    columns.Bound(c => c.InternScheduleID).Visible(false);
                    columns.Bound(c => c.DayOfWeek);
                    columns.Bound(c => c.StartTime).Format("{0:HH:mm:ss}");
                    columns.Bound(c => c.EndTime).Format("{0:HH:mm:ss}");
                })
                .Scrollable()
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(m =>
                    {
                        m.Id(c => c.InternScheduleID);
                    })
                    .Read(read => read.Action("Read", "InternSchedule").Data("getParentId"))
                    .Destroy(destroy => destroy.Action("Destroy", "InternSchedule"))
                    .Update(update => update.Action("Update", "InternSchedule"))
                    .Create(create => create.Action("Create", "InternSchedule").Data("getParentId"))
                    .Events(events => { events.RequestEnd("onRequestEnd"); events.RequestStart("onRequestStart"); })
                )
                .ToolBar(toolbar => { toolbar.Create().Text("Add"); })
                .Editable(editable => editable.Mode(GridEditMode.InLine))
                .Events(e => e.Edit("onEdit"))

            )
        </div>

The child grid is working fine and I bound it with the the Model but whenever I do a change in this Grid, it doesn't upload my Model InternVM. Any ideas why?

Answer 1

I just used a grid detail template to pass parameters from the main view. Thanks