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 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'){#


#: TransactionStatus #

#}else if(TransactionStatus == 'Declined'){#


#: TransactionStatus #

#}else if(TransactionStatus == 'Chargeback'){#


#: TransactionStatus #

#}else if(TransactionStatus == 'Authorized'){#


#: TransactionStatus #

#}else{#


Pending

#}#
");
//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

answered on 10 Apr 2017, 12:32 PM

Hi Yanesh,

Adding external filtering works as follows:

grid is bind to data source.
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.