Column definitions from JSON

[Zaphod]

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!

[Zaphod]

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)

[Zaphod]

Guess I found what I was looking for: 

http://docs.telerik.com/kendo-ui/AngularJS/introduction#delaying-widget-initialization