Kendo Grid popup editor closes immediately on manual addRow

[Richard]

I added a row manually to a hierarchical kendo grid, where the new row is added to the child kendo grid row after the parent row is expanded. It opens up the popup editor and closes immediately.

Here's the Hierarchy template and the parent grid. The onHierarchy1Save occurs when a new Hierarchy1 is added to the database, it expands the row which makes the Hierachy2 grid to show up, get the Hierarchy2 grid and inserts a new row to it. This opens up a popup editor which gets cancelled immediately without adding any new row to it.

    @(Html.Kendo().Grid<Heirarchy>()
              .Name("Hierarchy1")
              .Columns(c =>
              {
                  c.Bound(h => h.Name).Title("Name");
                  c.Command(command => command.Edit()).Width(90);
              })
              .Editable(editable =>
              {
                  editable.Mode(GridEditMode.PopUp);
                  editable.Window(window => window.Title("Edit Details").Width(500));
              })
              .ToolBar(toolbar => toolbar.Create().Text("Add new hiearchy2"))
              .DataSource(dataSource => dataSource.Ajax()
                  .Model(model => model.Id(div => div.primaryKey1))
                  .Batch(true)
                  .Read("GetHierarchies1", "Home")
                  .Update("UpdateHierachies1", "Home")
                  .Create("CreateHierarchies1", "Home")
              )
              .Navigatable()
              .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
              .ClientDetailTemplateId("Hierarchy2Template")
              .Events(events => events.Save("onHierarchy1Save")))


    <script id="Hierarchy2Template" type="text/kendo-tmpl">
        @(Html.Kendo().Grid<Hierarchy2>()
              .Name("Hierarchy2Grid_#=primaryKey1#")
              .Columns(columns =>
              {
                  columns.Bound(h => h.Name).Width(150);
                  columns.Command(command => command.Edit()).Width(90);
              })
              .Editable(editable =>
              {
                  editable.Mode(GridEditMode.PopUp);
                  editable.Window(window => window.Title("Edit Details").Width(500));
              })
              .ToolBar(toolbar => toolbar.Create().Text("Add new hierarchy2"))
              .DataSource(dataSource => dataSource
                  .Ajax()
                  .PageSize(5)
                  .Batch(true)
                  .Model(model => model.Id(h => h.primaryKey2))
                  .Read(read => read.Action("GetHierarchy2", "Home", new {foreignKey = "#=primaryKey1#"}))
                  .Update("UpdateHierarchy2", "Home")
                  .Create("CreateHierarchy2", "Home", new {foreignKey = "#=primaryKey1#"})
              )
              .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
              .ToClientTemplate())
    </script>

    function onHierarchy1Save(e) {
            e.preventDefault();
            this.saveChanges();
            if (!e.model.Id) {
                if (confirm("Do you want to add a new hierarchy2?")) {
                    this.expandRow(this.tbody.find("tr.k-master-row").first());
                    var primaryKey1 = e.model.primaryKey1;
                    var grid = $('#Hierarchy2Grid_' + primaryKey1).data("kendoGrid");
                    grid.addRow();
                }
            }
        }

[Richard]

Anyone on the Telerik team who could help me out on this one? Any help would be much appreciated.

[Alexander Popov]

Hello Richard,

This happens because after the parent is updated, the Grid is redrawn and the expanded row (where the child Grid is) is collapsed. The desired behavior could be achieved using a slightly different approach. For example:    

1. Use the Save event to store the ID of the row
2. Subscribe to the DataBound event
3. Once the event is triggered check whether there is an ID 
4. If there is an ID, use it to expand the row and get the instance of the child grid
5. Call the child Grid's addRow method and delete the stored ID

Regards,
Alexander Popov
Telerik

 

 

[Richard]

The Hierarchy1 was subscribed to the event databound with handler "onHierarchy1Databound". It didn't work. The edit screen still closed off immediately. Here, the first row is the newly added row.

Is this how you meant?


var expandHierarchy1Row = false;

function onHierarchy1Save(e) {
            e.preventDefault();
            if (!e.model.Id) {
                if (confirm("Do you want to add a new hierarchy2?")) {
                    expandHierarchy1Row = true;
                }
            }
            this.saveChanges();
        }

function onHierarchy1Databound(e) {
            if (expandDivisionRow) {
                var row = this.tbody.find("tr.k-master-row").first();
                var data = this.dataItem(row);
                this.expandRow(row);
                var id= data.id;
                var grid = $('#hierarchy1_' + id).data("kendoGrid");
                grid.addRow();
                expandHierarchy1Row = false;
            }
        }

[Alexander Popov]

Hello Richard,

For convenience I prepared a small example, which illustrates the basics of the approach I suggested.

Regards,
Alexander Popov
Telerik

 

 

[Richard]

Thanks a ton, Alexnder. It worked like a charm.