Bind column to an enum

[AnilaCar]

I am trying to bind an Enum to the Status column. In the grid column, I need to be displayed the text of the enum. The text of the enum needs to be also displayed in the Excel filter type.

I was able to achieve this using the code below but I was not able to make it work when searching in the grid_SearchBox when trying to filter the Status column. What I need here is to be able to search on the enum text and not on the enum Id.

Note I am using ASP.NET Core Grid control, in a C#, ASP. NET Core MVC application.

@model VehicleManagementViewModel

@{
var vehicleStatusDropDownList = new Syncfusion.EJ2.DropDowns.DropDownList()
        {
            DataSource = Model.VehicleStatuses.Statuses,
            Query = "new ej.data.Query()",
            AllowFiltering = true,
            Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings()
            {
                Value = nameof(VehicleStatusDto.Id),
                Text = nameof(VehicleStatusDto.Name)
            },
            Placeholder = Localizer["Select Status"].Value
        };


var statusEditParams = new
{
    @@params = vehicleStatusDropDownList
};

    var vehicleStatusNameValueAccessor = "getVehicleStatusName";
    var vehicleStatusFilter = new
    {
        itemTemplate = "#vehicleStatusName"
    };
}
<ejs-grid id="grid"
          dataSource="@Model.Vehicles"
          dataBound="VehicleList.onDataBound"
          actionBegin="VehicleList.onActionBegin"
          actionComplete="VehicleList.onActionComplete"
          height="auto"
          allowResizing="true"
          allowSorting="true"
          allowFiltering="true"
          gridLines="Both"
          toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Search"})"
          toolbarClick="VehicleList.onToolbarClick"
          created="VehicleList.onCreated"
          load="VehicleList.onLoad">
    <e-grid-filterSettings type="Excel"></e-grid-filterSettings>
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editSettings>


    <e-grid-columns>
        <e-grid-column field="@nameof(VehicleViewModel.Id)" headerText=@Localizer["Id"].Value type="number" textAlign="Left" isPrimaryKey="true" visible="false"></e-grid-column>
        <e-grid-column field="@nameof(VehicleViewModel.Status)"
                       headerText=@Localizer["Status"].Value
                       editType="dropdownedit"
                       type="string"
                       edit="statusEditParams"
                       valueAccessor="vehicleStatusNameValueAccessor"
                       filter="vehicleStatusFilter"
                       textAlign="Left">
        </e-grid-column>
    </e-grid-columns>
</ejs-grid>
@section Scripts
{
    <script id="vehicleStatusName" type="text/x-template">
        ${StatusName}
    </script>
<script>
        function getVehicleStatusName(field, data) {
             return data.StatusName;
        }
</script>
}

[Aishwarya Rameshbabu]

Hi AnilaCar,

Greetings from Syncfusion support.

Upon reviewing the provided information and code example, we observed that you are encountering difficulties with searching or filtering a column containing Enum data within the Syncfusion Grid. We have developed a sample based on the shared code example but were unable to reproduce the issue described. Please review the attached sample and video demonstration, which illustrate that searching for Enum text in the Grid's search bar yields the correct results and that the status filter is operating correctly.

Sample and video demonstration: please refer to the attachments.

If the issue persists, please attempt to reproduce the problem using the attached sample or provide a simplified replication sample along with a video demonstration of the issue for further analysis.

Regards

Aishwarya R

Attachment: 195443SampleAndVideo_52a3ed39.zip

[AnilaCar]

Hi Aishwarya.

In your example you are using the StringEnumConverter:

[JsonConverter(typeof(StringEnumConverter))] 

public OrderStatus Status { get; set; }

I would like to keep the dropdown values as integers. Is it possible? 

Thank you, 

[Aishwarya Rameshbabu]

Hi AnilaCar,

Based on the information provided, it seems you wanted to display integer values in a dropdown list rendered in the edit form of the Syncfusion Grid. To offer a customized solution that best addresses your needs, we kindly request further details to ensure we can provide the most effective guidance. Please assist us by supplying the following information:

1. Confirmation of Previous Issue Resolution:

   - Please confirm whether the previously reported issue concerning the search functionality has been resolved.

