Telerik + ASP.NET MVC DropdownList in Grid

Question

I'm unable to get the DropDownList to show up in a cell in a Telerik MVC Grid. I've followed a tutorial project that works fine, and I cannot see any differences in why it won't work. One caveat is this is an Area and the tutorial is not. Any ideas?

Model (located in separate Project - \External\KPI\KPI.Business.Entities\Kpi.cs):

public sealed class Kpi
{
    #region Properties

    /// <summary>
    /// Gets or sets the KpiId.
    /// </summary>
    /// <value>The KpiId.</value>
    public long KpiId { get; set; }

    /// <summary>
    /// Gets or sets the Organization Id.
    /// </summary>
    /// <value>The Organization Id.</value>
    public string OrganizationId { get; set; }

    /// <summary>
    /// Gets or sets the channel.
    /// </summary>
    /// <value>
    /// The channel.
    /// </value>
    [UIHint("Channel"), Required]
    public string Channel { get; set; }
}

Controller (located in UI Project - \Areas\KPI\Controllers\KpiController.cs):

    public ActionResult Index(string organizationId)
    {
        if (!string.IsNullOrEmpty(organizationId))
        {
            initializeEditMode(organizationId);
            ViewBag.CustomerOrg = new OrganizationLogic(organizationId, Session["connectionString"].ToString()).GetName();
            var channels = new OrganizationLogic(organizationId, Session["connectionString"].ToString()).GetOrganizations();
            ViewBag.Channels = channels.Select(x => x.Name).ToArray();
        }

        return View();
    }

Partial View (located in UI Project - \Areas\KPI\Views\Kpi\Editor Templates\Channel.cshtml):

@using System.Collections
@using Telerik.Web.Mvc.UI
@model string

@(Html.Telerik().DropDownList()        
    .Name("Channel")
    .BindTo(new SelectList((IEnumerable)ViewData["channels"], "OrganizationId", "Name"))
)

View (located in UI Project - \Areas\KPI\Views\Kpi\Index.cshtml):

@using KPI.Business.Entities
@using Telerik.Web.Mvc.UI
@model IList<KPI.Business.Entities.Kpi>
@{
    ViewBag.Title = "KPI";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>
    @ViewBag.CustomerOrg
</h2>
<div>
    @(Html.Telerik().Grid<Kpi>()
        .Name("kpiGrid")
        .ToolBar(commands => commands
            .Insert()
            .ButtonType(GridButtonType.ImageAndText)
            .ImageHtmlAttributes(new { style = "margin-left:0" })
            .Text("Insert New KPI"))
        .DataKeys(keys => keys.Add(v => v.KpiId))
        .Columns(columns =>
        {
            columns.Bound(kpi => kpi.KpiId).Hidden(true);
            columns.Bound(kpi => kpi.OrganizationId).Hidden(true);
            columns.Bound(kpi => kpi.Channel);
            columns.Bound(kpi => kpi.Name).Column.Title = "KPI Name";
            columns.Bound(kpi => kpi.Value);
            columns.Bound(kpi => kpi.StartDate).Width(150).Format("{0:d}");
            columns.Bound(kpi => kpi.EndDate).Width(150).Format("{0:d}");
            columns.Command(commands =>    commands.Edit().ButtonType(GridButtonType.Image)).Width(40);
        })
        .DataBinding(binding => binding
            .Ajax()
            .Select("KpiEditTemplate", "Kpi")
            .Insert("InsertKpi", "Kpi")
            .Update("UpdateKpi", "Kpi"))
        .ClientEvents(events =>     events.OnRowDataBound("Grid_onRowDataBound").OnSave("Grid_onSave").OnError("checkForSessionTimeout"))
        .Pageable()
        .Sortable()
        .Filterable()
        .Selectable()
    )
    @(Html.Telerik().Window()
        .Name("Window")
        .Visible(false)
        .Width(300)
        .Height(200)
        .Modal(true)
    )
</div>

Answer 1

From what I can tell, even if you have an area, the Editor Template needs to be relative to the _Layout.cshtml. I'm sure there is a setting somewhere that this is set, and I am just not seeing it. I'm inheriting this application from a previous engineer and moving that file got this to work for me.

Answer 2

The Telerik documentation isn't up to date, so it doesn't tell you that you can use simpler syntax. I've had success with something like this. No UIHint attribute needed.

@(Html.Telerik().Grid<MyViewModel>()
  .Name("Grid")
  .Columns(cols =>
    {
      cols.Bound(o => o.Property1);
      cols.Bound(o => o.Property2)
          .EditorTemplateName("Property2Template"); // this your .cshtml filename
    })
  .DataBinding(binding =>
    {
       //etc
    })
  // remainder of grid code
)

Your editor template should be in the Views/Shared/EditorTemplates directory of your Area. Hope that helps.