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

Description

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:

  Razor

      @(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.
      )

  C#

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

  C#

      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:

  Razor

      @(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.
      )

  C#

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

  C#

      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:

C#

    @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.

C#

    using System.ComponentModel.DataAnnotations;

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

EnumEditor.cshtml

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

    @model ShipmentStatus

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

More ASP.NET MVC Grid Resources

• ASP.NET MVC Grid Documentation

• ASP.NET MVC Grid Demos

• ASP.NET MVC Grid Product Page

• Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET MVC Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET MVC

• Server-Side API Reference of the Grid for ASP.NET MVC

• Telerik UI for ASP.NET MVC Breaking Changes

• Telerik UI for ASP.NET MVC Knowledge Base