This is a migrated thread and some comments may be shown as answers.

Column definitions from JSON

2 Answers 364 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Zaphod asked on 05 Aug 2015, 02:54 PM

Hi *,

I have to create a grid (the AngularJS version) in dependence of the requested data/entity.
For example, the "User" entity could have 3 columns ("username", "firstname", "lastname") while an "Articles" entity might consist of 5 columns ("ArticleNo", "Description", "Price", "Availability", "UserRating").
So I neither know the number of columns nor their titles. Besides that, the column titles have to be translated (server-side) according to the language of the logged-in user.

That's why I need to retrieve the column definitions from the server, e.g. in a separate JSON file.

Example: column definitions and data for "User" entity:
grid_coldefs.json:

1.[ {  "field": "username",  "title": "User Name",  "width": "120px" }, {  "field": "firstname",  "title": "First Name",  "width": "120px" }, {  "field": "lastname",  "title": "Last Name",  "width": "120px" } ]

grid_data.json:

1.[ {  "id": 1001,  "username": "UserName1",  "firstname": "Fname1",  "lastname": "Lname1" }, {  "id": 1002,  "username": "UserName2",  "firstname": "Fname2",  "lastname": "Lname2" }, {  "id": 1003,  "username": "UserName3",  "firstname": "Fname3",  "lastname": "Lname3" }, {  "id": 1004,  "username": "UserName4",  "firstname": "Fname4",  "lastname": "Lname4" } ]

I tried different ways, but didn't get it to work...
(1):

1.myApp.controller(...) { $scope.mainGridOptions = { dataSource: { type: "json", transport: { read: "rest/grid_data.json" }, ... }, columns: { type: "json", transport: { read: "rest/grid_coldefs.json" } }, ... } }

==> DOESN'T WORK AT ALL

(2):

1.myApp.controller(...) { $scope.colHeaders = {}; $http.get("rest/grid_coldefs.json").success(function

(data) {<br>    $scope.colHeaders = data; <br>  });<br>  <br>  $scope.mainGridOptions = {   <br>    dataSource: {<br>      type:

"json", transport: { read: "rest/grid_data.json" } }, columns: $scope.colHeaders } }

==> DOESN'T WORK ($scope.colHeaders is set, but probably too late because $http.get is async... The grid is rendered but fieldnames (e.g. "username") are used for columns headers)

So I tried putting the whole stuff into the "SUCCESS" section:
(3):

1.myApp.controller(...) { $scope.colHeaders = {}; $http.get("rest/grid_coldefs.json").success(function

(data) {<br>    $scope.colHeaders = data; <br>    <br>    $scope.mainGridOptions = {   <br>      dataSource: {<br>        type:

"json", transport: { read: "rest/grid_data.json" } }, columns: $scope.colHeaders } }); }

==> DOESN'T WORK (only a totally empty grid object (no column headers, no data) is renderd)

Any help is appreciated.
Thanks in advance!

2 Answers, 1 is accepted

answered on 06 Aug 2015, 05:49 AM

Hi again,

since the result of the "Format Code Block" is not as expected, I'll repeat my post - hopefully more readable...

I have to create a grid (the AngularJS version) in dependence of the requested data/entity.
For example, the "User" entity could have 3 columns ("username", "firstname", "lastname") while an "Articles" entity might consist of 5 columns ("ArticleNo", "Description", "Price", "Availability", "UserRating").
So I neither know the number of columns nor their titles. Besides that, the column titles have to be translated (server-side) according to the language of the logged-in user.

That's why I need to retrieve the column definitions from the server, e.g. in a separate JSON file.

Example: column definitions and data for "User" entity:

grid_coldefs.json:
[
{
"field": "username",
"title": "User Name",
"width": "120px"
},
{
"field": "firstname",
"title": "First Name",
"width": "120px"
},
{
"field": "lastname",
"title": "Last Name",
"width": "120px"
}
]

grid_data.json:
[
{
"id": 1001,
"username": "UserName1",
"firstname": "Fname1",
"lastname": "Lname1"
},
{
"id": 1002,
"username": "UserName2",
"firstname": "Fname2",
"lastname": "Lname2"
},
{
"id": 1003,
"username": "UserName3",
"firstname": "Fname3",
"lastname": "Lname3"
},
{
"id": 1004,
"username": "UserName4",
"firstname": "Fname4",
"lastname": "Lname4"
}
]

I tried different ways, but didn't get it to work...
(1):
myApp.controller(...) {
$scope.mainGridOptions = {
dataSource: {
type: "json",
transport: {
read: "rest/grid_data.json"
},
...
},
columns: {
type: "json",
transport: {
read: "rest/grid_coldefs.json"
}
},
...
}
}
==> DOESN'T WORK AT ALL

(2):
myApp.controller(...) {
$scope.colHeaders = {};
$http.get("rest/grid_coldefs.json").success(function(data) {
$scope.colHeaders = data;
});

$scope.mainGridOptions = {
dataSource: {
type: "json",
transport: {
read: "rest/grid_data.json"
}
},
columns: $scope.colHeaders
}
}
==> DOESN'T WORK ($scope.colHeaders is set, but probably too late because $http.get is async... The grid is rendered but fieldnames (e.g. "username") are used for columns headers)

So I tried putting the whole stuff into the "SUCCESS" section:
(3):
myApp.controller(...) {
$scope.colHeaders = {};
$http.get("rest/grid_coldefs.json").success(function(data) {
$scope.colHeaders = data;

$scope.mainGridOptions = {
dataSource: {
type: "json",
transport: {
read: "rest/grid_data.json"
}
},
columns: $scope.colHeaders
}
});
}
==> DOESN'T WORK (only a totally empty grid object (no column headers, no data) is renderd)