Editable Grid in a Grid's popup editor

[Pier-Luc]

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