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

Column definitions from JSON

2 Answers 163 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Zaphod
Top achievements
Rank 1
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.[<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!

2 Answers, 1 is accepted

Sort by
0
Zaphod
Top achievements
Rank 1
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)

0
Zaphod
Top achievements
Rank 1
answered on 06 Aug 2015, 03:18 PM
Tags
Grid
Asked by
Zaphod
Top achievements
Rank 1
Answers by
Zaphod
Top achievements
Rank 1
Share this question
or