How can I display a grid repeater using ui-grid?

Question

I have data of messages including {id,message,date}. I would like to display a grid for each Date with data{message} in AngularJs using ui-grid

I was thinking of something like this:

<div ng-repeat="(item in data | groupBy: 'Date'">
  <div>{{ item.Date }}</div>
  <div  id="grid1" ui-grid="gridOptions(item.Date) " class="grid"></div>
</div>

but it's not working!

  $scope.gridOptions = function (date) {
    return {
        enableSorting: true,
        enableFiltering: true,
        data: 'data',
        columnDefs: $scope.filterGrid(date),
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
        },
       };
};
 $scope.filterGrid= function (date){
    return [
           { field: 'id',  enableFiltering: False},
           {
               field: 'Date', enableFiltering: false, filter: {
                   noTerm: true,
                   condition: function (searchTerm, cellValue) {
                       return cellValue.match(date);
                   }
               }
           },
           { field: 'Message' , enableFiltering: false },
    ]
}

user2717436 · Accepted Answer · 2016-06-08 06:23:43Z

1

First of all - ui-grid has a grouping feature, but this is still in beta.

You can try to use this example to group the data and build grids accordingly.

 var dataSource = {};

$scope.gridOptions = {};

 var generalGridOptions = {
    enableSorting: true,
    columnDefs: [ 
      { name: 'prop1' },
      { name: 'prop2' },
    ],
    data: null
};

// group the data
for(var i = 0; i < data.length; i++){

  if(!dataSource[data[i].month]){
    dataSource[data[i].month] = [];
  }

  var obj = {};

  for(var prop in data[i]){
    if(prop!='month'){
      obj[prop] = data[i][prop];
    }
  }

  dataSource[data[i].month].push(obj);
}

// build the grid options
for (var item in dataSource) {
    $scope.gridOptions[item] = angular.copy(generalGridOptions);
    $scope.gridOptions[item].data = dataSource[item];
}

answered Jun 8, 2016 at 6:23

user2717436

7951 gold badge10 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AranS · Accepted Answer · 2016-06-06 11:33:45Z

1

ui-grid attribute recieves a gridOptions object containing several parameters. Two of them are:

columnDefs - defining the columns and their data-binding.
data - the message objects in your case.

Look at the the documentation for further study: http://ui-grid.info/docs/#/tutorial

Code Example

template:

<div ng-repeat='item in items track by item.id' ui-grid='getItemGridOptions($index)'></div>

Passing the item index to the controller allows you to process your data. Then you can return an object containing the data and columnDefs properties. Like this:

 private getItemGridOptions(index): IGridOptions {

        //get the data you need for your items array using the index...

       // then return the gridOptions object (I put random values)
        return {
            columnDefs: this.columns,
            rowHeight: 24,
            rowTemplate: rowtpl,
            enableHorizontalScrollbar: this.uiGridConstants.scrollbars.NEVER,
            enableColumnMenus: false,
            enableRowSelection: true,
            enableRowHeaderSelection: false,
            enableFiltering: true,
            modifierKeysToMultiSelect: true,
            multiSelect: true,
            data: null,
        };
    }

edited Jun 6, 2016 at 11:33

answered Jun 2, 2016 at 9:06

AranS

1,91113 silver badges22 bronze badges

7 Comments

RLS Over a year ago

but how can group by the 'date' and display more one then one grid?

AranS Over a year ago

each item in ng-repeat should create dynamically its gridOptions and pass it to the ui-grid attribute. You can call a function responsible for initializing the gridOptions, passing it the item values.

RLS Over a year ago

thank you! is that Angular 2? any way of doing this in angular1?

AranS Over a year ago

This is written in TypeScript and aimed for Angular1

RLS Over a year ago

do you have a way of doing this without TypeScript?

|

Collectives™ on Stack Overflow

How can I display a grid repeater using ui-grid?

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related