We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to show enum text values in grid columns?

Platform: ASP.NET MVC |
Control: Grid |
Published Date: September 11, 2018 |
Last Revised Date: May 5, 2020

This Knowledge base explains how to show enum text values in the Grid column.

Solution:

By default, the JavaScriptSerializer is used to serialize the DataSource in Grid. It serializes the enums to numeric values and not their string representation. So, if you want to serialize the enum as its name instead of numeric value, it can be achieved using the custom serializer in DataManager and referring the custom serializer in the View page.

The following code example demonstrates how to show enum text values in Grid column.

1.Render the Grid control.

MVC

@{
    DataManagerConverter.Serializer = new HomeController.DMSerial();
}
 
@(Html.EJ().Grid<object>("FlatGrid")
           .Datasource((IEnumerable<object>)ViewBag.datasource)
           .AllowPaging()    /*Paging Enabled*/
           .AllowFiltering()
           .Columns(col =>
            {
                col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(true).Width(75).Add();
                col.Field("FirstName").HeaderText("FirstName").Width(75).Add();
                col.Field("LastName").HeaderText("LastName").Width(75).Add();
                col.Field("Title").HeaderText("Title").Width(110).Add();
                col.Field("Unit").HeaderText("Unit").Width(75).Add();           
            }))

 

2.In the server side we have serialized the datasource using the Newtonsoft.Json serializer. The enum values are converted into string by using the Newtonsoft StringEnumConverter.

C#

using System.Web.Mvc;
using System.Runtime.Serialization;
using Syncfusion.JavaScript.Shared.Serializer;
using System.Collections.Generic;
 
namespace EJGrid.Controllers
{
 
    public class HomeController : Controller
    {
        public static List<Details> obj = new List<Details>();
        public ActionResult Index()
        {
            var DataSource = GetInversedData();
            ViewBag.datasource = DataSource;
            return View();
        }
 
        public class DMSerial : IDataSourceSerializer
        {
            public string Serialize(object obj)
            {
                return Serialize(obj, null);
            }
            public string Serialize(object obj, object settings)
            {
               var str = Newtonsoft.Json.JsonConvert.SerializeObject(obj);
               return str;
            }
        }
 
        public static List<Details> GetInversedData()
        {
            List<Details> obj = new List<Details>();
            for (var i = 0; i < 1; i++)
            {
                obj.Add(new Details() { OrderID = 10001, FirstName = "Nancy", LastName = "Davolio", Title = "Sales Representative", Unit = UnitOfMeasure.g });
                obj.Add(new Details() { OrderID = 10002, FirstName = "Andrew", LastName = "Fuller", Title = "Vice President, Sales", Unit = UnitOfMeasure.Kg });
                obj.Add(new Details() { OrderID = 10003, FirstName = "Janet", LastName = "Leverling", Title = "Sales Representative", Unit = UnitOfMeasure.l });
                obj.Add(new Details() { OrderID = 10004, FirstName = "Margaret", LastName = "Peacock", Title = "Sales Representative", Unit = UnitOfMeasure.Nr });
                obj.Add(new Details() { OrderID = 10005, FirstName = "Steven", LastName = "Buchanan", Title = "Sales Manager", Unit = UnitOfMeasure.Nr });
                obj.Add(new Details() { OrderID = 10006, FirstName = "Michael", LastName = "Suyama", Title = "Sales Representative", Unit = UnitOfMeasure.g });
                obj.Add(new Details() { OrderID = 10007, FirstName = "Robert", LastName = "King", Title = "Sales Representative", Unit = UnitOfMeasure.Kg });
                obj.Add(new Details() { OrderID = 10008, FirstName = "Laura", LastName = "Callahan", Title = "Inside Sales Coordinator", Unit = UnitOfMeasure.l });
            }
            return obj;
        }
 
        public class Details
        {
            public int OrderID { get; set; }
            public string FirstName { get; set; }
            public string LastName { get; set; }
            public string Title { get; set; }
            [Newtonsoft.Json.JsonConverter(typeof(Newtonsoft.Json.Converters.StringEnumConverter))]
            public UnitOfMeasure Unit { get; set; }
        }
 
 
        public enum UnitOfMeasure
        {
            [EnumMember(Value = "Number")]
            Nr = 0,
            [EnumMember(Value = "Kilogram")]
            Kg = 1,
            [EnumMember(Value = "Gram")]
            g = 2,
            [EnumMember(Value = "Liter")]
            l = 3
        }
 
    }
}

 

ASP.NET CORE

 
<ej-grid id="FlatGrid" datasource="ViewBag.datasource" databound="ondatabound">
    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" show-delete-confirm-dialog="true"></e-edit-settings>
    <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","delete","update","cancel"}' />
    <e-columns>
        <e-column field="OrderID" header-text="Order ID" width="75" is-primary-key="true"></e-column>
        <e-column field="FirstName" header-text="FirstName" width="75"></e-column>
        <e-column field="LastName" header-text="LastName" width="75"></e-column>
        <e-column field="Title" header-text="Title" width="110"></e-column>
         <e-column field="Unit" header-text="Unit" width="75"></e-column>
    </e-columns>
