New to Telerik UI for ASP.NET MVCStart a free 30-day trial

Using Enum Type Fields in Grid

Environment

ProductTelerik UI for ASP.NET MVC Grid
Product version2025.1.227

Description

How can I use configure the Telerik UI for ASP.NET MVC Grid to display and edit enum type fields?

Solution

The example relies on the following key steps:

  1. Define a Grid with a column that binds to a field of type enum:

    Razor
        @(Html.Kendo().Grid<Product>()
            .Name("Grid")
            .Columns(columns =>
            {
                ...
                columns.Bound(p => p.Category);
            })
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            ...
        )
  2. The Category field is an Enumeration:

    C#
        public class Product
        {
            public Category Category { get; set; }
        }
    
        public enum Category
        {
            Beverages,
            Foods
        }
  3. Create a custom editor template for the Category field:

    Razor
    @model Category
    @using Kendo.Mvc.UI
    
    @{
        List<SelectListItem> list = new List<SelectListItem>();
        foreach (var value in Enum.GetValues(typeof(Telerik.Examples.Mvc.Areas.GridEditingAjaxWithEnumeration.Models.Category)))
        {
            list.Add(new SelectListItem()
            {
    
                Text = value.ToString(),
                Value = ((int)value).ToString()
            });
        }
    }
    
    @(Html.Kendo().DropDownListFor(m=> m)
        .DataTextField("Text")
        .DataValueField("Value")
        .BindTo(list)
    )

To review the complete example, refer to the ASP.NET MVC application on how to configure the Grid to display and edit enum fields.

More ASP.NET MVC Grid Resources

See Also