Trying to create a multi filter column using the ItemTemplate and from the Enum Data, But ItemTemplate function is not being called

[Pol]

 

I am trying to create a multifilter from enum data type column using the ItemTemplate. But ItemTemplate Javascript function is not being called and data is not being shown in combobox. Please can you give me a help. Here is the code

Enum Records

public enum EmpTypes
{
    [Display(Name = "Service")]
    Service = 0,
    [Display(Name = "Sales")]
    Sales = 1,
    [Display(Name = "Purchase")]
    Purchase = 2,
    [Display(Name = "Office")]
    Office = 3
}

Kendo Grid

columns.Bound(c => c.EmpTypes).Title("Type")
        .Filterable(filterable => filterable
            .Multi(true)
            .UI(“”).DataSource(s=>s.Read(r=>r.Action(“GetEmpTypes”,”Report”)))
            .ItemTemplate(“typetemplate”));
<script>
 function typetemplate(e)
{
  alert('Test');
}

</script>

Action Method in MVC controller

Public ActionResult GetEmpTypes()
{
 List<EmpType> emptypes = new List<EmpType>();
emptypes.Add(EmpType.Sales)
emptypes.Add(EmpType.Report)
return Json(emptypes,JsonRequestBehavior.AllowGet);
}

 

[Mihaela]

Hello Pol,

Indeed, you can use the ItemTemplate() option to customize the rendered checkboxes in the column filter menu. Also, I would recommend converting the Enums to a List<SelectListItem>, so you can access both the text and the value of each option. 

For example:

//View
columns.Bound(c => c.EmpTypes).Title("Type")
.Filterable(filterable => filterable
.Multi(true)
.ItemTemplate("typetemplate")
.DataSource(ds => ds.Read(r => r.Action("GetEmpTypes", "Report"))));

<script>
    function typetemplate(e) {
        return ({ Text, Value }) => `<span><label><span>${Text}</span><input type='checkbox' name='" + e.field + "' value='${Value}'/></label></span><br/>`
    }
</script>

//ReportController.cs
public JsonResult GetEmpTypes()
{
    var enumList = EnumToSelectList(typeof(EmpTypes)); // Convert the Enums to List<SelectListItem>
    return Json(enumList, JsonRequestBehavior.AllowGet);
}

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();
}

Would you give this example a try and let me know if it works correctly at your end?

Regards,
Mihaela
Progress Telerik

[Pol]

Hi Mihaela

I applied your sample script in my code but some reason the script inside the method typetemplate() is not called. If I try to call a function using the  ItemTemplate  from bounded column in Kendo , the function will not be called. Please can you let me know what is the scenarios in Kendo the ItemTemplate is not being called in Kendo MVC for bounded column. if  the function can be called from ItemTemplate , the problem can be solved. Also there is no any console error in source