| title | page_title | description | slug | position |
|---|---|---|---|---|
Filtering |
Filtering - DataSource - Kendo UI for Vue |
Filter data locally or on the server and handle the filtered data when working with the Kendo UI DataSource wrapper for Vue. |
filtering_datasource |
3 |
The DataSource accepts a list of one or more filter expressions.
You can combine them by using the and or or logical operators. For more information on the filter expression structure, refer to the documentation on the filter configuration option.
Local filtering is convenient for small datasets.
The following example demonstrates how to match the dataItem to the filtering criteria and log it in the console.
{% meta height:350 %} {% embed_file datasource/filtering/local/main.vue %} {% embed_file datasource/filtering/local/main.js %} {% endmeta %}
Server filtering is convenient for large datasets. To apply server filtering of data, set the schema and the filter properties.
The following example demonstrates how to filter data on the server and handle the filtered data which is logged in the console after filtering is applied. Note that the data which is returned by the transport is evaluated in the same way.
<datasource :filter="filterConfiguration"
:schema-data="'result'"
:server-filtering="true"
:transport-read-url="{remote service}">
</datasource>
// The JSON result from "{remote service}"
{
result: [
{ name: "Tea", category: "Beverages" },
{ name: "Coffee", category: "Beverages" },
{ name: "Ham", category: "Food" }
]
}