1. Home
  2. Forum
  3. Angular - EJ 2
  4. Enum inside Grid column (sort and filter)

Enum inside Grid column (sort and filter)

Lets say I have a Grid that holds some arbitary Assets/Entities.

The data may look like this:
IDNameParentCriticality
1Main Site
null
2Main Building11
3Machine 122
4Machine 225

The field Criticality is actually an enum (the value is stored in the database as an integer)

export enum EntityCriticality { None = 0, // Unspecified or inherited Low = 1, // Minimum value Minor = 2, Moderate = 3, High = 4, Extreme = 5 // Maximum value }

We obviously want to sort numerically and filter on the both the client/server side and via WebApiAdaptor (similar to OData).

How do we set the grid up so that when we send the filter to the server side (via Adaptor) it sends the integer, but when we sort client side we sort by the friendly name (label) of the enum?

We don't want to see this:


Apologies in advanced if this question has already been asked before.







2 Replies 1 reply marked as answer
JC Jeremy Carter February 19, 2021 12:45 AM UTC

I would like to point out a way to do this that I have since found.

<e-column field="criticality" headerText="Criticality" width="200" [valueAccessor]="criticalityValueAccessor">
  <ng-template #filterItemTemplate let-data>{{criticalityFormatted(data)}}</ng-template>
</e-column>

criticalityFormatted(data: Partial<Entity>): string {
  return EntityCriticality.toFormatted(data?.criticality)
}

criticalityValueAccessor(field: string, data: Partial<Entity>) {
  return EntityCriticality.toFormatted(data?.criticality)
}

You need a combination of both the ValueAccessor and the FilterItemTemplate.




BS Balaji Sekar Syncfusion Team February 19, 2021 05:54 PM UTC

  
Hi Jeremy, 

Greetings from the Syncfusion support. 

Query: Enum inside Grid column (sort and filter) 

Based on this query, we have prepared a sample with Enum type data. Please find the code example and sample for more information.  
  
[App.component.html] 
  
<ejs-grid #grid [dataSource]='data' height='273px' allowPaging="true" allowFiltering="true" [filterSettings]='filterOption' (dataBound)="dataBound($event)" (actionBegin)="actionBegin($event)" (actionComplete)="actionComplete($event)">  
    <e-columns>  
        <e-column field='OrderID' headerText='Order ID' textAlign='Right'  
                  isPrimaryKey='true' width=100></e-column>  
        <e-column field='Reference' headerText='Reference' [valueAccessor]='valueAccess' width=120>  
            <ng-template #filterItemTemplate let-data>  
                {{filterValueFormat(data)}}  
            </ng-template>  
        </e-column>  
        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>  
    </e-columns>  
</ejs-grid>  
App.component.ts  
  
export class FetchDataComponent {  
    @ViewChild('grid') public grid: GridComponent;  
    public Ajax = new Ajax({  
        type: "POST",  
        url: '/Home/UpdateUploadGrid',  
        contentType: "application/json; charset=utf-8",  
    });  
    public enumData: any=[];  
    public filterOption: FilterSettingsModel = { type: 'Excel' };      
     
    ngOnInit(): void {  
        this.Ajax.send().then((result: any) =>{  
            var data = JSON.parse(result);  
            this.enumData = data.enumdata; // get the enum value and text from the controller side  
            var grid = (document.getElementsByClassName('e-grid')[0] as any).ej2_instances[0];  
            grid.dataSource = data.result;  
        });  
    }  
    actionComplete(args: any) {  
        if (args.requestType == "filterchoicerequest") {  
            args.filterModel.dlg.querySelector(".e-ftrchk").classList.add("selectall")  
        }  
    }  
    valueAccess = (field: string, data: any, column: object) => {  
        this;  
        for (var i = 0; i < this.enumData.length; i++) {  
            if (this.enumData[i].value == data[field]) {  
                return this.enumData[i].text;  // return enum text which will be displayed in the Grid  
            }  
        }  
    }  
    filterValueFormat(args: any) {  
        for (var i = 0; i < this.enumData.length; i++) {  
            if (this.enumData[i].value == args[args.column.field]) {  
                return this.enumData[i].text; // return the enum text which will be displayed in the checkbox filter  
            }   
        }  
    }  
}  
  
  
By default, Grid displays the Enum value. To display the Enum text in the grid, we stored the Enum value and text at controller side and get it from the client side and stored this in a reference variable.  
  
[Controller.cs]  
public static List<object> UserStates  // store the enum type and text in a list  
        {  
            get  
            {  
                var userStates = new List<object>();   
                Type enumType = typeof(AmountReference);   
                // I will get all values and iterate through them       
                var enumValues = enumType.GetEnumValues();  
                foreach (AmountReference value in enumValues)  
                {  
                    MemberInfo memberInfo =  
                        enumType.GetMember(value.ToString()).First();  
                    var descriptionAttribute =  
                        memberInfo.GetCustomAttribute<DescriptionAttribute>();  
                    AmountReference eval2 = value;  
                    int value1 = (int)eval2;  
                    userStates.Add(new { value = value1, text = eval2.ToString() });  
                }  
                return userStates;  
            }  
        }  
  
  
By using valueAccessor in that column, we dynamically display the correspond Enum text in the Grid. same can be achieved in the excel filter dialog by using filterItemTemplate. Refer the below code documentation for more information.  
  
   
Please get back to us if you need further assistance with this.  
  
Regards,   
Balaji Sekar 


Marked as answer
Loader.
Up arrow icon