Category / Section
How to show enum text values in grid columns?
6 mins read
By default, the .NET Core Grid 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:
Figure 1 Showing enum text values in grid column
Conclusion
I hope you enjoyed learning about how to show enum text values in the Grid column for .NET Core application.
You can refer to our .NET Core Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our .NET Core Grid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
