Setting options of a Kendo Grid that is inside an Editor Template

Question

Inside the editor template of one of my Grids, A, I have another grid, B. I want to set read and update actions of this Grid based on the current Id in the A.

I've tried using Razor code inside the editor template like this:

// details grid: B
.Read("action", "controller", new { @Model.Id })

But Id was always null, probably because Razor is server-side.

So I've tried to set the Grid inside the main page, in the Edit event of the main Grid.

function EditHandler(e) {
    if (e.model.isNew())
        return;
    var detailGrid = e.container.find("#details").data('kendoGrid');
    detailGrid.dataSource.options.transport.read.url = "@Url.Action("", "")".concat('/', e.model.Id);
    detailGrid.dataSource.options.transport.update.url = "@Url.Action("", "")".concat("/", e.model.Name);
}

This doesn't work neither. The definition of the Grid in the editor template will overwrite these properties.

This is the main Grid:

 @(Html.Kendo().Grid<A>()
.Name("A")
.Columns(columns =>
{
    columns.Bound(x => x.Id).Hidden();
    columns.Bound(x => x.Name).HtmlAttributes(new { @style = "text-align: left" });
    ....
    columns.Command(command =>
    {
        command.Edit(); command.Destroy();
    });
})
.....
.Selectable()
.Navigatable()
.DataSource(ds => ds
    .Ajax()
    .Model(model =>
    {
        model.Id(x => x.Name);
    })
    .Read("", "")
    .Update("", "")
    .Destroy("", "")
    .Create("", "")
)
.Events(e => e.Edit("EditHandler").Save("SaveHandler"))
)

Inside the editor template of this class, a.cshtml, I have another Grid that I want its Edit and Read Actions include the Id of the Grid A.

@(Html.Kendo().Grid<B>()
    .Name("B")
    .Columns(columns =>
    {
        columns.Bound(.....
    })
    .....
    .Editable(edit => edit.Mode(GridEditMode.InCell))
    .Selectable()
    .Navigatable()
    .DataSource(ds => ds
        .Ajax()
        .PageSize(5)
        .Model(model =>
        {
            model.Id(x => x.Id);
        })
        .Read("", "")
        .Update("", "")
    ).ToClientTemplate()
)

UPDATE

function EditHandler(e) {
    if (e.model.isNew())
        return;
    var detailGrid = e.container.find("#details").data('kendoGrid');
    detailGrid.dataSource.read({ Id: e.model.Id });
    detailGrid.dataSource.update({ Name: e.model.Name });
}

As Dion noted, it needs 2 changes:

1. In the child Grid, B, set the auto bind to false: .AutoBind(false)
2. Set the ID with read method, not manually as I've been trying.

Answer 1

To overcome this case, I will trigger Grid-B's read manually inside Grid-A's edit event. Follow this setup:

Grid-B Config:

.AutoBind(false)
.DataSource(ds => ds.Ajax()
                    .Read("action", "controller")
                    .Update(url => url.Action("update", "controller").Data(paramData)))

Modify Grid-A edit function:

function EditHandler(e) {
    var gridB = $("#gridB").getKendoGrid(),
        model = e.model;

    gridB.dataSource.read({Id: model.Id});
}

// get Id for update 
function paramData() {
    return { Id : $("#Id").val(); };
}

Hope this help.

Note: Unlike read, update will be triggered after popup shown then Id field will be already have its value. Therefor you can use Url.Action(...).Data() for this case.