Apply custom filter in data Source

2 posts, 0 answers
  1. Yanesh
    Yanesh avatar
    13 posts
    Member since:
    Aug 2016

    Posted 07 Apr Link to this post

    In my kendo grid i loading data
    .Grid<Portals.Areas.Reports.Models.TransactionReportItem>()  like this. But again i provided in DataSource
     .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .PageSize(100)
                                    .Read(read =>                                  read.Action"GetTransactions","Transactions")))
    My problem is when i provided some external filter, because  of datasource its displaying all data instead of filter data. 
    my question is how we can apply external filter  condition in data source or is it possible to stop calling datasource?
    Below i giving entire code of grid

     

     

              @(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 =>
                                {
                                    //Txn Status Column
                                    columns.Bound(row => row.TransactionStatus)
                                        .ClientTemplate(@"
                                            #if(TransactionStatus == 'Void'){#
                                                <span class='icon-status-box'>
                                                 <span class='icon icon-status-void'></span>
                                                 <span class='status-void'>#: TransactionStatus #</span>
                                                 </span>
                                            #}else if(TransactionStatus == 'Declined'){#
                                                <span class='icon-status-box'>
                                                 <span class='icon icon-status-declined'></span>
                                                 <span class='status-declined'>#: TransactionStatus #</span>
                                                 </span>
                                            #}else if(TransactionStatus == 'Chargeback'){#
                                                <span class='icon-status-box'>
                                                 <span class='icon icon-status-chargeback'></span>
                                                 <span class='status-chargeback'>#: TransactionStatus #</span>
                                                 </span>
                                            #}else if(TransactionStatus == 'Authorized'){#
                                                <span class='icon-status-box'>
                                                 <span class='icon icon-status-authorised'></span>
                                                 <span class='status-authorised'>#: TransactionStatus #</span>
                                                 </span>
                                            #}else{#
                                                <span class='icon-status-box'>
                                                 <span class='icon icon-status-default'></span>
                                                 <span class='status-default'>Pending</span>
                                                 </span>
                                            #}#
                                        ");
                                    //Txn ID Column
                                    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("ABC Merchaant Transaction Report")
                                    .TemplateId("page-template")
                                    .Margin("2cm", "1cm", "1cm", "1cm")
                                    .FileName(string.Format("ABC_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("ABC_Merchant_Transaction_Report_{0}.xlsx", DateTime.UtcNow.ToString("yyyymmdd_hhmmss")))
                                    .ForceProxy(true)
                                    .ProxyURL(Url.Action("Pdf_Export_Save", "Transactions"))
                                )

                                )

  2. Dragomir
    Admin
    Dragomir avatar
    4 posts

    Posted 10 Apr Link to this post

    Hi Yanesh,

    Adding external filtering works as follows:
    1. grid is bind to data source.
    2. the data is filtered by appling filters in the data source

    This is why you can achieve external filtering by using Kendo jQuery API for datasource.
    You can do it by adding some additional lines of JavaScript right after the grid initialization.

    Here is an example code that adds initial filter for the Grid:

    <script>
        $(document).ready(function () {
            var grid = $("#transactionGrid").data("kendoGrid");
            var dataSource = grid.dataSource;
     
            dataSource.filter({ field: "OrderID", operator: "gt", value: 5 });
        });
    </script>

    The code above filters by default all data where OrderID is greater than 5.

    You can see our docs to see more details about DataSoruce filtering. Here you can find list of operators

    You can also check our demo for filtering in the grid's toolbar.

    Regards,
    Dragomir
    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