Store the Component State in Local Storage by Using Generic Functions
Environment
| Product | Progress® Kendo UI® for jQuery |
| Preferred Language | JavaScript |
Description
The solution shows how to save and restore Kendo UI widgets' state, value and options using generic method and utilizing the local storage of the browser.
Code is provided by OF360.
Solution
The functionality relies on the following concepts:
- The
editevent handler of the Grid provides a reference to the DOM element of the edit container. - The Kendo UI widgets have a
data-roleHTML attribute rendered for the DOM element. This attribute holds the widget object.
For brevity, the following demo does not include the configuration for the Data Source transport. However, for the CRUD operations to work properly, they require a transport configuration.
'use strict';
jQuery.fn.kendoGridStoreUserOptions = function (name, options) {
if (typeof (name) === 'object' && options === undefined) {
options = name;
name = null;
}
name = name || document.location.hash;
let grid = this.data('kendoGrid');
if (!grid) return;
options = options || {};
adaptTemplates();
load();
grid.bind('dataBound', save);
grid.bind('columnResize', save);
grid.bind('columnShow', save);
grid.bind('columnHide', save);
grid.bind('columnReorder', save);
grid.bind('columnLock', save);
grid.bind('columnUnloc', save);
return this;
//---
function adaptTemplates() {
// Adaptation des templates définis sous forme de fonctions
for (let gridColumn of grid.columns) {
if (gridColumn
&& typeof gridColumn.template === 'function'
&& gridColumn.template.name !== 'anonymous') {
try {
gridColumn.template = gridColumn.template();
}
catch (templateException) {
gridColumn.template = templateException.toString();
}
}
}
}
function load() {
if (!localStorage[name]) return;
try {
let storage = JSON.parse(localStorage[name]);
if (!storage) return;
if (storage.gridOptions) {
for (let index in grid.columns) {
if (storage.gridOptions.columns[index].field !== grid.columns[index].field) continue;
storage.gridOptions.columns[index].template = grid.columns[index].template;
}
grid.setOptions(storage.gridOptions);
}
if (storage.searchValue) {
var input = $(".k-grid-search input")[0];
input.value = storage.searchValue;
}
}
catch (e) {
console.error(e);
// On ne fait rien, c'est une sécurité en cas de changement
// de format, si les données en storage ne sont plus compatibles.
}
}
function save() {
try {
let gridOptions = grid.getOptions();
delete gridOptions.toolbar;
gridOptions.columns.forEach(c => delete c.template);
let storage = {
gridOptions: gridOptions,
searchValue: $(".k-grid-search input").val()
};
localStorage[name] = JSON.stringify(storage);
}
catch (e) {
console.error(e);
// On ne fait rien, c'est une sécurité en cas de changement
// de format, si les données en storage ne sont plus compatibles.
}
}
}
//Dropdown Widget
jQuery.fn.kendoDropDownListStoreUserOptions = function (name, options) {
let self = this;
if (typeof (name) === 'object' && options === undefined) {
options = name;
name = null;
}
name = document.location.hash + '-' + (name || this.attr('id'));
options = options || {};
var dropdownlist = $(self).data("kendoDropDownList");
load();
self.on('change', save);
return self;
//---
function load() {
if (!localStorage[name]) return;
try {
let storage = localStorage[name];
dropdownlist.value(storage);
}
catch (e) {
console.error(e);
// On ne fait rien, c'est une sécurité en cas de changement
// de format, si les données en storage ne sont plus compatibles.
}
}
function save() {
try {
let storage = dropdownlist.value();
localStorage[name] = storage;
}
catch (e) {
console.error(e);
// On ne fait rien, c'est une sécurité en cas de changement
// de format, si les données en storage ne sont plus compatibles.
}
}
}
//Combobox Widget
jQuery.fn.kendoComboboxStoreUserOptions = function (name, options) {
let self = this;
if (typeof (name) === 'object' && options === undefined) {
options = name;
name = null;
}
name = document.location.hash + '-' + (name || this.attr('id'));
options = options || {};
var combobox = $(self).data("kendoComboBox");
load();
self.on('change', save);
return self;
//---
function load() {
if (!localStorage[name]) return;
try {
let storage = localStorage[name];
combobox.value(storage);
}
catch (e) {
console.error(e);
// On ne fait rien, c'est une sécurité en cas de changement
// de format, si les données en storage ne sont plus compatibles.
}
}
function save() {
try {
let storage = combobox.value();
localStorage[name] = storage;
}
catch (e) {
console.error(e);
// On ne fait rien, c'est une sécurité en cas de changement
// de format, si les données en storage ne sont plus compatibles.
}
}
}
//Multiselect Widget
jQuery.fn.kendoMultiSelectStoreUserOptions = function (name, options) {
let self = this;
if (typeof (name) === 'object' && options === undefined) {
options = name;
name = null;
}
name = document.location.hash + '-' + (name || this.attr('id'));
options = options || {};
var kendoMultiSelect = $(self).data("kendoMultiSelect");
load();
self.on('change', save);
return self;
//---
function load() {
if (!localStorage[name]) return;
try {
let storage = localStorage[name];
kendoMultiSelect.value(storage);
}
catch (e) {
console.error(e);
// On ne fait rien, c'est une sécurité en cas de changement
// de format, si les données en storage ne sont plus compatibles.
}
}
function save() {
try {
let storage = kendoMultiSelect.value();
localStorage[name] = storage;
}
catch (e) {
console.error(e);
// On ne fait rien, c'est une sécurité en cas de changement
// de format, si les données en storage ne sont plus compatibles.
}
}
}
Example:
$("#dropdownlistDay").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: datadropdownDay,
change: CombodateFilter
}).kendoDropDownListStoreUserOptions();