How to pass the model of a row from Kendo Grid to an editable template

Question

I have a Kendo Grid which has a popup editable template, If possible i would like to pass the model (the model of the row, or at least its Id) to the editable template

Grid

@(Html.Kendo().Grid<Client>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Name).Width(140);
        columns.Bound(c => c.Status);
        columns.Bound(c => c.ProcesingStyle);
        columns.Bound(c => c.ArchiveDays);
        columns.Command(command =>
        {
            command.Edit().Text(" ");
            command.Destroy().Text(" "); ;
        }).Width(90);

    })
     .ToolBar(toolbar => toolbar.Create().Text("New"))
     .Editable(editable => editable
        .Mode(GridEditMode.PopUp)
        .TemplateName("Client").AdditionalViewData(new { Client = Model })
        .Window(w => w.Title("Site")))
    .HtmlAttributes(new { style = "height: 380px;" })
    .Scrollable()
    .Sortable()
    .Selectable()
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
    .Events(events => events.Change("onChange"))
    .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(5))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Get", "Clients"))
        .Model(model => model.Id(p => p.Id))
                .Create(update => update.Action("Create", "Clients"))
                .Update(update => update.Action("Update", "Clients"))
                .Destroy(update => update.Action("Destroy", "Clients"))
    )
)

Template

@model Client
@(Html.Kendo().ComboBoxFor(m => m.Plan)
    .DataTextField("Name")
    .DataValueField("Id")
    .Placeholder("Select Plan...")
    .HtmlAttributes(new { style = "width:300px" })
    .Filter(FilterType.Contains)
    .MinLength(3)
    .DataSource(source => 
        source.Read(read => 
            read.Action("GetPlans", "Plans",new {ClientId = Model.Id}))))

Everything works fine except i need to use the Id of the row/model inside the template, in particular , i need the to pass the model.Id (which is the id of the model of the row), to the action on the Combobox in the template, so i can filter the data correctly

This is the offending line in the grid,

.TemplateName("Client").AdditionalViewData(new { Client = Model })

The result is the Model inside the template is always null, im not sure how to pass the data i need to the template

Is there anyway i can do this, or should i be looking at a different approach?

Answer 1

The way I got around this was to put a JavaScript function in the original view as seen below:

function getClientId() {
    var row = $(event.srcElement).closest("tr");
    var grid = $(event.srcElement).closest("[data-role=grid]").data("kendoGrid");
    var dataItem = grid.dataItem(row);  
    if (dataItem)
        return { clientId: dataItem.Id }
    else
        return { clientId: null }
    }

And reference it from my editor template:

.DataSource(source => source.Read(read => read.Action("GetPlans", "Plans").Data("getClientId"))))

Note : I'm pretty sure you cant run JavaScript from a EditorTemplate so it needed to be housed in the original view.

Answer 2

I know this is a really old question, but for those who are wondering why this doesn't work:

.TemplateName("Client").AdditionalViewData(new { Client = Model })

This code doesn't work because the only data you can pass through this method is static data. You can pass specific strings or numbers, like "Hello World", and that would work fine. For dynamic data with kendo, I've learned that it really depends on the situation, and your solution here works well.