Filtering and Editing a ForeignKey Column Bound to an Enum Field in Grid

Environment

Product	Telerik UI for ASP.NET MVC Grid
Product Version	2024.4.1112

How can I bind a Grid to a ForeignKey column and ensure that the names of enum members are displayed in the column's filter menu? Also, how to use a DropDownList editor for the enum field when the Grid enters edit mode?

Solution

When binding a ForeignKey column to an enum Model property, convert the enum members to a SelectListItem data collection.

Binding the ForeignKey column to a local collection:

    @(Html.Kendo().Grid<GridModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.ForeignKey(p => p.Status, (System.Collections.IEnumerable)ViewData["statuses"], "Value", "Text")
            .Filterable(x => x.Extra(false).Operators(operators => operators.ForEnums(str => str.Clear().IsEqualTo("Equals"))));
        })
        ...// Additional configuration.
    )

    public ActionResult GridPage() // The Action method that returns the View with the Grid.
    {
        var enumList = EnumToSelectList(typeof(ShipmentStatus)); // Parse the enum members to List<SelectListItem>.
        ViewData["statuses"] = enumList;
        return View();
    }

    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();
    }

    public class GridModel
    {
        public ShipmentStatus Status { get; set; }
    }

    public enum  ShipmentStatus
    {
        [Display(Name = "In Process")]
        InProcess = 1,
        [Display(Name = "In Transit")]
        InTransit = 2,
        [Display(Name = "Received")]
        Received = 3,
        [Display(Name = "Lost In Shipment")]
        LostInShipment = 4
    }

Binding the ForeignKey column to remote data:

    @(Html.Kendo().Grid<GridModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.ForeignKey(p => p.Status, ds => ds.Read(r => r.Action("ReadStatuses", "Home")), "Value", "Text")
            .Filterable(x => x.Extra(false).Operators(operators => operators.ForEnums(str => str.Clear().IsEqualTo("Equals"))));
        })
        ...// Additional configuration.
    )

    public ActionResult ReadStatuses()
    {
        var enumList = EnumToSelectList(typeof(ShipmentStatus));
        return Json(enumList);
    }

    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();
    }

    public class GridModel
    {
        public ShipmentStatus Status { get; set; }
    }

    public enum  ShipmentStatus
    {
        [Display(Name = "In Process")]
        InProcess = 1,
        [Display(Name = "In Transit")]
        InTransit = 2,
        [Display(Name = "Received")]
        Received = 3,
        [Display(Name = "Lost In Shipment")]
        LostInShipment = 4
    }

When the Grid is InCell or InLine editable, the Grid will look for the default GridForeignKey.cshtml editor template in the ~Views\Shared\EditorTemplates folder, and populate it with the passed data collection through the column declaration:

    @model object
    @(Html.Kendo().DropDownListFor(m => m)
    .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("")+ "_Data"])
    )

When the Grid is configured for Popup editng, decorate the Model property with the UIHint attribute and add a DropDownList editor to the ~Views\Shared\EditorTemplates folder.

    using System.ComponentModel.DataAnnotations;

    public class GridModel
    {
        [UIHint("EnumEditor")]
        public ShipmentStatus Status { get; set; }
    }

    // ~Views\Shared\EditorTemplates\EnumEditor.cshtml

    @model ShipmentStatus

    @(Html.Kendo().DropDownListFor(m => m)
    .BindTo(EnumToSelectList(typeof(ShipmentStatus)))
    )

Filtering and Editing a ForeignKey Column Bound to an Enum Field in Grid

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also

Getting Started

Support Resources

Community