2. Enum Value Requirements:

   - Please clarify if your requirement involves displaying Enum values in the dataSource of the DropDownList instead of the Enum text. Also please share the code details on how you defining the Enums in your model file.

3. Detailed Issue Description:

   - Provide a detailed description of the specific issue or challenge you are currently encountering.

4. Issue Replication:

   - Attempt to replicate the issue using the sample provided in our previous update.

   - Alternatively, share a simplified sample project or code snippet where the issue can be reproduced.

5. Video Demonstration:

   -  Provide a video demonstrating the steps to replicate the issue.

Providing these details will greatly assist us in diagnosing the issue and delivering a precise solution..

To assist you in getting started, we have included some reference links below:

• Grid: How to show enum text values in the Grid column for .NET MVC application?
• DropdownList: Binding Enum Data to DropDownList in ASP.NET Core

Regards

Aishwarya R

[AnilaCar]

Hi Aishwarya, 

I already replicated the issue using your project. If you remove  [JsonConverter(typeof(StringEnumConverter))] from

public OrderStatus Status { get; set; } you will see the Ids in the Status column and not the text.

I do not want to display the ID, I want to display the text of the Enum and to search through the text of the enum but I do not want to loose the link with the ID of the enum. If I use StringEnumConverter on the enum I will loose the ID of the enum.

[Aishwarya Rameshbabu]

Hi AnilaCar,

In ASP.NET Core, the Syncfusion Grid by default utilizes the JavaScriptSerializer to serialize the data source. This serializer translates enums into their numeric values, rather than their string equivalents. To present enum text instead of numeric values in the Grid, it is advisable to employ a custom serializer.

Custom Serializer: Implementing a custom serializer enables the conversion of enum values to their string equivalents, facilitating the display of enum text in the Grid and allowing for desired data operations based on these text representations.

For additional information, please consult the specific implementation guides and examples available in our knowledge base:

KB Links:

How to show enum text values in the Grid column for .NET MVC application?

Binding Enum Data to DropDownList in ASP.NET Core

Dropdown Editing:

To maintain the association with the enum ID while displaying enum values in the edit dropdown, you can utilize the Grid's custom cell editor feature. This feature allows for binding dropdown values as enum values rather than text. Below is a conceptual illustration:

Index.cshtml

<ejs-grid

……………

    <e-grid-column field="Status" headerText="Status" width="150" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})"

            type="string" valueAccessor="vehicleStatusNameValueAccessor" filter="vehicleStatusFilter"

            textAlign="Left"></e-grid-column>

……………..

</ejs-grid>

<script>

    function getVehicleStatusName(field, data) {

        return data.Status;

    }

    var dropDownElement;

    var dropDownListObj;

    var selectDataSource = @Html.Raw(jsonDdData);

    function create() { // To create the component

        dropDownElement = document.createElement('input');

        return dropDownElement;

    }

    function destroy() { // To destroy the component

        dropDownListObj.destroy();

    }

    function read() { // To read the value from the component

        return dropDownListObj.value;

    }

    function write(args) { // To initialize the component width default value

        var rowData = args.rowData;

        dropDownListObj = new ej.dropdowns.DropDownList({

            value: rowData.Status,

            dataSource: selectDataSource,

            fields: { value: 'Value', text: 'Text' },

        });

        dropDownListObj.appendTo(dropDownElement);

    }

</script>

 

OrderDetails.cs

 

        public IEnumerable<SelectedListItem> CastEnumToList()

        {

            var statusList = Enum.GetValues(typeof(OrderStatus))

             .Cast<OrderStatus>()

             .Select(g => new SelectedListItem(

                  ((int)g).ToString(),

                  g.ToString()

             ));

            return statusList; //Enum values to list of items to bound to the dataSource of DropDownList.

        }

 

By implementing the above strategy, the Grid will display the enum text while connecting dropdown selections using enum IDs, thus maintaining underlying associations.

Sample: Please find in the attachment.

Documentation Link:

Render-dropdownlist-component-in-edit-form

If you still encounter any issues, please share the details that we have requested in our previous update.

  

Regards

Aishwarya R

Attachment: 195443UpdatedSample_d8881de7.zip