Kendo UI for jQuery latest trial downloads
Kendo UI latest offer Kendo UI for jQuery, Kendo UI for Angular, Kendo UI Support for React and Kendo UI Support for Vue four controls. Kendo UI for jQuery is to create a modern Web applications most complete UI library.
Kendo UI Filter widget is a unified control, data binding component having a filter for a data source.
Kendo UI for jQuery using the filter, you can store its filter expression and for the user to restore its status.
Restore load state
For example, you can store filter expression, and the filter can apply it in the next time the user access the page.
The following example demonstrates how to use the event to automatically apply filters and change to date of Filter. After reloading the page, it will be provided to store settings and apply the filter configuration.
<ol><li>Change the filter.</li><li>Reload the page: <button type="button" onclick="reloadPage();">Reload</button></li><li>The widget will be initialized with the settings that were stored.</li><li>Clear the stored information to start fresh: <button onclick="clearData();">Clear</button></li></ol><div id="filter"></div><ul id="listView"></ul>
<script type="text/x-kendo-template" id="item">
<li>
<strong>#= name #</strong>, aged #= age #, is on vacation: #= isOnLeave #
</li>
</script>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
data: [
{ name: "Jane Doe", age: "25", isOnLeave: false },
{ name: "John Doe", age: "33", isOnLeave: true },
{ name: "John Smith", age: "37", isOnLeave: true },
{ name: "Nathan Doe", age: 42, isOnLeave: false }
],
schema: {
model: {
fields: {
name: { type: "string" },
age: { type: "number" },
isOnLeave: { type: "boolean" }
}
}
}
});
$ ( "# Filter"). KendoFilter ({
dataSource: dataSource,
change: applyAndStoreFilterExpression,
expressionPreview: true,
fields: [
{ name: "name", type: "string", label: "Name" },
{ name: "age", type: "number", label: "Age" },
{ name: "isOnLeave", type: "boolean", label: "On Vacation" }
],
expression: getInitialExpression ()
}).data("kendoFilter");
if (getInitialExpression()) { // Apply filter if there was a stored expression.
$("#filter").data("kendoFilter").applyFilter();
}
$("#listView").kendoListView({
dataSource: dataSource,
template: kendo.template($("#item").html())
});
});
function applyAndStoreFilterExpression(e) {
e.sender.applyFilter(); // Apply filtering on every change.
localStorage["myInitialFilterExpression"] = JSON.stringify(e.expression); // Store the filter expression for future use.
}
getInitialExpression function () {
if (localStorage["myInitialFilterExpression"]) {
return JSON.parse(localStorage["myInitialFilterExpression"]);
}
}
function reloadPage() {
window.location.reload();
}
function clearData() {
delete localStorage["myInitialFilterExpression"];
reloadPage();
}
</script>
Demand Load Settings
You can also save and load a previously state-specific filters in the application logic when an event occurs.
The following example shows how to get the current filter expressions and any other settings, and apply them when needed.
<ol><li>Change the state of the filter.</li><li>Save the state <button onclick="saveState();">Save</button></li><li>Change the state of the filter again.</li><li>Load the state: <button onclick="loadState();">Load</button></li><li>Clear the state: <button onclick="clearState();">Clear</button></li></ol>
<div id="filter"></div>
<div id="chart"></div>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
data: [
{ price: 25, year: 2017 },
{ price: 29, year: 2018 },
{ price: 33, year: 2019 }
],
schema: {
model: {
fields: {
price: { type: "number" },
year: { type: "number" }
}
}
}
});
$ ( "# Filter"). KendoFilter ({
dataSource: dataSource,
expressionPreview: true,
applyButton: true,
fields: [
{ name: "price", type: "number", label: "Cost" },
{ name: "year", type: "number", label: "Year" }
]
}).data("kendoFilter");
$("#chart").kendoChart({
dataSource: dataSource,
series: [
{ field: "price" }
],
categoryAxis: {
field: "year"
}
});
});
function saveState(e) {
localStorage["myFilterSettings"] = JSON.stringify(getFilter().getOptions().expression);
// You can store and restore all options not just the expression.
}
function loadState() {
if (localStorage["myFilterSettings"]) {
was getFilter filter = ();
var opts = filter.getOptions ();
opts.expression = JSON.parse(localStorage["myFilterSettings"]);
filter.setOptions(opts);
// If you will restore all options, you need only filter.setOptions(myOptionsLiteral).
filter.applyFilter(); // Apply the new filter expression.
}
}
function clearState() {
delete localStorage["myFilterSettings"];
}
function getFilter() {
return $("#filter").data("kendoFilter");
}
</script>
For the latest Kendo UI latest news, follow Telerik Chinese net!
Scan attention Hui poly IT micro-channel public number, timely access to the latest developments and the latest information