</ej-grid>
 

 

C#

using System.Collections.Generic;
using System.Runtime.Serialization;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.JavaScript.Shared.Serializer;
 
namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {
        public static List<Details> obj = new List<Details>();
     
        public IActionResult Index()
        {
            ViewBag.datasource = GetInversedData();
            return View();
        }
 
        public class DMSerial : IDataSourceSerializer
        {
            public string Serialize(object obj)
            {
                return Serialize(obj, null);
            }
            public string Serialize(object obj, object settings)
            {
               var str = Newtonsoft.Json.JsonConvert.SerializeObject(obj);
               return str;
            }
        }
 
        public static List<Details> GetInversedData()
        {
            List<Details> obj = new List<Details>();
            for (var i = 0; i < 1; i++)
            {
                obj.Add(new Details() { OrderID = 10001, FirstName = "Nancy", LastName = "Davolio", Title = "Sales Representative", Unit = UnitOfMeasure.g });
                obj.Add(new Details() { OrderID = 10002, FirstName = "Andrew", LastName = "Fuller", Title = "Vice President, Sales", Unit = UnitOfMeasure.Kg });
                obj.Add(new Details() { OrderID = 10003, FirstName = "Janet", LastName = "Leverling", Title = "Sales Representative", Unit = UnitOfMeasure.l });
                obj.Add(new Details() { OrderID = 10004, FirstName = "Margaret", LastName = "Peacock", Title = "Sales Representative", Unit = UnitOfMeasure.Nr });
                obj.Add(new Details() { OrderID = 10005, FirstName = "Steven", LastName = "Buchanan", Title = "Sales Manager", Unit = UnitOfMeasure.Nr });
                obj.Add(new Details() { OrderID = 10006, FirstName = "Michael", LastName = "Suyama", Title = "Sales Representative", Unit = UnitOfMeasure.g });
                obj.Add(new Details() { OrderID = 10007, FirstName = "Robert", LastName = "King", Title = "Sales Representative", Unit = UnitOfMeasure.Kg });
                obj.Add(new Details() { OrderID = 10008, FirstName = "Laura", LastName = "Callahan", Title = "Inside Sales Coordinator", Unit = UnitOfMeasure.l });
            }
            return obj;
        }
 
        public class Details
        {
            public int OrderID { get; set; }
            public string FirstName { get; set; }
            public string LastName { get; set; }
            public string Title { get; set; }
            [Newtonsoft.Json.JsonConverter(typeof(Newtonsoft.Json.Converters.StringEnumConverter))]
            public UnitOfMeasure Unit { get; set; }
        }
 
 
        public enum UnitOfMeasure
        {
            [EnumMember(Value = "Number")]
            Nr = 0,
            [EnumMember(Value = "Kilogram")]
            Kg = 1,
            [EnumMember(Value = "Gram")]
            g = 2,
            [EnumMember(Value = "Liter")]
            l = 3
        }
 
    }
}         

 

Angular

HTML

<ej-grid id="Grid" [dataSource]="gridData" [allowPaging]="true" [allowFiltering]="true" [toolbarSettings]="toolbarItems" >
    <e-columns>
        <e-column field="OrderID" headerText="OrderID" width="75"></e-column>
        <e-column field="FirstName" headerText="FirstName" width="75"></e-column>
        <e-column field="LastName" headerText="LastName"  width="75"></e-column>
        <e-column field="Title" headerText="Title" width="110" ></e-column>
        <e-column field="Unit" headerText="Unit" width="75" ></e-column>
    </e-columns>
 </ej-grid>

 

TS

 
import {Component, ViewEncapsulation,ViewChild} from '@angular/core';
 
import {CommonModule} from "@angular/common";
 
import { EJComponents } from "ej-angular2/src/ej/core";
 
@Component({
    selector: 'ej-app',
    templateUrl: 'src/grid/grid.component.html',
})
export class GridComponent {
    public gridData;
    constructor()
    {
        enum Unit {
            Number,
            Kilogram,
            Gram,
            Litre
        }
        this.gridData = [{
        OrderID: 10248, Unit: Unit[0], FirstName: "Nancy",
        LastName: "Davolio", Title: "Sales Representative"
      },
      {
        OrderID: 10249, Unit: Unit[1], FirstName: "Andrew",
        LastName: "Fuller", Title: "Vice President, Sales"
      },
      {
        OrderID: 10250, Unit: Unit[2], FirstName: "Janet",
        LastName: "Leverling", Title: "Sales Manager"
      },
      {
        OrderID: 10251, Unit: Unit[3], FirstName: "Margaret",
        LastName: "Peacock", Title: "Inside Sales Coordinator"
      },
      {
        OrderID: 10252, Unit: Unit[2], FirstName: "Steven",
        LastName: "Buchanan", Title: "Sales Representative"
      }];
        
    }
}

 

Result:

Showing enum text values in grid column

Figure 1 Showing enum text values in grid column

 

2X faster development

The ultimate ASP.NET MVC UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile