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.