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 Weba 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:

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:

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.

// 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:

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.

Tab content switching

Newsletter

Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.

Name:

Email: *

*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.