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:
grid_data.json:
I tried different ways, but didn't get it to work...
(1):
==> DOESN'T WORK AT ALL
(2):
==> 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):
==> DOESN'T WORK (only a totally empty grid object (no column headers, no data) is renderd)
Any help is appreciated.
Thanks in advance!
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.
[<br> {<br>
"field"
:
"username"
,<br>
"title"
:
"User Name"
,<br>
"width"
:
"120px"
<br> },<br> {<br>
"field"
:
"firstname"
,<br>
"title"
:
"First Name"
,<br>
"width"
:
"120px"
<br> },<br> {<br>
"field"
:
"lastname"
,<br>
"title"
:
"Last Name"
,<br>
"width"
:
"120px"
<br> }<br>]
grid_data.json:
1.
[<br> {<br>
"id"
: 1001,<br>
"username"
:
"UserName1"
,<br>
"firstname"
:
"Fname1"
,<br>
"lastname"
:
"Lname1"
<br> },<br> {<br>
"id"
: 1002,<br>
"username"
:
"UserName2"
,<br>
"firstname"
:
"Fname2"
,<br>
"lastname"
:
"Lname2"
<br> },<br> {<br>
"id"
: 1003,<br>
"username"
:
"UserName3"
,<br>
"firstname"
:
"Fname3"
,<br>
"lastname"
:
"Lname3"
<br> },<br> {<br>
"id"
: 1004,<br>
"username"
:
"UserName4"
,<br>
"firstname"
:
"Fname4"
,<br>
"lastname"
:
"Lname4"
<br> }<br>]
I tried different ways, but didn't get it to work...
(1):
1.
myApp.controller(...) {<br> $scope.mainGridOptions = { <br> dataSource: {<br> type:
"json"
,<br> transport: {<br> read:
"rest/grid_data.json"
<br> },<br> ...<br> },<br> columns: {<br> type:
"json"
,<br> transport: {<br> read:
"rest/grid_coldefs.json"
<br> }<br> },<br> ...<br> } <br>}
==> DOESN'T WORK AT ALL
(2):
1.
myApp.controller(...) {<br> $scope.colHeaders = {};<br> $http.get(
"rest/grid_coldefs.json"
).success(
function
(data) {<br> $scope.colHeaders = data; <br> });<br> <br> $scope.mainGridOptions = { <br> dataSource: {<br> type:
"json"
,<br> transport: {<br> read:
"rest/grid_data.json"
<br> }<br> },<br> columns: $scope.colHeaders<br> }<br>}
==> 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(...) {<br> $scope.colHeaders = {};<br> $http.get(
"rest/grid_coldefs.json"
).success(
function
(data) {<br> $scope.colHeaders = data; <br> <br> $scope.mainGridOptions = { <br> dataSource: {<br> type:
"json"
,<br> transport: {<br> read:
"rest/grid_data.json"
<br> }<br> },<br> columns: $scope.colHeaders<br> }<br> });<br>}
==> DOESN'T WORK (only a totally empty grid object (no column headers, no data) is renderd)
Any help is appreciated.
Thanks in advance!