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

        })

    )
)

)

Answer 1

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.