[英]Kendo Grid Filtering on integer column
I have a grid with multiple columns. 我有一个多列网格。 say
Id(integer)
, Name(string)
etc. Change event is working fine for name column.But for ID column it is not working(change event is not firing for numeric column in kendo). 例如说
Id(integer)
, Name(string)
等。更改事件在name列中正常工作。但是对于ID列,则不起作用(在kendo中,针对数字列不触发change事件)。
I have done in client side scripting. 我已经完成了客户端脚本编写。 But I want this functionality to be in server side(Razor).
但我希望此功能在服务器端(剃刀)中。
I am new to Kendo UI and any help on how to do this would be much appreciated. 我是Kendo UI的新手,因此非常感谢您提供有关此操作的帮助。
I am attaching my code below: 我在下面附上我的代码:
@(Html.Kendo().Grid(Model).Name("ViewDataGrid")
.Columns(columns =>
{
columns.Bound(c => c.Id).Title(" ID").Width(150);
columns.Bound(c => c.Name).Title(" Name").Width(150);
})
.HtmlAttributes(new { style = "height: auto; width: 2200px" })
.Filterable(i => i.Mode(GridFilterMode.Menu | GridFilterMode.Row))
.Sortable(s => s.AllowUnsort(false).SortMode(GridSortMode.MultipleColumn))
.Selectable(selecting => selecting.Enabled(true))
.Pageable(r => r.PreviousNext(true).PageSizes(new int[] { 10, 20, 30, 40, 50, 100 }))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(false)
.Events(e => e.Change("call"))
))
function call(e) {
debugger;
var filterlength = e.sender.filter.arguments[0].filters.length;
var ds = $("#ViewDataGrid").data("kendoGrid");
$filter = new Array();
for (var i = 0; i < filterlength; i++) {
if (e.sender.filter.arguments[0].filters[i].field == "Id")
$filter.push({ field: e.sender.filter.arguments[0].filters[0].field, operator: "eq", value: parseInt(e.sender.filter.arguments[0].filters[0].value) });
else
$filter.push({ field: e.sender.filter.arguments[0].filters[0].field, operator: "contains", value: e.sender.filter.arguments[0].filters[0].value });
}
$("#ViewDataGrid").data("kendoGrid").dataSource._filter = $filter;
$("#ViewDataGrid").data("kendoGrid").dataSource.sync();
}
Model.CS 型号
public int Id { get; set; }
public string Name { get; set; }
Controller 控制者
public ActionResult Index()
{
List<GridData> dataList = new List<GridData>();
GridData data1 = new GridData();
data1.Id = 9191919;
data1.Name = "XYZ";
dataList.Add(data1);
return View(dataList);
}
After Editing: Change Event is not firing. 编辑后:更改事件未触发。 Could you please help me to resolve my issue.
您能帮我解决我的问题吗?
@(Html.Kendo().Grid(Model)
.Name("ViewDataGrid")
.ToolBar(toolBar =>
{
toolBar.Template(
@<Text>
<input type="search" id="searchBox" class="SearchRight SearchTopMargin" />
<b class="FloatRight SearchTopMarginExtra">Search the grid: </b>
</Text>);
})
.HtmlAttributes(new { style = "height: auto; width: 2200px" }) .Filterable(i => i.Mode(GridFilterMode.Menu | GridFilterMode.Row)) .HtmlAttributes(new {style =“ height:auto; width:2200px”}).Filterable(i => i.Mode(GridFilterMode.Menu | GridFilterMode.Row))
.Sortable(s => s.AllowUnsort(false).SortMode(GridSortMode.MultipleColumn))
.Selectable(selecting => selecting.Enabled(true))
.Events(e => e.Change("call"))
.Pageable(r => r.PreviousNext(true).PageSizes(new int[] { 10, 20, 30, 40, 50, 100 }))
.DataSource(dataSource => dataSource
.Custom()
.Type("aspnetmvc-ajax")
.PageSize(20)
.ServerPaging(false)
.ServerSorting(false)
.ServerFiltering(false)
.Transport(transport => transport
.Read(read => read.Action("Read", "Index"))
)
.Schema(schema => schema
.Data("Data")
.Total("Total")
.Errors("Errors")
.Model(model =>
{
model.Id("Id");
model.Field("Id", typeof(int));
model.Field("Name", typeof(string));
})
)
)
) )
Hi I might have a solution, please let me know if this works for you: 嗨,我可能有解决方案,请告诉我这是否适合您:
RAZOR 剃刀
@(Html.Kendo().Grid(Model).Name("ViewDataGrid")
.Columns(columns =>
{
columns.Bound(c => c.Id).Title(" ID").Width(150);
columns.Bound(c => c.Name).Title(" Name").Width(150);
})
.HtmlAttributes(new { style = "height:550px;" })
.Filterable(i => i.Mode(GridFilterMode.Menu | GridFilterMode.Row))
.Sortable(s => s.AllowUnsort(false).SortMode(GridSortMode.MultipleColumn))
.Selectable(selecting => selecting.Enabled(true))
.Pageable(r => r.PreviousNext(true).PageSizes(new int[] { 10, 20, 30, 40, 50, 100 }))
.Events(events => events.DataBound("call")) // try to bound the event
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerPaging(false)
.ServerSorting(false)
.ServerFiltering(false)
.Read(read => read.Action("Read", "Index"))
)
)
JAVASCRIPT JAVASCRIPT
<script>
function call(e) {
//debugger;
//console.log(e) //Log e and look through the object data.
var filterlength = e.sender.filter.arguments[0].filters.length;
var ds = $("#ViewDataGrid").data("kendoGrid");
$filter = new Array();
for (var i = 0; i < filterlength; i++) {
if (e.sender.filter.arguments[0].filters[i].field == "Id")
$filter.push({ field: e.sender.filter.arguments[0].filters[0].field, operator: "eq", value: parseInt(e.sender.filter.arguments[0].filters[0].value) });
else
$filter.push({ field: e.sender.filter.arguments[0].filters[0].field, operator: "contains", value: e.sender.filter.arguments[0].filters[0].value });
}
$("#ViewDataGrid").data("kendoGrid").dataSource._filter = $filter;
$("#ViewDataGrid").data("kendoGrid").dataSource.sync();
}
</script>
If this doesn't work then there might be work some sort of work around. 如果这不起作用,则可能有某种解决方法。 Maybe trying with your initial implementation: Try to parse or use the ID column "c.Id" as string and handle it the same way as the Name field "c.Name", something like:
也许尝试使用您的初始实现:尝试解析或使用ID列“ c.Id”作为字符串,并以与“名称”字段“ c.Name”相同的方式处理它,例如:
e.sender.filter.arguments[0].filters[0].value.toString()
This might not be the best work around but if you have already tried this I am sure there must be another way. 这可能不是最好的解决方法,但是如果您已经尝试过此方法,那么我相信必须有另一种方法。 You might find this API reference also useful:
您可能会发现此API参考也很有用:
Kendo.Mvc.UI.Fluent GridBuilder aspnet-mvc Kendo.Mvc.UI.Fluent GridBuilder aspnet-mvc
I will still look into this on my side try replicating the issue and if I do happen to find anything I will update my post/answer immediately. 我仍然会一边研究此问题,一边尝试复制问题,如果确实发现任何问题,我会立即更新我的帖子/答案。
Good luck. 祝好运。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.