This is a migrated thread and some comments may be shown as answers.

Kendo Grid popup editor closes immediately on manual addRow

5 Answers 260 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
Richard asked on 12 Mar 2014, 01:01 PM
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();
                }
            }
        }

5 Answers, 1 is accepted

Sort by
0
Richard
Top achievements
Rank 1
answered on 13 Mar 2014, 03:21 PM
Anyone on the Telerik team who could help me out on this one? Any help would be much appreciated.
0
Alexander Popov
Telerik team
answered on 14 Mar 2014, 11:45 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Richard
Top achievements
Rank 1
answered on 17 Mar 2014, 11:23 AM
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;
            }
        }
0
Accepted
Alexander Popov
Telerik team
answered on 19 Mar 2014, 09:49 AM
Hello Richard,

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

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Richard
Top achievements
Rank 1
answered on 25 Mar 2014, 01:32 PM
Thanks a ton, Alexnder. It worked like a charm.
Tags
Grid
Asked by
Richard
Top achievements
Rank 1
Answers by
Richard
Top achievements
Rank 1
Alexander Popov
Telerik team
Share this question
or