Is it possible to use multiple grid columns and a single editor for a navigation property on a grid model?

[Stephen]

I have a grid for EditOrderLineDto which has a child element of EditOrderLineProductDto:

public class EditOrderLineDto
{
    public long Id { get; set; }
    public long OrderId { get; set; }
    public int Quantity { get; set; }

    public EditOrderLineProductDto Product { get; set; }

    public EditOrderLineDto()
    {
        Product = new EditOrderLineProductDto();
    }

    public EditOrderLineDto(long id, long orderId, string productId, string productName,
         int quantity)
    {
        Id = id;
        OrderId = orderId;
        Quantity = quantity;
        Product = new EditOrderLineProductDto(productId, productName);
    }
}

public class EditOrderLineProductDto
{
    public string ProductId { get; set; }
    public string Name { get; set; }

    public EditOrderLineProductDto()
    {
        ProductId = string.Empty;
        Name = string.Empty;
    }

    public EditOrderLineProductDto(string productId, string name)
    {
        ProductId = productId;
        Name = name;
    }
}

I would like the grid to display the data from the child element in separate columns while being able to edit all of these values through an editor for EditOrderLineProductDto. Is this possible?
Current grid setup is below.

Html.Kendo().Grid<EditOrderLineDto>()
    .Name("orderLines")
    .ToolBar(t =>
    {
        t.Create();
        t.Save();
    })
    .Columns(c =>
    {
        c.Bound(x => x.Id).Hidden(true);
        c.Bound(x => x.OrderId).Hidden(true);
        c.Group(g =>
            g.Title("Product").Columns(p =>
            {
                p.Bound(x => x.Product.Name);
                p.Bound(x => x.Product.ProductId);
            })
        );
        c.Bound(x => x.Quantity);

        c.Command(x => x.Edit());
        c.Command(x => x.Destroy());
    })
    .Editable(x => x.Mode(GridEditMode.InLine))
    .DataSource(d =>
    {
        d.Ajax()
        .Batch(false)
        .Model(m =>
        {
            m.Id(x => x.Id);
            m.Field(x => x.Id).DefaultValue(0);
            m.Field(x => x.OrderId).DefaultValue(Model.Id);
            m.Field(x => x.Product).DefaultValue(new EditOrderLineProductDto()).Editable(true);
            m.Field(x => x.Quantity);
        })
        .Create(c => c.Action("CreateOrderLine", "Orders"))
        .Read(r => r.Action("EditOrderOrderLines", "Orders", new { orderId = Model.Id }))
        .Update(u => u.Action("EditOrderLine", "Orders"))
        .Destroy(d => d.Action("DestroyOrderLine", "Orders"))
        .Events(e => e.Error("onError"));
    })
    .Events(e => e.Save("onGridSave"))

[Ivaylo]

Hello Stephen,

Thank you for the code snippets and the details provided.

This behavior can be achieved using "Nested Grids"(Grid Hierarchy). You can make" ClientDetailTemplate" for the "Parent Grid":

.ClientDetailTemplateId("template")

 

And you need to create an external template with "Grid" in it: 

<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<EditOrderLineProductDto>()
                .Name("grid_#=OrderId#")
                .Columns(columns =>
                {
                    columns.Bound(o => o.ProductId);
                    columns.Bound(o => o.Name);
                    columns.Command(command => command.Edit());
                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(10)
                    .Read(read => read.Action("Products", "Orders", new { orderId = "#=OrderId#" }))
                )
                .Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("ProductEditor"))
                .Pageable()
                .Sortable()
                .ToClientTemplate()
        )
</script>

 

Furthermore, I prepared a sample app where I am implementing this functionality. You can test the code and observe how it works. Let me know if this is the desired behavior.

I hope this information was helpful.

Regards,
Ivaylo
Progress Telerik