Filter Control - Enum list instead of free text

1 Answer 239 Views
Filter
Felix
Top achievements
Rank 1
Iron
Felix asked on 22 Jul 2021, 02:13 PM

Hi,

I have a Filter Control combined with a Grid Control.
Both are linked to the same Kendo Datasource.

Everything works like a charm

Now I want to set up a enum list for a field in the Filter Control, but I was unable to figure out how. (only free text works in the Filter Control)

The data source is gigantic, the filters in the filter control must be set before calling the data and as there are some fields like "business type" I want to show all possible values, without having each user memorize each possible value for each enum field.

What I want works with the datagrid filter once the datagrid is populated from the datasource, but it's impossible to load all the data and therefore I need the filter control.
(If there is another way, I am open to it)

Is this possible?

Is there some documentation I missed?

 

1 Answer, 1 is accepted

Sort by
1
Accepted
Mihaela
Telerik team
answered on 27 Jul 2021, 10:55 AM

Hi Felix,

Thank you for the provided information.

You could implement a custom editor inside the Filter through the "EditorTemplate"/"EditorTemplateId" methods. The example below demonstrates how to set a custom editor for the Enum field "BusinessType":

 

//View
@(Html.Kendo().Filter<ProjectName.Models.OrderViewModel>()
        .Name("filter")
        .ApplyButton()
        .Fields(f =>
        {
            f.Add(p => p.BusinessType_Property).DefaultValue("Value1").EditorTemplateId("myTemplate").Label("Business Type");
        })
        .DataSource("myDataSource")
)

<script type="text/x-kendo-template" id="myTemplate">
    @(Html.Kendo().DropDownList()
          .Name("BusinessType_Property")
          .DataTextField("Text")
          .DataValueField("Value")
          .DataSource(source =>
          {
              source.Read(read =>
              {
                  read.Action("GetEnumData", "ControllerName");
              });
          })
          .ToClientTemplate()
    )
</script>

//Model
    public enum BusinessType { Value1, Value2, Value3 }
    public class OrderViewModel
    {
        public static object BusinessType { get; internal set; }
        public BusinessType BusinessType _Property { get; set; }
    }

//Extenstions.cs
//A static method, which would accept an Enum data filed (i.e. "BusinessType") and would return its key-value pairs as a List
public static class Extensions
{
        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();
        }
}

//Controller
public JsonResult GetEnumData()
{
  return Json(Extensions.EnumToSelectList(typeof(BusinessType)).ToList());
}

Would you please give this suggestion a try and let me know if it works for you?

In terms of the filtering of the grid's data, your assumption is correct - reducing the quantity of data via an external/initial filter is a general approach for handling huge amounts of data.

 


Regards, Mihaela Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Felix
Top achievements
Rank 1
Iron
commented on 29 Jul 2021, 11:26 AM

Hi Mihaela,
this is exactly what I searched for - I could implement it, thanks to your provided example.
Pretty straightforward once you get it.
Tags
Filter
Asked by
Felix
Top achievements
Rank 1
Iron
Answers by
Mihaela
Telerik team
Share this question
or