Angular UI-Grid Conditional Cell Template

Question

I have a cell template that displays data from an external ui-select. However I only want the cell template to appear if the row(s) is/are selected. Here is my current code:

$scope.gridOptions.columnDefs = [
  { name: 'resourceChannel', 
    cellTemplate: '<div ng-if="$(\'.ui-grid-row\').hasClass(\'ui-grid-row-selected\')">{{grid.appScope.channel.selected.channel}}</div>'},
];

CMR · Accepted Answer · 2015-09-11 12:56:29Z

1

You could add something like a Row-Selected-Listener and ng-if - check if the current row is in the selection.

I added a Plunkr that demonstrates a possiblity of show/hide cellTemplate.

First you add an ng-click to the ui-grid rowtemplate, f.e. addRowtoSelection().

$templateCache.put('ui-grid/uiGridViewport',
  ...
  "<div ng-repeat=\"(rowRenderIndex, row) in rowContainer.renderedRows track by $index\"" +
  "ng-click=\"grid.appScope.addRowtoSelection(row)\"" +
  ...
);

Then you add that function to your appScope.

all.gridOptions = {
        columnDefs: [
            {field: 'firstName', cellTemplate: '<div ng-if="grid.appScope.isRowSelected(row.uid)">something</div>'},
            {field: 'lastName'},
            {field: 'company'},
            {field: 'employed'}
        ],
        ...,    
        appScopeProvider : {
            addRowtoSelection : function(row) {
                var contains = false;
                for (var i = 0, len = all.rowsSelectedIds.length; i < len; i++) {
                    if(all.rowsSelectedIds[i] === row.uid) {
                        all.rowsSelectedIds.splice(i, 1);
                        contains = true;
                    }
                }
                if(!contains) {
                    all.rowsSelectedIds.push(row.uid);
                }
            },
            isRowSelected : function(id) {
                for (var i = 0, len = all.rowsSelectedIds.length; i < len; i++) {
                    if(all.rowsSelectedIds[i] === id) {
                        return true;
                    }
                }
                return false;
            },
        },

I also added a check for already selected row-IDs so you add/remove on click. In ColumnDefs you can see the reference to the isRowSelected() check, where you pass in the row.uid. That parses the current array and returns true or false.

answered Sep 11, 2015 at 12:56

CMR

9331 gold badge7 silver badges8 bronze badges

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

2 Comments

Jbodeen Over a year ago

This works but is it possible to keep the first name in the column visible until the user has selected another value? You have firstName defined in your example data array however the column is empty until the user clicks in the cell. I also found these in the ui-grid documentation onRegisterApi: function (gridApi) { $scope.gridApi = gridApi; gridApi.selection.on.rowSelectionChanged($scope, function(row){ //some function here }); //gridApi.selection.on.rowSelectionChangedBatch($scope, callbackFunction); },

Jbodeen Over a year ago

Never mind, I got it Plunkr. Thanks for the help.

Collectives™ on Stack Overflow

Angular UI-Grid Conditional Cell Template

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related