Search code examples
javascriptkendo-uikendo-gridkendo-asp.net-mvc

How to filter the Kendo Grid data


I am using kendo grid in my view . How can i filter my data in the grid. my grid get data from a list in my model .

@(Html.Kendo().Grid(Model.list)
    .Name("listgrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Name).Title("Name");
        columns.Bound(p => p.status).Title("status");
    })
    .Sortable()
    .Resizable(resize => resize.Columns(true))
    .DataSource(dataSource => dataSource)
)

No i want to filter my grid on basis of the field Name . I tried

var datasource = new kendo.data.DataSource({
    data: [{name: "sasdas"}],
    filter: {
        logic: "or",
        filters:[
            { field: "Name", operator: "eq", value: "null" },
            { field: "Name", operator: "eq", value: "" }
        ]
    }
});

what i am doing wrong here .


Solution

  • scenario 1: If you want separate rows for filters

      @(Html.Kendo().Grid(Model.list)
            .Name("listgrid")
            .Columns(columns =>
            {
                columns.Bound(p => p.Name).Title("Name").Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)));
                columns.Bound(p => p.status).Title("status").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
            })
            .Sortable()
            .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
            .Resizable(resize => resize.Columns(true))
            .DataSource(dataSource => dataSource)
        )
    

    scenario 2:Filter Menu Customization :

    @(Html.Kendo().Grid(Model.list)
            .Name("listgrid")
            .Columns(columns =>
            {
                columns.Bound(p => p.Name).Title("Name");
                columns.Bound(p => p.status).Title("status");
            })
            .Sortable()
            .Filterable(filterable => filterable
            .Extra(false)
            .Operators(operators => operators
                .ForString(str => str.Clear()
                    .StartsWith("Starts with")
                    .IsEqualTo("Is equal to")
                    .IsNotEqualTo("Is not equal to")
                ))
            )   
            .Resizable(resize => resize.Columns(true))
            .DataSource(dataSource => dataSource)
        )