UI-Grid- Column having buttons not getting changed

Question

I'm using ui-grid to display a table.

Last column will be having 3 buttons.

There will be another button in footer "Change Table", clicking on which grid options will get change and instead of displaying 3 buttons, it should display 1 button and it should remove "Description" column.

When user clicks on button, "Description" column is getting removed but buttons column is not getting refreshed.

It's still showing 3 buttons instead of 1.

Below is the jsFiddle link:   
    http://jsfiddle.net/ag3Lc1fz/

Please help

score 0 · Answer 1 · answered Sep 08 '16 at 22:15

There is no direct way to do this. But you can use $scope variable to hide and show buttons like below.

 $scope.oneColumn = false;

    $scope.gridOptions = {
        excludeProperties: '__metadata',
        enablePaginationControls: false,
        useExternalSorting: true,
        useExternalFiltering: true,
        enableFiltering: true,
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;

        }
    };

    $scope.gridOptions.columnDefs = [
        { name: 'name', enableCellEdit: false, displayName: 'Name', width: '20%' },
        { name: 'type', displayName: 'Type', enableCellEdit: false, width: '20%' },
        { name: 'description', displayName: 'Description', width: '30%' },
                { name: 'id', displayName: '', width: '30%', cellTemplate: '<div class="ui-grid-cell-contents" title="TOOLTIP">' +
                      '<button class="material-icons noOutline" >1</button>' +
                      '<button data-ng-show="!grid.appScope.oneColumn"  class="material-icons noOutline" >2</button>'+
                      '<button  data-ng-show="!grid.appScope.oneColumn" class="material-icons noOutline" >3</button>'+
                      '</div>' }
      ];

    $scope.toggleColumn = function() {
        $scope.oneColumn = !$scope.oneColumn;
  }

http://jsfiddle.net/uvo9zoo0/2/, check it out.

UI-Grid- Column having buttons not getting changed

1 Answers1