LIDOR SYSTEMS

Advanced User Interface Controls and Components

Data Binding in Tree Grid for AngularJS

Created: 01 April 2015

In order to populate the AngularJS Tree Grid with some data, you can use either local or remote data source. However, the data objects must contain the same field names as the ones used by the Tree Grid default settings. Because many data sources have custom names for its data fields, you need to override the default settings to map the ones used in your data source. In following sections of this article we will show you how to bind Tree Grid to an arbitrary data source.

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

In case of data binding we are going to use only one property called dataFields. This property is used to map the field names of objects in your data source, with the ones used by the Tree Grid directive. By default settings for this property are:

var dataFields = {

cellFields: {

cid: 'cid',

content: 'content',

contextMenu: 'contextMenu',

labelEdit: 'labelEdit',

text : 'text',

value: 'value'

},

columnFields: {

allowDrag: 'allowDrag',

allowDrop: 'allowDrop',

contentAlignment: 'contentAlignment',

contextMenu: 'contextMenu',

editorType: 'editorType',

fixedWidth: 'fixedWidth',

footerAlignment: 'footerAlignment',

footerText : 'footerText',

headerAlignment: 'headerAlignment',

headerContent: 'headerContent',

headerText : 'headerText',

icon: 'icon',

id : 'id',

width: 'width'

},

rowFields: {

allowDrag: 'allowDrag',

allowDrop: 'allowDrop',

cells: 'cells',

content: 'content',

contextMenu: 'contextMenu',

expanded: 'expanded',

hasChildren: 'hasChildren',

icon: 'icon',

id : 'id',

pid : 'pid',

rows: 'rows',

statusIcon: 'statusIcon',

text : 'text'

}

}

You don't have to change all the fields mentioned above, only those that are different than the ones in your data source. In our demonstration we are going to use only small part of it, to make it more clear. Let set our data source like this:

// Columns

$scope.sampleColumns = [

{ id: 1, columnTitle: "Customer/Order ID", columnAlignment: "center", size: 180 },

{ id: 2, columnTitle: "Ordered", columnAlignment: "center", cellAlignment: "center", size: 90 },

{ id: 3, columnTitle: "Shipped", columnAlignment: "center", cellAlignment: "center", size: 90 },

{ id: 4, columnTitle: "Ship Via", columnAlignment: "center", size: 125 },

{ id: 5, columnTitle: "Freight", columnAlignment: "center", cellAlignment: "right", size: 80 },

{ id: 6, columnTitle: "Address", columnAlignment: "center", size: 200 },

{ id: 7, columnTitle: "City", columnAlignment: "center" },

{ id: 8, columnTitle: "Country", columnAlignment: "center" }

];

 

// Rows presented in flat list

$scope.flatData = [

{

rowID: 1,

icon: "icons business",

rowText: "Piccolo und mehr",

cells: [{ cid: 1, cellText: "Piccolo und mehr" }, { cid: 6, cellText: "Geislweg 14" }, { cid: 7, cellText: "Salzburg" }, { cid: 8, cellText: "Austria" }]

},

{

rowID: 11,

parentID: 1,

rowText: "Order #10259",

cells: [{ cid: 1, cellText: "10259" }, { cid: 2, cellText: "9/13/2012" }, { cid: 3, cellText: "9/27/2012" }, { cid: 4, cellText: "Federal Shipping" }, { cid: 5, cellText: "360.63" }]

},

{

rowID: 12,

parentID: 1,

rowText: "Order #11094",

cells: [{ cid: 1, cellText: "11094" }, { cid: 2, cellText: "1/20/2013" }, { cid: 3, cellText: "2/5/2013" }, { cid: 4, cellText: "Federal Shipping" }, { cid: 5, cellText: "200.14" }]

}

];

As it can be seen from above code, we are using different field names in our data source, for column, rows and cells. If we try to populate the Tree Grid with this data, the TreeGrid will remain empty, because it cannot interpret the data. In order to fix this we must override the default settings by changing the field names to match the ones in our data source.

For example, in our case this would look like this:

// Custom field names used to match data fields from our data source to the ones used by the Tree Grid

$scope.customFields = {

column: {

headerText: 'columnTitle',

headerAlignment: 'columnAlignment',

contentAlignment: 'cellAlignment',

width: 'size'

},

row: {

id: 'rowID',

pid: 'parentID',

text: 'rowText'

},

cell: {

text: 'cellText'

}

}

As it is shown in above code, the default 'headerText' field name is replaced with 'columnTitle' which is used in our sample data source. Names of other column, row and cell fields are replaced accordingly.

At last we need to apply these changes to the Tree Grid. This can be done either by using the dataFields attribute or applying our changes by using the loadData method. In case of our example we are going to use the loadData method:

$scope.gridName = "gridSample";

$scope.sampleRows = [];

 

// A call to loadData method to populate the Tree Grid with data

$gridService.loadData($scope.gridName, $scope.flatData, null, $scope.customFields, true);

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

As it can be seen from code line above, the fourth parameter accepts an object which contains custom names of data fields. By calling this method we can load data from any arbitrary local or remote data source, where data is arranged either as a flat list or a tree hierarchy. For more information on this method check out the online help.

As a result, the Tree Grid is populated with data like it is shown in above demonstration.

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.