LIDOR SYSTEMS

Advanced User Interface Controls and Components

Export Data from AngularJS Tree Grid to JSON

Created: 06 April 2015

IntegralUI Tree Grid directive for AngularJS has a built-in method which allows you to export its data in JSON format. As it is shown in demonstration below, you can export the data in JSON format as a flat list or a tree hierarchy. Whenever a Export button is clicked, a console window will display the exported data.

TreeGrid directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps





In our example we are using the following data structure for columns and rows:

$scope.columns = [

{ headerText: 'Header1', footerText: 'Footer1', width: 200 },

{ headerText: 'Header2', footerText: 'Footer2', width: 250 },

{ headerText: 'Header3', footerText: 'Footer3', width: 120 }

];

 

$scope.rows = [

{

id: 1,

text: "Item1",

cells: [{ text: "Item11" }, { text: "Item12" }, { text: "Item13" }],

rows: [

{ id: 11, pid: 1, text: "Item11", cells: [{ text: "Item111" }, { text: "Item112" }, { text: "Item113" }] },

{

id: 12,

pid: 1,

text: "Item12",

cells: [{ text: "Item121" }, { text: "Item122" }, { text: "Item123" }],

rows: [

{ id: 121, pid: 12, text: "Item121", cells: [{ text: "Item1211" }, { text: "Item1212" }, { text: "Item1213" }] },

{

id: 122,

pid: 12,

text: "Item122",

cells: [{ text: "Item1221" }, { text: "Item1222" }, { text: "Item1223" }],

expanded: false,

rows: [

{ id: 1221, pid: 122, text: "Item1221", cells: [{ text: "Item12211" }, { text: "Item12212" }, { text: "Item12213" }] },

{ id: 1222, pid: 122, text: "Item1222", cells: [{ text: "Item12221" }, { text: "Item12222" }, { text: "Item12223" }] }

]

},

{ id: 123, pid: 12, text: "Item123", cells: [{ text: "Item1231" }, { text: "Item1232" }, { text: "Item1233" }] }

]

},

{ id: 13, pid: 1, text: "Item13", cells: [{ text: "Item131" }, { text: "Item132" }, { text: "Item133" }] },

{

id: 14,

pid: 1,

text: "Item14",

cells: [{ text: "Item141" }, { text: "Item142" }, { text: "Item143" }],

rows: [

{ id: 141, pid: 14, text: "Item141", cells: [{ text: "Item1411" }, { text: "Item1412" }, { text: "Item1413" }] },

{ id: 142, pid: 14, text: "Item142", cells: [{ text: "Item1421" }, { text: "Item1422" }, { text: "Item1423" }] }

]

}

]

},

{

id: 2,

text: "Item2",

cells: [{ text: "Item21" }, { text: "Item22" }, { text: "Item23" }],

expanded: false,

rows: [

{ id: 21, pid: 2, text: "Item21", cells: [{ text: "Item211" }, { text: "Item212" }, { text: "Item213" }] },

{ id: 22, pid: 2, text: "Item22", cells: [{ text: "Item221" }, { text: "Item222" }, { text: "Item223" }] },

{

id: 23,

pid: 2,

text: "Item23",

cells: [{ text: "Item231" }, { text: "Item232" }, { text: "Item233" }],

expanded: false,

rows: [

{ id: 231, pid: 23, text: "Item231", cells: [{ text: "Item2311" }, { text: "Item2312" }, { text: "Item2313" }] },

{ id: 232, pid: 23, text: "Item232", cells: [{ text: "Item2321" }, { text: "Item2322" }, { text: "Item2323" }] }

]

}

]

},

{ id: 3, text: "Item3", cells: [{ text: "Item31" }, { text: "Item32" }, { text: "Item33" }] }

];

<iui-treegrid name="{{gridName}}" columns="columns" rows="rows"></iui-treegrid>

Although is not shown in above demonstration, you can choose which data fields you want to have exported, that is for columns and rows in the Tree Grid. In our case we are exporting only the following fields:

var columnFields = [ 'headerText' ];

var rowFields = [ 'id', 'pid', 'cells', 'text' ];

Finally we need to call the exportToJSON method using above settings in order to export the Tree Grid data to a JSON formatted object:

var output = $gridService.exportToJSON($scope.gridName, columnFields, rowFields, $scope.exportType == 'flat', 3);

 

console.log(output);

If there is no filter applied, that is no column or row fields are applied, all columns and rows with all their content will be exported. The fourth parameter allows you to choose whether you want exported data to appear as flat list or a tree hierarchy. And the final parameter of this method determines how much spacing will be added between each object field.

You can use exported data to populate the Tree Grid on demand from local or remote data source (a JSON file for example), by simply providing it as parameter to the loadData method.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.