AngularJS: Initializing FlexGrid in my controller (adding Headers, Rows, Cells)

AngularJS: Initializing FlexGrid in my controller (adding Headers, Rows, Cells)

Posted by: nan0br3aker on 21 March 2018, 1:57 am EST

• 

  nan0br3aker

  • Post Options:
  • Link
    Copy

  Posted 21 March 2018, 1:57 am EST - Updated 3 October 2022, 11:32 am EST

  Hello everyone! I’d to know how can I initialize FlexGrid object in my controller and then use it in HTML? Because I need to build up my own headers and the whole table with data from JSON.

  How my project looks now:

  index.html:

   
         <div ng-controller="MyJSONController">
              <wj-flex-grid items-source="table_source"
                            items-source-changed="itemsSourceChanged(s,e)">
              </wj-flex-grid>
          </div>
  
  

  • “[li][/li]”

  controller :

  
  var MyJSONController = function ($scope, $http) {
  
      $http.get('query.json').success(function (data) {
          $scope.query = data;
          $scope.table_source = new wijmo.collections.CollectionView(setData(data));
      })
  
      $scope.itemsSourceChanged = function(sender, args) {
          sender.autoSizeColumns();
      };
      
      function setData(json_string) {
          var data = new wijmo.collections.ObservableArray();
          for(var i = 1; i <= getMaxRow(json_string); i++) {
              var row_data = new wijmo.collections.ObservableArray();
              for(var j = 1; j <= getMaxCol(json_string); j++) {
                  json_string.Cells.forEach(function (element) {
                     if(parseInt(element.Row) == i && parseInt(element.Col) == j){
                         row_data.push(element.Value);
                     }
                  });
              }
              data.push(row_data);
          }
          return data;
      }
  
      //Method to get max amount of Cols
      function getMaxCol(json_string){
          var maxCol = 0;
          json_string.Cells.forEach(function (element) {
             if(parseInt(element.Col) > maxCol) maxCol = parseInt(element.Col);
          });
          return maxCol;
      }
  
      //Method to get max amount of Rows
      function getMaxRow(json_string){
          var maxRow = 0;
          json_string.Cells.forEach(function (element) {
              if(parseInt(element.Row) > maxRow) maxRow = parseInt(element.Row);
          });
          return maxRow;
      }
  
  }
  
  

  Result:
  
  

  JSON:
  
  https://jsonblob.com/f6f59f22-2d17-11e8-9126-d5ef59fe6a2c

  As you see my headers from JSON aren’t located in headers.

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 22 March 2018, 2:10 am EST

  This is not the recommended way to initialize Flexgrid.

  FlexGrid expects the data source to be an object that implements ICollectionView.

  You can refer here for more info on ICollectionView :-

  http://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.collections.ICollectionView.Interface.html

  Alternatively, you can also create an array of objects(in this case grid wraps the array implicitly as an instance of CollectionView )

  I would recommend changing the JSON structure so that it resembles the array of objects that FlexGrid can consume.

  Here is an example that demonstrates the recommended approach to initialize flex grid:-

  http://jsfiddle.net/ju99mm21/