Add dropdown as filter kendoUI grid

4 posts, 0 answers
  1. Yanesh
    Yanesh avatar
    15 posts
    Member since:
    Aug 2016

    Posted 23 Mar Link to this post

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

                                )

     

     

  2. Tsvetina
    Admin
    Tsvetina avatar
    2102 posts

    Posted 24 Mar Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Yanesh
    Yanesh avatar
    15 posts
    Member since:
    Aug 2016

    Posted 27 Mar Link to this post

    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?

     

  4. Tsvetina
    Admin
    Tsvetina avatar
    2102 posts

    Posted 29 Mar Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top