TreeView is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps
a suite of UI Components for development of web apps
Advanced User Interface Controls and Components
Created: 01 April 2014
With HTML5 you can store information specific to your web application within the user’s browser. In the past this was done using cookies, however the new approach introduced with HTML5 is faster and more secure. In following sections we will explain how to use this feature to save the state of TreeView jQuery widget.
In HTML5 the data can be stored locally using name/value pairs. Only a web page which has stored this data can access it. The storage limit is set to a maximum 5MB, which is plenty for simple web applications.
To show you how to save the state of TreeView widget, at first let’s populate the TreeView with some data. We are using built-on methods to add/remove items to the TreeView. In our example we are using four buttons which when clicked modify the data in TreeView.
$('#add-root').click(function(e){
e.preventDefault();
itemCount = $tree.treeview("getCurrentList").length + 1;
$tree.treeview("addItem", { text: "Item" + itemCount, id: "0" + itemCount });
});
$('#add-child').click(function(e){
e.preventDefault();
// We are using the current item count and its level to create a unique id for each item
itemCount = $tree.treeview("getCurrentList").length + 1;
var selItem = $tree.treeview("option", "selectedItem");
var level = $tree.treeview("getItemLevel", selItem) + 1;
$tree.treeview("addItem", { text: "Item" + itemCount, id: level.toString() + itemCount }, selItem);
});
$('#remove').click(function(e){
e.preventDefault();
$tree.treeview("removeItem", $tree.treeview("option", "selectedItem"));
});
$('#clear').click(function(e){
e.preventDefault();
$tree.treeview("clearItems");
itemCount = 0;
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link rel="stylesheet" href="css/integralui.treeview.css" />
<link rel="stylesheet" href="css/themes/theme-blue.css" />
<script type="text/javascript" src="external/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="external/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="external/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery.integralui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery.integralui.treeview.min.js"></script>
</head>
<body>
<div id="treeview" class="widget"></div>
</body>
</html>
<style type="text/css">
.widget
{
width: 300px;
height: 300px;
}
</style>
Whenever an item is added or removed the state of TreeView will be saved. For this to work we need to handle the itemadded, itemremoved and clear events, where we add a code which saves the TreeView data.
// Whenever TreeView data is changed, we save it to a local storage
$tree.on({
"itemadded": function(e){
saveTreeView();
},
"itemremoved": function(e){
saveTreeView();
},
"clear": function(e){
saveTreeView();
}
});
Because HTML5 data storage only stores string values, we can’t store a list of items in that way. The solutions is to use the JSON stringify method which converts the item list to a string in JSON format. For this demonstration we have set the name of our local data to ‘treeData’, but you can choose any name you want.
Related: Data Binding in TreeView jQuery
The data is saved to a local storage using the setItem method, and setting a name for the local data and its value:
var saveTreeView = function(){
if (localStorage){
// Retrieve the list of items from the TreeView
var itemList = $tree.treeview("getList");
// Use JSON stringify method to save the item list as array
localStorage.setItem("treeData", JSON.stringify(itemList));
}
}
Now when we have some data present in local storage, we can reload the web page and test whether the data is preserved. If data is present in the local storage, the TreeView will be populate with it. If there is no data, the TreeView will remain empty.
In code below we are using the JSON parse method to extract the data from the local storage, because data is stored as an array. To retrieve the stored data, we are using the getItem method and the name under which data is saved, in our case data is saved as ‘treeData’.
// If there is local data present, populate the TreeView with it
if (localStorage){
// Suspend the TreeView layout to increase performance
$tree.treeview("suspendLayout");
// Use JSON parse method to extract the data from local storage
var storedItems = JSON.parse(localStorage.getItem("treeData"));
if (storedItems){
// Add items from parsed data to the TreeView
for (var i = 0; i < storedItems.length; i++)
$tree.treeview("addItem", storedItems[i]);
}
// Resume and update the layout of TreeView
$tree.treeview("resumeLayout");
}
In order to empty our local storage we need to call the clear method:
$('#empty').click(function(e){
// Empty the local storage
localStorage.clear();
});
You can check out this online sample which demonstrates using of HTML5 local data storage with TreeView jQuery.