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?

TheGeneral TheGeneral · Accepted Answer · 2014-04-22T23:45:50

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.

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

2 Answers