Add dropdown as filter kendoUI grid

[Yanesh]

Hi All, 

       How we add dropdownlist as filter in kendo grid and how its populate from enum? Below i providing my code

 

 @(Html.Kendo()
                            .Grid<Portals.Areas.Reports.Models.TransactionReportItem>()
                            .Name("transactionGrid")
                            .HtmlAttributes(new { @class = "grid-primary" })
                            .DataSource(dataSource => dataSource
                                .Ajax()
                                .PageSize(100)
                                .Read(read => read.Action("GetTransactions", "Transactions")))
                            .Pageable(pageable => pageable
                                .Enabled(true)
                                .PageSizes(new[] { 100, 500 })
                                .Refresh(false)
                                .ButtonCount(5))
                            .Columns(columns =>
                            {
                               
                                columns.Bound(row => row.TransactionID);

                                //Order ID Column
                                columns.Bound(row => row.OrderID);

                                //TxnAmount Column
                                columns.Bound(row => row.TransactionAmount).Format("{0:n2}").HeaderHtmlAttributes(new { @class = "text-align-reverse" }).HtmlAttributes(new { @class = "text-align-reverse" });

                                //Txn date column
                                columns.Bound(row => row.TransactionDate).Format("{0:" + userPreference.PreferredDateDisplayFormat + "}").HeaderHtmlAttributes(new { @class = "text-align-reverse" }).HtmlAttributes(new { @class = "text-align-reverse" });

                                //ViewDetail column
                                columns.Bound(row => row.TransactionID).Title("").Filterable(f => f.Enabled(false))
                                .ClientTemplate(@"
                                    <button id='#= TransactionID #' data-btn-viewDetail='#= TransactionID #' class='btn btn-neutral btn-sm'>
                                        View Detail
                                    </button>
                                ");
                            })
                            .Sortable()
                            .Filterable(ftb => ftb.Enabled(true))
                            .ToolBar(tools => tools.Pdf())
                            .ToolBar(tools => tools.Excel())
                            .Pdf(pdf => pdf
                                .AllPages()
                                .PaperSize("A4")
                                .Scale(0.8)
                                .RepeatHeaders()
                                .AvoidLinks()
                                .Landscape()
                                .Title("Title")
                                .TemplateId("page-template")
                                .Margin("2cm", "1cm", "1cm", "1cm")
                                .FileName(string.Format("PayCommerce_Merchant_Transaction_Report_{0}.pdf", DateTime.UtcNow.ToString("yyyymmdd_hhmmss")))
                                .ForceProxy(true)
                                .ProxyURL(Url.Action("Pdf_Export_Save", "Transactions"))
                            )
                            .Excel(excel => excel
                                .AllPages(true)
                                .FileName(string.Format("PayCommerce_Merchant_Transaction_Report_{0}.xlsx", DateTime.UtcNow.ToString("yyyymmdd_hhmmss")))
                                .ForceProxy(true)
                                .ProxyURL(Url.Action("Pdf_Export_Save", "Transactions"))
                            )

                            )

 

 

[Tsvetina]

Hi Yanesh,

You can follow this example, which shows how to display a MultiSelect as a Grid filter:
Use MultiSelect as Filter in Grids

The DropDownList implementation would be even simpler because you won't need to build a multiple values filter expression.

Regards,
Tsvetina
Telerik by Progress

[Yanesh]

Hi

 I checked your application grid-multiselect-filter . I am using visual studio 2010. But grid-multiselect-filter developed in higher than this version. I am facing compatibility issue   when i open this application. How i solve this issue?

 

[Tsvetina]

Hi Yanesh,

We don't have a VS 2010 version of the project but you can see the main logic of the sample in the Views/Home/Index.cshtml file:

columns.Bound(e => e.Tags).Filterable(filterable => filterable.Extra(false)
        .Messages(m=> m.Info("Show items with value that contains"))
        .UI("multiselectFilter")
    ))

and the JS implementation: multiSelectFilter

To run the project, you can try creating a new Kendo UI ASP.NET MVC application in Visual Studio and copy the Controllers, Models and Views folders from the sample into the new app.

Regards,
Tsvetina
Telerik by Progress