Kendo Grid Filtering on integer column

Question

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

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.

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

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

        })

    )
)

)

We are just passing the static data from the controller.Please find controller code also. — Kasi Naidu
Okay this might be a long shot but this ended up doing it for me, instead of passing the dataSource directly I ended up also specifying the "schema" in the dataSource's configuration. I followed telerik's custom dataSource API reference: docs.telerik.com/kendo-ui/aspnet-mvc/custom-datasource. Hope it helps — Erick Boshoff
If I did like this Kendo Grid change event is not firing . Please help me. — Kasi Naidu

Erick Boshoff Erick Boshoff · Accepted Answer · 2016-08-24T06:38:40

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

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

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:

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.

Kendo Grid Filtering on integer column

1 Answers