How i can create custom filter within a grid when using .Mode(GridFilterMode.Row)

3 posts, 0 answers
  1. Ankit
    Ankit avatar
    2 posts
    Member since:
    Feb 2016

    Posted 15 Mar Link to this post

     

    Here is my code:

     @(Html.Kendo().Grid<TelerikMvcApp1.Models.UserViewModel>()
                    .Name("grid")
                    .Columns(columns =>
                    {

                         columns.Bound(p => p.FirstName)
                        .Filterable(f => f
                            .Operators(operators => operators
                                .ForString(str => str.Clear()
                                    .StartsWith("Starts With")
                                    .EndsWith("Ends With")
                                    .IsEqualTo("Is Equal To")
                                    .IsNotEqualTo("Is Not Equal To")
                                )
                            )
                        )
                        .Title("First Name")
                        .Width(200);

                        columns.Bound(p => p.LastName)
                        .Filterable(f => f
                            .Operators(operators => operators
                                .ForString(str => str.Clear()
                                    .StartsWith("Starts With")
                                    .EndsWith("Ends With")
                                    .IsEqualTo("Is Equal To")
                                    .IsNotEqualTo("Is Not Equal To")
                                )
                            )
                        )
                        .Title("Last Name")
                        .Width(200);

                        columns.Bound(p => p.Email)
                        .Filterable(f => f
                            .Operators(operators => operators
                                .ForString(str => str.Clear()
                                    .StartsWith("Starts With")
                                    .EndsWith("Ends With")
                                    .IsEqualTo("Is Equal To")
                                    .IsNotEqualTo("Is Not Equal To")
                                )
                            )
                        )
                        .Title("Email ID")
                        .Width(200);

                        columns.Bound(p => p.Status)
                        .Title("Status")
                        .Filterable(ftb => ftb
                                .Cell(c => c
                                    .ShowOperators(false)
                                )
                        )
                        .Width(200);


                        columns.Bound(p => p.LastAccess)
                        .Filterable(true)
                        .Title("Last Access")
                        .Format("{0:MM/dd/yyyy}")
                        .Width(200);
                    })
                    .AutoBind(true)
                    .Pageable(pageable => pageable
                       .PageSizes(true)
                    )
                    .Selectable(selectable => selectable
                       .Mode(GridSelectionMode.Multiple)
                       .Type(GridSelectionType.Row)
                    )
                    .Sortable(sortable => sortable
                        .AllowUnsort(true)
                        .SortMode(GridSortMode.SingleColumn))
                    .Scrollable(a => a.Height(100))
                    .Filterable(f => f
                        .Mode(GridFilterMode.Row)
                        .Extra(false)
                    )
                    .Reorderable(reorder => reorder.Columns(true))
                    .Resizable(resize => resize.Columns(true))
                    .HtmlAttributes(new { style = "height:720px;" })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(25)
                        .Read(read => read.Action("Details_Read", "Grid"))
                        )
                )

     

     

     

    In the blocked letter lines is the part where i cannot customize the filter. So, please anyone tell me how to create a custom filter when using .Mode(GridFilterMode.Row) and i have tried using template within the cell(in 'status' column) to create a drop down list, but it is also not working. There are no good examples on this custom filter in MVC razor syntax. In this custom filter i want to keep two options, so please anyone tell me how can i do that!

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 17 Mar Link to this post

    Hello Ankit,

    The columns.filterable.cell.template is an option that allows  to customize how the input for the filter value is rendered. In the context of ASP.NET MVC the code should look like: 

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.OrderID).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false))).Width(225);
            columns.Bound(p => p.ShipName).Width(500).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").Template("customDropDownList")));
            columns.Bound(p => p.Freight).Width(255).Filterable(ftb => ftb.Cell(cell => cell.Operator("gte")));
            columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
        })
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
        .HtmlAttributes(new { style = "height:550px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .ServerOperation(true)
            .Read(read => read.Action("Orders_Read", "Grid"))
         )
    )
     
    <script>
        function customDropDownList(args) {
            args.element.kendoDropDownList({
                dataSource: args.dataSource,
                dataTextField: "ShipName",
                dataValueField: "ShipName",
                valuePrimitive: true
            });
        }
     
    </script>

    This is actually modified version of our Grid / Filter row demo. 

     

     

    Regards,
    Boyan Dimitrov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Ankit
    Ankit avatar
    2 posts
    Member since:
    Feb 2016

    Posted 18 Mar in reply to Boyan Dimitrov Link to this post

    Thanks for your help.
Back to Top