Editable Grid in a Grid's popup editor

Question

Is it possible to add a editable grid in a popup editor of a parent grid? Both grids are Ajax bindings.

Parent Grid View:

@(Html.Kendo().Grid<MyProject.Business.Models.ParentDTO>().Name("ParentGrid")
.Columns(cols => cols.Command(o => o.Edit() ).Title(" "))
.Editable(editor => editor.Mode(GridEditMode.PopUp))
.Events(events=>events.Edit("onEditOfParentGrid"))
.DataSource(datasource => datasource
    .Ajax()
    .Model(model => model.Id(o => o.id))
    .Read(read => read.Action("GetAll", "ParentAjax"))
    .Update(update => update.Action("Update", "ParentAjax"))
    .Create(create => create.Action("Create", "ParentAjax"))
    .Destroy(destroy => destroy.Action("Destroy", "ParentAjax"))
    )
)
<script type="text/javascript">
    function onEditOfParentGrid(e) {
        $('#ChildGrid').data().kendoGrid.dataSource.read({ id: e.model.id })
    }
</script>

Child Grid View (Parent's default EditorTemplate):

@model MyProject.Business.Models.ParentDTO
@(Html.Kendo().Grid<MyProject.Business.Models.ChildDTO>().Name("ChildGrid")
.AutoBind(false)
.Editable(edit=>edit.Mode(GridEditMode.InCell))
.DataSource(datasource => datasource
    .Ajax()
    .Model(model =>model.Id(o => o.id))
    .Read(read => read.Action("GetByParentId", "ChildAjax"))
    .Update(update => update.Action("Update", "ChildAjax"))
    .Create(create => create.Action("Create", "ChildAjax"))
    .Destroy(destroy => destroy.Action("Destroy", "ChildAjax"))))

Doing this will screw up the popup editor by showing it inline and write some javascript (as text). The child grid will also loose the data. If the child grid has no editor (aka read only), everything works fine, data is shown.

Theres a jQuery error in the console but it doesn't (at least for me) says much

Uncaught SyntaxError: Unexpected token ILLEGAL jquery-1.8.2.js:564
  (anonymous function) jquery-1.8.2.js:564
  jQuery.extend.globalEval jquery-1.8.2.js:565
  (anonymous function) jquery-1.8.2.js:6006
  jQuery.extend.each jquery-1.8.2.js:611
  jQuery.fn.extend.domManip jquery-1.8.2.js:5991
  jQuery.fn.extend.append jquery-1.8.2.js:5764
  jQuery.fn.(anonymous function) jquery-1.8.2.js:6186
  h.extend._createPopupEditor kendo.all.min.js:8
  h.extend.editRow kendo.all.min.js:8
  (anonymous function) kendo.all.min.js:8
  jQuery.event.dispatch jquery-1.8.2.js:3063
  elemData.handle.eventHandle jquery-1.8.2.js:2681

Kristo Aun Kristo Aun · Accepted Answer · 2012-12-02T22:51:29

KendoUI is not quite there yet when it comes to nesting widgets. alternative approach is expanding a row (row detail) and initiating the sub grid there. presumably this is for many-to-one relations? if you have multiple relations, make a tabstrip for each grid.

Editable Grid in a Grid's popup editor

1 Answers