Getting the value of a column in a child grid in a kendo grid hierarchy

Question

I have a Kendo grid hierarchy and was wondering how to go about getting the value of a column in the child grid so I can pass that value to a function in the controller. The data in the parent grid is being pulled from one db table which is a quote entry and the child grid is pulling from another table which contains line item versions of the quote. In the child grid, I click the edit button to pass a value to a controller. I get an error saying that VersionID is undefined. How do I go about getting the value from the VersionID column in the child grid?

Here is code for the parent grid:

@(Html.Kendo().Grid<myWilmer.Models.QuotesSearchViewModel>()
            .Name("quotesSearchGrid")
            .Columns(columns =>
            {
                columns.Bound(c => c.AccountNumber);
                columns.Bound(c => c.QuoteNumber);
                columns.Bound(c => c.CustomerName);
                columns.Template(c => { }).ClientTemplate(
                    Html.ActionLink("Create Version", "CreateQuoteVersion", new { id = "#= QuoteNumber #" }, new { @class = "k-button" }).ToHtmlString());
            })
            .ToolBar(toolbar => toolbar.Custom().Text("Create New Quote").Action("Index", "Quotes"))
            .Selectable(selectable => selectable
                    .Mode(GridSelectionMode.Single))
            .Sortable()
            .ClientDetailTemplateId("template")
            .Events(events => events.DataBound("onDataBound"))
            .Pageable(pageable => pageable
                .ButtonCount(5)
                .PageSizes(new int[] { 10, 20, 30 }))
            .Navigatable()
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .Model(model => 
                {
                    model.Id(m => m.QuoteNumber);
                    model.Field(m => m.AccountNumber).Editable(false);
                    model.Field(m => m.QuoteNumber).Editable(false);
                    model.Field(m => m.CustomerName).Editable(false); 
                })
                .Read(read => read.Action("Quotes_Read", "Quotes").Data("filters"))
                .Events(e => e.Error("ShowAjaxError"))
                .Create(update => update.Action("EditingInline_Create", "Quotes"))
            )
)

And here is code for the child grid:

<script id="template" type="text/kendo-templ">
    @(Html.Kendo().Grid<myWilmer.Models.QuoteVersionViewModel>()
        .Name("quoteDetailsGrid_#=QuoteNumber#")
        .Columns(columns =>
        {
            columns.Bound(c => c.VersionID);
            columns.Bound(c => c.JobType);
            columns.Bound(c => c.ProductType);
            columns.Bound(c => c.RepName);
            columns.Bound(c => c.TimeIn).Format("{0:hh:mm:ss tt}");
            columns.Bound(c => c.DateIn).Format("{0:MM/dd/yyyy}");
            columns.Template(c => { }).ClientTemplate(
                    Html.ActionLink("Edit", "Edit", new { id = "#= QuoteNumber #", itemID = "#= VersionID #" }, new { @class = "k-button" }).ToHtmlString());
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(5)
            .Read(read => read.Action("Versions_Read", "Quotes", new { quoteNumber = "#=QuoteNumber#" }))
            .Model(model => {
                model.Id(m => m.VersionID);
                model.Field(m => m.VersionID).Editable(false);
                model.Field(m => m.JobType).Editable(false);
                model.Field(m => m.ProductType).Editable(false);
                model.Field(m => m.RepName).Editable(false);
                model.Field(m => m.TimeIn).Editable(false);
                model.Field(m => m.DateIn).Editable(false);
            })
        )
        .Pageable(pageable => pageable
            .ButtonCount(5)
            .PageSizes(new int[] { 10, 20, 30 }))
        .Sortable()
        .ToClientTemplate()
   )

Here is the controller method

public ActionResult Edit(string id, int itemID)
{
     //Functionality
}

Thanks in advance - Shaun

Answer 1

You should use:

\\#= VersionID\\#

in the child grid.

Answer 2

Here is the solution we came up with. In the view model, we created a property called "EditButton" and set it to a string with HTML markup:

QuoteVersionViewModel qvvm = new QuoteVersionViewModel()
                {
                    QuoteNumber = deet.QuoteNum,
                    VersionID = deet.VersionID,
                    ProductType = deet.ProductType,
                    JobType = deet.JobType,
                    RepName = deet.RepName,
                    TimeIn = deet.TimeIn,
                    DateIn = deet.DateIn,
                    EditButton = "<a href='" +u.Action("Edit", "Quotes", new { id = deet.QuoteNum, versionID = deet.VersionID }) + "' class='k-button'>Edit</a>"
                };

And our Kendo grid columns looks like this:

.Columns(columns =>
        {
            columns.Bound(c => c.QuoteNumber);
            columns.Bound(c => c.VersionID);
            columns.Bound(c => c.JobType);
            columns.Bound(c => c.ProductType);
            columns.Bound(c => c.RepName);
            columns.Bound(c => c.TimeIn).Format("{0:hh:mm:ss tt}");
            columns.Bound(c => c.DateIn).Format("{0:MM/dd/yyyy}");
            columns.Bound(c => c.EditButton).Encoded(false);
        })