Grid in Popup

[Richard]

I have a grid that is summary order information, it has its editable mode set to popup.

What I am trying to achieve is that when you 'edit' a row, the edit window pops up with another grid inside it. I cannot for the life of me, figure out how to get this to work, I've tried every template method I could find online. Is this possible?

I am prepared to just have a custom 'edit' button open a kendo window that loads the other grid, I could then refresh the summary grid on the window close event, but I wanted to make sure I could not achieve this though more appropriate methods first.

Thanks

[Tsvetina]

Hello Richard,

You can create a custom template for the popup editor that contains a Grid, like shown in the following snippet:

@model MultiSelectInGrid.Models.EmployeeViewModel

<div>
    @Html.LabelFor(m => m.FirstName)
    @Html.EditorFor(m => m.FirstName)
</div>
<div>
    @Html.LabelFor(m => m.LastName)
    @Html.EditorFor(m => m.LastName)
</div>
<div>
    @Html.LabelFor(m => m.Title)
    @Html.EditorFor(m => m.Title)
</div>
<hr />
@(Html.Kendo().Grid<MultiSelectInGrid.Models.TerritoryViewModel>()
    .Name("TerritoryGrid")
    .Sortable()
        .Columns(cols =>
        {
            cols.Bound(b => b.TerritoryID);
            cols.Bound(b => b.TerritoryDescription);
        })
        .Editable(ed=>ed.Mode(GridEditMode.InCell))
        .AutoBind(false)
            .DataSource(ds => ds.Ajax().Model(mo => {
                mo.Id(m => m.TerritoryID);
                mo.Field(f => f.TerritoryID).Editable(false);
            }))
        .ToClientTemplate()
)

To populate this Grid, use the main Grid Edit event:

function onEdit(e) {
    $('#TerritoryGrid').data().kendoGrid.dataSource.data(e.model.Territories);
}

To ensure that the parent Grid item will be marked as dirty if changes are made only in the child Grid, use the DataSource Change event to apply a dirty flag:

function onDsChange(e) {
    if (e.field == 'Territories' && e.items) {
        var model = e.items[0].parent().parent();
        model.dirty = true;
    }
}

You can find a sample project demonstrating this implementation, attached to this message.

Regards,
Tsvetina
Progress Telerik

[Richard]

Thanks Tsvetina. That idea does indeed work. I was using TagHelpers and I don't think EditorTemplates work with that which was part of the problem. There is also no equivalent to .ToClientTemplate() either, so it's a bit harder to do this kind of stuff. Again, thanks.

[Dan]

I notice that the child grid is editable, but does not have an "add new record".   Is it possible to add a new record in the child grid?  If so can you update the example?  thanks

[Nikolay]

Hello Richard,

To have the option to add a new record enabled in the Editor template's Grid you would need to specify the Create command within the Grid Toolbar:

@(Html.Kendo().Grid<WebApplication1.Models.TerritoryViewModel>()
    .Name("TerritoryGrid")
    .ToolBar(toolbar => toolbar.Create())
)

For your convenience, I am attaching the example modified and demonstrating the above.

Regards,
Nikolay
Progress Telerik