While working on a project I came to an issue in kendo grid i.e to search the Grid records using Date.
Say , I had an accounts list from a bank in which lots of data are displayed including A/C opening date, Last log-in, Last transaction, Last Unsuccessful Log-in and there is a search box that finds the records when the date is given in the search box. But to my dismay it doesn't works for me, after spending a valuable of 1 day of my work , I had got the success.
So here is the image below:
The Code to make your grid work for dates filtration or searching:
In the web page(.html / .cshtml / .jsp etc)
<div id="grid"></div>
Script:
<script type="text/javascript">
$(document).ready(function () {
initGrid();
/// This function is called when you start typing in the search textbox. Here Id of search textbox is #search.
$('#search').keyup(function () {
clearTimeout($.data(this, 'timer'));
var wait = setTimeout(searchDataSource, 500);
$(this).data('timer', wait);
});
});
function searchDataSource() {
var query = $("#search").val();
var $filter = [
{ field: "AccOpenDate", operator: "eq", value: new Date(query) },
{ field: "LastLogin", operator: "eq", value: new Date(query) },
{ field: "LastTrans", operator: "eq", value: new Date(query) },
{ field: "FaliureLogin", operator: "eq", value: new Date(query) }
];
if (query.length > 2) // search only when the no. of character typed is greater than 2
{
grid.data("kendoGrid").dataSource.filter({
logic: "or",
filters: $filter
});
} else if (query.length == 0)
grid.data("kendoGrid").dataSource.filter([]);
}
function initGrid() {
grid = $("#grid").kendoGrid({
dataSource: {
transport: { read: "/Bank/accounts" },
schema: { data: "Data", total: "Total" },
pageSize: 30,
serverPaging: false,
serverFiltering: false,
serverSorting: false
},
height: gridHeight,
change: function () {
var selectedRows = this.select();
selectedElement = this.dataItem(selectedRows[0]);
showActionPane(selectedElement.Name != null && selectedElement.Name != "");
},
selectable: "single",
filterable: true,
sortable: true,
pageable: true,
resizable: true,
columns: [
{ field: "Name", title: "Name", width: 60, template: '<a href="/Account/Details/#=Id#">#=Name#</a>' },
{ field: "Status", title: "Status", width: 50 },
{ field: "AccountType", title: "Account Type", width: 80 },
{ field: "AccOpenDate", title: "A/c Open Date", width: 50, template: '#=(AccOpenDate==null)?"":kendo.toString(kendo.parseDate(AccOpenDate,"0:MM/dd/yyyy"),"MM/dd/yyyy") #', filterable: true, format: "{0:M/d/yyyy}", type: "date" },
{ field: "LastLogin", title: "Last Login", width: 50, template: '#=(LastLogin==null)?"":kendo.toString(kendo.parseDate(LastLogin,"0:MM/dd/yyyy"),"MM/dd/yyyy") #', filterable: false, format: "{0:M/d/yyyy}", type: "date" },
{ field: "LastTrans", title: "Last Transaction", width: 50, template: '#=(LastTrans==null)?"":kendo.toString(kendo.parseDate(LastTrans,"0:MM/dd/yyyy"),"MM/dd/yyyy") #', filterable: false, format: "{0:M/d/yyyy}", type: "date" },
{ field: "FaliureLogin", title: "Unsuccessful Login", width: 50, template: '#=(FaliureLogin==null)?"":kendo.toString(kendo.parseDate(FaliureLogin,"0:MM/dd/yyyy"),"MM/dd/yyyy") #', filterable: false, format: "{0:M/d/yyyy}", type: "date" }
]
});
}
output:
Search records by Date through Search Textbox text: ( here searching the record occurs on all the columns)
Search records by Date through filter Button: ( here searching the record which has opened on 04/04/2013. So two records where as in the above it is searching all the columns having 04/04/2013. so three records.
