How to filter the Kendo Grid data

Question

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 .

that was a typo here .. it does not apply filter on it after that .. — Haroon nasir
You're defining the datasource as .DataSource(dataSource => dataSource) but creating a new one with different data. Can't get what you want to achieve here. — DontVoteMeDown
Why aren't you using the DataSource's Filter method within Razor? — Carsten Franke
Adding to Carsten's comment - I would highly recommend an AJAX approach. See here. Create a controller Read method to populate the grid with a DataSourceRequest to handle the paging, sorting, grouping, and column filtering. The Read method can be parameterized to deal with custom filtering. — Steve Greene

siri siri · Accepted Answer · 2019-01-25T22:23:33

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

How to filter the Kendo Grid data

1 Answers