TreeGrid directive 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
Animation Type:
| Max columns: | |
| Max rows: | |
| Levels: |
Advanced User Interface Controls and Components
Created: 16 October 2015
When you want to load large data into the Grid, it may take some time during which some notification that loading is in the process is required. AngularJS Grid directive comes with built-in functionality that allows you to show a loading animation during this process.
Animation Type:
| Max columns: | |
| Max rows: | |
| Levels: |
There are two types of loading animation presented above: circular and linear, with several different speed levels.
Note You can change the appearance of loader using CSS. Circular animation uses an image that rotates, and linear animation uses a progress bar. All of these are customizable using CSS styles.
This type of loading animation is best suitable when thousands of rows are loaded into the grid. During this process, the update of the grid layout may take some time, because adding multiple elements to the DOM takes time.
By showing a progress bar during this load process, you can notify the user of the update progress. To start an animation we are using the beginLoad method, which must end by calling the endLoad method. Here is a sample code on this process:
$scope.loadLocal = function(){
// Start loading animation
$gridService.beginLoad($scope.gridName, null, { type: $scope.animationType, speed: $scope.animationSpeed, opacity: 0.25 });
// Suspend the Grid layout from any changes to increase performance
$gridService.suspendLayout($scope.gridName);
// Remove all columns and rows from the Grid
clearList();
// Populate the TreeGrid with data
addColumns();
addRows(null, 0);
// Resume and update the Grid layout
$gridService.resumeLayout($scope.gridName);
}
// Handle loadComplete event to end the loading animation
$scope.onLoadComplete = function(){
$gridService.endLoad($scope.gridName);
}
<iui-treegrid name="{{gridName}}" columns="columns" rows="rows" load-complete="onLoadComplete()"></iui-treegrid>
The endLoad method is best called after loading is fully completed. When grid layout is updated and data is fully loaded, the loadComplete event is fired. We can handle this event to add a call to the endLoad method and finish the loading animation.
In our demo, from control panel on the right you can choose how many columns and rows you want to add to the grid. In addition, you can choose the speed by which loading animation will execute.
There are five speed levels available:
In similar way, we can display a circular animation. This animation as a loader uses an image that rotates with speed depending on the speed level set.
This loading animation is best suitable when we want to add small or large data sets from a remote data source, using a JSON file as a data source for example. we can start this animation using the same methods as above, we only need to change the value of animation type field.
$scope.loadRemote = function(){
// Start loading animation
$gridService.beginLoad($scope.gridName, null, { type: $scope.animationType, speed: $scope.animationSpeed, opacity: 0.4 });
// Retrieve data from a JSON file
var dataSource = $http.get('large-data.json');
if (dataSource){
dataSource.success(function(data){
if (data.length == 2){
// Suspend the Grid layout from any changes to increase performance
$gridService.suspendLayout($scope.gridName);
// Remove aany existing columns and rows from the Grid
$gridService.clearColumns($scope.gridName);
$gridService.clearRows($scope.gridName);
// Add Columns to the Grid
for (var j = 0; j < data[0].columns.length; j++){
$scope.columns.push(data[0].columns[j]);
}
// Add Rows to the Grid
$gridService.loadData($scope.gridName, data[1].rows);
// Resume and update the Grid layout
$gridService.resumeLayout($scope.gridName);
}
});
dataSource.error(function(data){
$gridService.endLoad($scope.gridName);
alert("AJAX failed to Load Data");
});
}
}
// Handle loadComplete event to end the loading animation
$scope.onLoadComplete = function(){
$gridService.endLoad($scope.gridName);
}
In our demo, we are using a large JSON file as our data source. This file contains 10,000 rows with 25 columns, and it takes some time to load it in full. During this process, if we don't show some kind of notification that loading is in the process, the grid may appear as empty for several seconds, during which UI interaction may not be available. Because of this, showing a circular animation is the best choice.
After data is fully loaded, the loadComplete event is fired and endLoad method is called, so that animation stops and grid displays loaded data.
It is always good to notify the user that loading is in the process. We can either display small message stating data load is in process, or like in this example, showing a loading animation. Grid directive for AngularJS handles both circular and linear animations with option to choose among several speed levels. Depending on data size and source, you can determine which kind of animation is best suitable for your application, in some cases you may need to use them both.