DropDownList with Enum Kendo UI

Question

I'm working on updating an application to use Kendo UI and have run into an issue with binding to an Enum with the DropDownList. The two issues I am having is 1) the value does not contain the Enum value and instead contains "Today" (should be 0), and 2) The display value is always "Last10Days" instead of "Last 10 Days" in the description tag. I looked and couldn't find another place where someone has used Kendo UI to display the description as the text and include the numerical value instead of the text. Any help is appreciated.

View

<div class="span6">
  @Html.LabelFor(m=> m.DateRanges)
  @(Html.Kendo().DropDownListFor(m => m.DateRanges)
      .BindTo(Enum.GetNames(typeof(SearchDateRanges)).ToList())
      .HtmlAttributes(new { value = "Today" })
      .DataTextField("Text")
      .Events(e => e.Change("DateChange")))
</div>

<div class="span6">
  @Html.LabelFor(m => m.Status)
  @(Html.Kendo().DropDownListFor(m=> m.Status)
      .BindTo(Enum.GetNames(typeof(SearchStatusCriteria)).ToList())
      .HtmlAttributes(new {value = "All"}))
</div>

Model

    public enum SearchDateRanges
{
    [Description("Today")]
    Today = 0,

    [Description("Last 10 Days")]
    Last10Days = 1,

    /// <summary>
    /// The last 30 days.
    /// </summary>
    [Description("Last 30 Days")]
    Last30Days = 2,

    [Description("Last 60 Days")]
    Last60Days = 3,

    [Description("Last 90 Days")]
    Last90Days = 4,

    [Description("Custom Date Range")]
    CustomRange = 5
}

}

Answer 1

It appears that you are asking for the Variable Name of the enum and not the description attribute:

.BindTo(Enum.GetNames(typeof(SearchDateRanges)).ToList())

To get the description attribute you'll have to do a little work. Here is some code I found:

public static string GetEnumDescription(Enum value)
{
    FieldInfo fi = value.GetType().GetField(value.ToString());

DescriptionAttribute[] attributes =
    (DescriptionAttribute[])fi.GetCustomAttributes(
    typeof(DescriptionAttribute),
    false);

if (attributes != null &&
    attributes.Length > 0)
    return attributes[0].Description;
else
    return value.ToString();
}

You also are binding the Text Field to "Text" which doesn't exist in your enum.

Hope this helps.

Answer 2

AFAIK, this isn't supported automatically.

You can write a little helper method that takes an Enum type and converts it to a List<SelectListItem> like this:

public static List<SelectListItem> EnumToSelectList( Type enumType )
{
  return Enum
    .GetValues( enumType )
    .Cast<int>()
    .Select( i => new SelectListItem
      {
        Value = i.ToString(),
        Text = Enum.GetName( enumType, i ),
      }
    )
    .ToList()
}

Then you can bind your DropDownList to the Select List:

.BindTo( EnumToSelectList( typeof( SearchDateRanges ) ) )

If you want the text to come from the Description attributes, you'll have to modify this to get the attribute values - probably via Reflection.

Answer 3

NET MVC 5.1 with the @Html.EnumDropDownListFor.

Just make a new .cshtml in the Views/EditorTemplate folder.

For example, in a cshtml with the grid,

@(Html.Kendo().Grid<NameProved.Models.Issuer>()
.Name("IssuerGrid")
.Columns(columns =>
{
    columns.Bound(issuer => issuer.ID);
    columns.Bound(issuer => issuer.Name);
    columns.Bound(issuer => issuer.IssuerType);

    columns.Command(commands =>
        {
            commands.Edit();
            commands.Destroy();
        }).Title("Commands");
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable
    .Mode(GridEditMode.PopUp)
    )
.DataSource(datasource =>
    datasource
    .Ajax()
    .Events(events => events.Error("grid_error"))
    .Model(model =>
    {
        model.Id(issuer => issuer.ID);
        model.Field(issuer => issuer.ID).Editable(false).DefaultValue(0);
    })
    .Create(create => create.Action("Issuer_Create", "Admin"))
    .Read(read => read.Action("Issuer_Read", "Admin"))
    .Update(update => update.Action("Issuer_Update", "Admin"))
    .Destroy(destroy => destroy.Action("Issuer_Destory", "Admin"))
    )
.Pageable()

)
)

Here you would have to add the UIHint to the issuerType, which is a enum.

Then in the Views/Shared/EditorTemplate/IssuerTypeEditor.cshtml,

@model NameProved.Models.IssuerType

@Html.EnumDropDownListFor(issuerType => issuerType)

Then in the model, add the UIHint.

public class Issuer
{

    public int ID { get; set; }
    public string Name { get; set; }

    [UIHint("IssuerTypeEditor")]
    public IssuerType IssuerType { get; set; }
}

Then you will get it.