Adding New Parent record in Hierarchy grid display list of all children items under default parent item

[Jason]

I've got a nested kendo grid in an mvc view that I can't get the create functionality to work right.  It's displaying all parent/child information correctly when the view loads, but when creating a new parent record,instead of a blank child grid, I get ALL items in that child list.  Not sure what I'm doing wrong - should have an empty child grid when expanding a new parent element that hasn't been saved yet - not to mention no children have been added to it.  I've also attached screenshots of the view showing exactly what's going on.

 

View Models:

public class DefectGroupViewModel
    {
        public int DefectGroupId { get; set; }
        public string Value { get; set; }

        public IEnumerable<ScrapReasonViewModel> ScrapReasons { get; set; }
    }

 

public class ScrapReasonViewModel 

    {

        public int ScrapReasonId { get; set; }

        public string Value { get; set; }

        public string ScrapCode { get; set; }

        public int DefectGroupId { get; set; }

    }

 

 

Partial View:

 

@model DefectGroupViewModel

 

@{ViewBag.Title = "Defect Groups"; }

 

<script src="~/Scripts/ErrorHelper.js"></script>

 

<script type="text/kendo" id="scrapReasonsTemplate">     
    @(Html.Kendo().Grid<ScrapReasonViewModel>()

                  .Name("grid_#=DefectGroupId#")

                  .ToolBar(tb => tb.Create())

                  .Columns(column =>                   {

                      column.Bound(x => x.ScrapReasonId).Visible(false);

                      column.Bound(x => x.Value).Width(50).Title("Scrap Reason");

                      column.Bound(x => x.ScrapCode).Width(50).Title("Scrap Code");

                      column.Bound(x => x.DefectGroupId).Visible(false);

                      column.Command(command => { command.Edit(); }).Width(250);

                  })

           

                .DataSource(ds => ds

                      .Ajax()

                      .Model(model =>                       {

                          model.Id(e => e.ScrapReasonId);

                          model.Field(e => e.ScrapReasonId).Editable(false);

                          model.Field(e => e.DefectGroupId).Editable(false);

  

                      })

  

                      .Read(r => r.Action("ReadScrapReasons", "Admin", new { defectGroupId = "#=DefectGroupId#" }))

                      .Create(c => c.Action("CreateScrapReason", "Admin", new { defectGroupId = "#=DefectGroupId#" }))

                      .Update(u => u.Action("UpdateScrapReason", "Admin", new { defectGroupId = "#=DefectGroupId#" }))

                  )

  

                  .Sortable()

                  .ToClientTemplate()

    )</script>

 

<div> 

    @(Html.Kendo().Grid<DefectGroupViewModel>()

                  .Name("DefectGroupGrid")

                  .Columns(column =>                   {

                      column.Bound(c => c.DefectGroupId).Visible(false);

                      column.Bound(c => c.Value).Width(225).Title("Defect Group");

                      column.Command(command => { command.Edit(); }).Width(250);

                  })

                  .ToolBar(tb => tb.Create())

                  .Editable(editable => editable.Mode(GridEditMode.InLine))

                  .Pageable()

                  .Sortable()

                  .Scrollable(s => s.Height(375))

                  .DataSource(ds => ds

                      .Ajax()

                      .PageSize(30)

                      .ServerOperation(true)

                      .Events(events =>                       {

                          events.Error("error_handler");

                       })

                      .Model(model =>                       {

                          model.Id(e => e.DefectGroupId);

                          model.Field(e => e.DefectGroupId).Editable(false);

                          model.Field(e => e.ScrapReasons).DefaultValue(new List<ScrapReasonViewModel>());

                      })

                      .Read(r => r.Action("ReadDefectGroups", "Admin"))

                      .Create(c => c.Action("CreateDefectGroup", "Admin"))

                      .Update(u => u.Action("UpdateDefectGroup", "Admin"))

                  )

          .ClientDetailTemplateId("scrapReasonsTemplate")

          )

</div>

 

<script type="text/javascript">     

 

function error_handler(e) {

        if (e.errors) {

            var message = GetErrorMessage(e);

            new Noty({

                text: message,

                type: 'error',

                layout: 'topCenter',

                timeout: 4000             }).show();

        }

    }

  

  </script>

[Tsvetina]

Hi Jason,

This behavior could be observed due to the filtering applied in the detail Grid. In order to display only related values in the detail Grid, I assume you use the defectGroupId parameter to filter the full set of detail data to only the relevant items for the current table. I don't know how filtering is applied in your controller method but I assume that due to the empty defectGroupId value passed to the controller (when a new parent item is created), the data is not filtered on the server and all items are returned.

To fix this, you can try customizing your ReadScrapReasons controller method to return no data if the defectGroupId value comes in empty or with a default value for the type (0 for int).

Regards,
Tsvetina
Progress Telerik