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

Apply custom filter in data Source

1 Answer 646 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Yanesh
Top achievements
Rank 1
Yanesh asked on 07 Apr 2017, 05:21 AM

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

                            )

1 Answer, 1 is accepted

Sort by
0
Dragomir
Telerik team
answered on 10 Apr 2017, 12:32 PM
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.
Tags
Grid
Asked by
Yanesh
Top achievements
Rank 1
Answers by
Dragomir
Telerik team
Share this question
or