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

Grid in Popup

4 Answers 225 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
Richard asked on 18 Feb 2019, 03:09 AM

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

4 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 20 Feb 2019, 02:08 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Richard
Top achievements
Rank 1
answered on 21 Feb 2019, 11:20 AM
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.
0
Dan
Top achievements
Rank 1
Veteran
answered on 02 Oct 2019, 01:30 PM
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
0
Nikolay
Telerik team
answered on 04 Oct 2019, 02:46 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Richard
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Richard
Top achievements
Rank 1
Dan
Top achievements
Rank 1
Veteran
Nikolay
Telerik team
Share this question
or