Advanced User Interface Controls and Components

IntegralUI Web

Native Angular and AngularJS UI Components

TreeGrid / Remote Data

In this sample we are using a remote JSON file as our data source to load the content of the TreeGrid. This file is large in size, approximately 14 MB, and becuase of this we can't display its content here. But you can access it from this link: JSON file.

This file contains 25 columns and 10,000 rows, and whenever the Load Remote button is clicked, its content is loaded into the TreeGrid using the AngularJS $http service and TreeGrid loadData method. By using this method you can change the content of the TreeGrid dynamically, in whole or to a specified row.

<!DOCTYPE html>



<link rel="stylesheet" href="css/integralui.css" />

<link rel="stylesheet" href="css/integralui.checkbox.css" />

<link rel="stylesheet" href="css/integralui.treegrid.css" />

<link rel="stylesheet" href="css/themes/theme-flat-blue.css" />

<script type="text/javascript" src="external/angular.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.lists.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.checkbox.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.treegrid.min.js"></script>



<div ng-app="appModule" ng-controller="appCtrl">

<iui-treegrid name="{{gridName}}" columns="columns" rows="rows" expanding-column-index="1" show-footer="false"></iui-treegrid>





.module("appModule", ["integralui"])

.controller("appCtrl", ["$scope", "IntegralUITreeGridService", "$timeout", "$http", function($scope, $gridService, $timeout, $http){

$scope.gridName = "gridSample";

$scope.columns = [];

$scope.rows = [];


$scope.loadRemote = function(){

var dataSource = $http.get('large-json.txt');

if (dataSource){


if (data.length == 2){

// Suspend the Layout






// Add Columns

for (var j = 0; j < data[0].columns.length; j++)



// Add Rows

$gridService.loadData($scope.gridName, data[1].rows, null, null, true);


// Update the Layout






alert("AJAX failed to Load Data");





.iui-treegrid-column-header-cell, .iui-treegrid-column-footer-cell


padding: 1px 3px;




padding: 1px 3px;