In an ASP.NET MVC kendo ui how make a clienttemplate field filterable

See more:

C#

ASP.NET

MVC

Kendo-UI

I have as ASP.NET MVC project that its UI is made with kendo and I must meke a ClientTemplate field filterable in the cshtml.

The controller is as following:

public class ShippingTransferInfoController : BaseController
{
     [Authorize]
     public ActionResult Index()
     {
         new SharedBAL().SessionStatus(RouteData.DataTokens["area"] + "/"
         + ControllerContext.RouteData.Values["controller"].ToString(),
         this.ControllerContext.RouteData.Values["Action"].ToString());
         var dt = ShippingRouteBAL.Sp_TbShippingShiftWork_SelByActive() ;
         var model = new ShippingTransferInfoViewModel();
         model.ListShippingShiftWorks =
           (from DataRow row in dt.Rows
            select new ShippingShiftWorkViewModel
                    {
                        Title=row["Title"].ToString(),    ShippingShiftWorkId=int.Parse(row["ShippingShiftWorkId"].ToString())
                    }).ToList();
            
                        return View(model:model);
                    }
        
    
     public ActionResult GridShippingTransferInfo_ReadAll([DataSourceRequest] 
     DataSourceRequest request,  DateTime date, string shippingShiftWorkId)
     {
         var userRef = new SharedBAL().GetUserID().ToString();
         var listdt = new List<ShippingTransferInfoViewModel>();
         var Dt = ShippingTransferInfoBAL.Sp_TbShippingTransferInfo_SelAll(userRef, 
         date,shippingShiftWorkId); 
         Dt = PrepareData(Dt);
        
         listdt = (from DataRow row in Dt.Rows
                    select new ShippingTransferInfoViewModel()
                    {
                        ShippingStartVehicleRef = 
                        row["ShippingStartVehicleRef"].ToString() != "" ? 
                        this.DropDown_TbShippingVehicle_SelAll()
                        .FirstOrDefault(record => record.DataValueIdString == 
                        row["ShippingStartVehicleRef"].ToString()) : null,
                        ShippingShiftWorkTitle = row["ShppingShiftWork"].ToString()
                        ShippingRouteTitle = row["ShippingRouteTitle"].ToString(),
                    }).ToList();
        
                    return Json(listdt.ToDataSourceResult(request));
              }
    
    
    
     public static List<ComboBoxModel> DropDown_TbShippingVehicle_SelAll()
     {
          var objMydbms = new Mydbms(Mydbms.ObjConn1);
          var dt = objMydbms.ExecuteDatatable("Sp_TbShippingVehicle_SelAll");
          var list = new List<ComboBoxModel>();
    
          foreach (DataRow row in dt.Rows)
          {
              var model = new ComboBoxModel()
              {
                  DataValueIdString = row["ShippingVehicleId"].ToString(),
                  DataValueName = row["Title"].ToString(),
               };
               list.Add(model);
          }
    
          return list;
       }
    }
 }

The view model is as following:

public class ShippingTransferInfoViewModel
{
    public long ShippingTransferInfoId { get; set; }

    public string DateShamsi { get; set; }

    public string ShippingRouteTitle { get; set; }

    [Required]
    public string ShippingShiftWorkTitle { get; set; }

    [UIHint("_ComboShippingStartVehicleRef")]
    public ComboBoxModel ShippingStartVehicleRef { get; set; }
}

The cshtml view is as following. I must make the "ShippingStartVehicleRef" filterable as like as "ShippingShiftWorkTitle"

@using Kendo.Mvc.UI
@model ShippingTransferInfoViewModel
                
                <div class="k-rtl col-lg-12 col-md-12 col-sm-12 col-xs-12 pull-right" id="KendoGrid">
                   @(Html.Kendo().Grid<ShippingTransferInfoViewModel>()
                     .Name("ShippingTransferInfoGrid")
                     .Columns(columns =>
                     {
                        columns.Bound(o => o.DateShamsi).Width(90).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")))
                        .Filterable(filterable => filterable
                        .Extra(true)
                        .Operators(ops => ops.ForString(str => str.Clear()
                        .Contains("Contains")
                        .StartsWith("Starts With")
                        .EndsWith("Ends With")
                        .IsEqualTo("Is Equal To"))));

                        columns.Bound(o => o.ShippingRouteTitle).Width(90).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")))
                        .Filterable(filterable => filterable
                        .Extra(true)
                        .Operators(ops => ops.ForString(str => str.Clear()
                        .Contains("Contains")
                        .StartsWith("Starts With")
                        .EndsWith("Ends With")
                        .IsEqualTo("Is Equal To"))));        
    
                       columns.Bound(o => o.ShippingShiftWorkTitle).Width(90)
                            .Filterable(filterable => filterable
                            .Extra(true)
                            .Operators(ops =>
                            ops.ForString(str => str.Clear()
                            .Contains("Contains")
                            .StartsWith("Starts With")
                            .EndsWith("Ends With")
                            .IsEqualTo("Is Equal To"))));
            
                        columns.Bound(o => o.ShippingStartVehicleRef)
                            .EditorTemplateName("_ComboShippingStartVehicleRef")
                            .ClientTemplate("#=(data.ShippingStartVehicleRef==null)?'':data.ShippingStartVehicleRef.DataValueName#")
                            .Width(70);
                     }
                     .Editable(c =>
                        {
                            c.Mode(GridEditMode.InCell); c.Window(x => x.Title("Edit"));
                            c.Window(x => x.Width(600).Height(400));
                        })
                        .Sortable()
                        .ClientDetailTemplateId("template")
                        .Scrollable(builder => builder.Enabled(true))
                        .AutoBind(true)
                        .DataSource(dataSource => dataSource
                        .Ajax()
                        .Read(read => read.Action("GridShippingTransferInfo_ReadAll", "ShippingTransferInfo").Data("GridShippingTransferInfo_GetParam"))
                        .Model(model =>
                        {
                            model.Field(m => m.DateShamsi).Editable(false);
                            model.Field(m => m.ShippingRouteTitle).Editable(false);
                        })
                        .Model(model => model.Id(o => o.ShippingTransferInfoId))
                        )
                        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                        .Resizable(resize => resize.Columns(true)))
                </div>

@using Kendo.Mvc.UI
@model Areas.HrMadule.ViewModels.ShippingViewModels.ShippingTransferInfoViewModel

@(Html.Kendo().ComboBoxFor(model=>model.ShippingStartVehicleRef)
                          .Name("ShippingStartVehicleRef")
                              .HtmlAttributes(new { style = "width:150px", @id = "ShippingStartVehicleRef" })
              .Placeholder(" select one ...")
                  .DataTextField("DataValueName")
                  .DataValueField("DataValueIdString")
                      .DataSource(source =>
                      {
                          source.Read(read =>
                          {
                              read.Action("DropDown_ShippingVehicle", "ShippingTransferInfo");
                          });
                      })
                          .Filter(FilterType.Contains)

)

How can I do this. Any help will be appriciated.

What I have tried:

I do not know what should I do.