This is a migrated thread and some comments may be shown as answers.

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

2 Answers 427 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Ankit
Top achievements
Rank 1
Ankit asked on 15 Mar 2016, 07:31 AM

 

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 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 17 Mar 2016, 02:55 PM

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
0
Ankit
Top achievements
Rank 1
answered on 18 Mar 2016, 06:20 AM
Thanks for your help.
Tags
DropDownList
Asked by
Ankit
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Ankit
Top achievements
Rank 1
Share this question
or