Create DropDownList using Custom Template in Grid View

[John]

Hi all,

I currently have a Grid view of rows with several properties. We have the ability to reuse components from a table and I wish to implement these feature using a dropdownlist (ideally that would show up only via inline editing). This DropDownList must be populated by a specific row's ID, so my approach is to create a custom template that will call the controller and passing the row's ID. Is it possible to call a custom template like in this Detail Template Demo?

http://demos.telerik.com/aspnet-mvc/grid/detailtemplate

Here is my HTML thus far,

@(Html.Kendo().Grid<LexViewModel>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.LEXId).Hidden(true);
        columns.Bound(p => p.LEXName).Title("Name");
        columns.Bound(p => p.LEXDescription).Title("Description");
        columns.Bound(p => p.ComponentName1).Title("Comp1");
        columns.Bound(p => p.ProximityTranche1).Title("Tranche 1");
        columns.Bound(p => p.ComponentName2).Title("Comp2");
        columns.Bound(p => p.ProximityTranche2).Title("Tranche 2");
        columns.Bound(p => p.ComponentName3).Title("Comp3");
        columns.Bound(p => p.ProximityTranche3).Title("Tranche 3");
        columns.Bound(p => p.ComponentName4).Title("Comp4");
        columns.Bound(p => p.LEXId).ClientTemplate("myDropDownCustomTemplate");

        columns.Bound(p => p.IsActive);

        columns.Command(cmd => cmd.Edit()).Title("Update");
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
            .Events(events => events.Error("error_handler"))
            .Model(m =>
            {
                m.Id(p => p.LEXId);
                m.Field(p => p.LEXId).Editable(false);
                m.Field(p => p.LEXName);
                m.Field(p => p.LEXDescription);
                m.Field(p => p.AllComponents);
                m.Field(p => p.IsActive);
            })
            .Read(read => read.Action("Read", "Home"))
            .Update(update => update.Action("EditingCustom_LexUpdate", "Home"))
            )
    .Pageable()
    .Sortable()
    .Editable(ed => ed.Mode(GridEditMode.InLine))
    .Filterable()
    .Groupable()
)

<script id="myDropDownCustomTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().DropDownList()
        .Name("ReuseableComponents")
        .SelectedIndex(0)
        .Items(items =>
        {
            //Call Controller and Popuplate Dropdown
            //    Based on LEXId
        })
        .ToClientTemplate()
    )
</script>

[John]

So I figured out that I can create an inline grid template like this, but the read.Action() is NOT calling my controller. Why is this?

@(Html.Kendo().Grid<LexViewModel>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.LEXId).Hidden(true);
        columns.Bound(p => p.LEXName).Title("Name");
        columns.Bound(p => p.LEXDescription).Title("Description");
        columns.Bound(p => p.ComponentName1).Title("Comp1");
        columns.Bound(p => p.ProximityTranche1).Title("Tranche 1");
        columns.Bound(p => p.ComponentName2).Title("Comp2");
        columns.Bound(p => p.ProximityTranche2).Title("Tranche 2");
        columns.Bound(p => p.ComponentName3).Title("Comp3");
        columns.Bound(p => p.ProximityTranche3).Title("Tranche 3");
        columns.Bound(p => p.ComponentName4).Title("Comp4");
        columns.Bound(p => p.LEXId).Template(@<text></text>).HtmlAttributes(new {@class = "templateCell"}).ClientTemplate(
            Html.Kendo().DropDownList()
                .Name("components_#=LEXId#")
                .HtmlAttributes(new {style = "width: 200px"})
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("GetComponents", "Home", "#=LEXId#");
                    });
                })
        .ToClientTemplate().ToHtmlString()
    ).Title("All Comps");
        columns.Bound(p => p.IsActive);

        columns.Command(cmd => cmd.Edit()).Title("Update");
    })
        .Events(ev => ev.DataBound("initComponents"))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
                .Events(events => events.Error("error_handler"))
                .Model(m =>
                {
                    m.Id(p => p.LEXId);
                    m.Field(p => p.LEXId).Editable(false);
                    m.Field(p => p.LEXName);
                    m.Field(p => p.LEXDescription);
                    m.Field(p => p.AllComponents);
                    m.Field(p => p.IsActive);
                })
                .Read(read => read.Action("Read", "Home"))
                .Update(update => update.Action("EditingCustom_LexUpdate", "Home"))
                )
        .Pageable()
        .Sortable()
        .Editable(ed => ed.Mode(GridEditMode.InLine))
        .Filterable()
        .Groupable()
)

[Alexander Popov]

Hi John,

I would recommend using the ForeignKey column builder instead of a template. That would guarantee that the Grid's items are properly updated and the DropDownList will be shown only when the entire row is being edited. I would also suggest checking our offline demos, which are located in the Kendo UI installation path, under the \wrappers\aspnetmvc\Examples directory.  The files you would be interested in are:

• Areas\razor\Views\grid\foreignkeycolumn.cshtml
• Controllers\Grid\ForeignKeyColumnController.cs
• Views\Shared\EditorTemplates\GridForeignKey.cshtml

Regards,
Alexander Popov
Telerik