Hi
I would like to load data as soon as a user typed 3 characters of the name. After loading i would like to filter client side if the user enters more characters
I have the following code:
<
input
type
=
"text"
id
=
"txtFilter"
onkeyup
=
"fFilterChanged()"
/>
@(Html.Kendo().Grid<
MvcApplication.Models.Customers
>()
.Name("gridCustomers")
.DataSource(dataSource => dataSource // Configure the grid data source
.Ajax() // Specify that ajax binding is used
.Read(read => read.Action("Customers_Read", "Home").Data("additionalInfo")) // Set the action method which will return the data in JSON format
.ServerOperation(false)
.PageSize(13)
)
.AutoBind(false)
.Columns(columns =>
{
// Create a column bound to the CustomerCode property
columns.Bound(customer => customer.CustomerCode);
// Create a column bound to the CustomerName property
columns.Bound(customer => customer.CustomerName);
})
.Pageable() // Enable paging
.Sortable() // Enable sorting
.Selectable(n => n.Mode(GridSelectionMode.Single))
)
<
script
type
=
"text/javascript"
>
function fFilterChanged() {
if (txtFilter.value.length == 3)
loadGrid();
}
function additionalInfo() {
return {
customerFilter: txtFilter.value
}
}
function loadGrid() {
var gridDataSource = $("#gridCustomers").data("kendoGrid").dataSource;
gridDataSource.read();
}
This works great so far. Now I would like to filter client side:
if (txtFilter.value.length > 3) {
gridListFilter.logic = "and"; // a different logic 'or' can be selected
gridListFilter.filters.push({ field: "CustomerName", operator: "startswith", value: txtFilter.value });
gridDataSource.filter(gridListFilter);
gridDataSource.read();
filterOn = true;
}
and
if (txtFilter.value.length <= 3) {
gridDataSource.filter([]);
gridDataSource.read();
filterOn = false;
}
now since it seams I have to call the read() method while filtering I automaticly get a new Ajax roundtrip - the Read() method of the grid is called on the Server again.
How can I ensure I only get the data once and then filter client side?
Thanks.