首页 文章

整数列上的Kendo Grid Filtering

提问于
浏览
0

我有一个包含多列的网格 . 说 Id(integer)Name(string) 等 . 更改事件对于名称列工作正常 . 但对于ID列,它不起作用(更改事件不会在kendo中为数字列触发) .

我已经完成了客户端脚本编写 . 但我希望这个功能在服务器端(Razor) .

我是Kendo UI的新手,对于如何做到这一点的任何帮助将非常感激 .

我在下面附上我的代码:

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

调节器

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

编辑后:更改事件未触发 . 你能帮我解决一下我的问题吗?

@(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))

.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));

        })

    )
)

1 回答

  • 0

    嗨,我可能有解决方案,请告诉我这是否适合您:

    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

    <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>
    

    如果这不起作用那么可能会有一些工作 . 也许尝试初始实现:尝试解析或使用ID列“c.Id”作为字符串,并以与名称字段“c.Name”相同的方式处理它,类似于:

    e.sender.filter.arguments[0].filters[0].value.toString()
    

    这可能不是最好的工作,但如果你已经尝试过这个,我相信必须有另一种方法 . 您可能会发现此API参考也很有用:

    Kendo.Mvc.UI.Fluent GridBuilder aspnet-mvc

    我仍然会在我身边试着复制这个问题,如果我碰巧找到了什么,我会立即更新我的帖子/答案 .

    祝好运 .

相关问题