CODEWITHSUNDEEP
angularjsangular-ui-grid
simple user
simple user

Reputation: 383

Hide column in ui grid if no data present

I want to hide columns in ui-grid if there is no data present in that column. Like here the column "Issued By" and "Issued On" should be hidden as there is no data present.

enter image description here

HTML

<body ng-app="appHome">
    <div ng-controller="ctrlRequestDetail">
        <div class="gridStyle" ui-grid="gridInvUsage">
        </div>
    </div>
</body>

Controller.js

var myApp = angular.module('appHome', ['ui.grid']);

myApp.controller("ctrlRequestDetail", ['$scope', 'MetadataOrgFactory', function ($scope, MetadataOrgFactory) {
    MetadataOrgFactory.getIdApiCall('geteventinvlist', $scope.reqDetailData.EventId, function (dataSuccess) {
        //Web API call to Fetch Data
        $scope.invUsageData = dataSuccess;        
    }, function (dataError) {
    });

    $scope.gridInvUsage = {
        data: 'invUsageData',
        columnDefs: [           
            { field: 'InvBookStartTime', displayName: 'Book Start Time', cellFilter: 'date:"dd-MM-yyyy HH:mm"' },
            { field: 'InvBookEndTime', displayName: 'Book End Time', cellFilter: 'date:"dd-MM-yyyy HH:mm"' },
            { field: 'SourceInvNumber', displayName: 'Source Inventory' },
            { field: 'BookingRemarks', displayName: 'Booking Remarks' },
            { field: 'BookingStatus', displayName: 'Booking Status' },
            { field: 'AcceptRejectBy', displayName: 'Accept/Reject By' },
            { field: 'IssuedBy', displayName: 'Issued By' },
            { field: 'IssuedOnTime', displayName: 'Issued On' },           
        ]

    }
}])

How to achieve this functionality?

Upvotes: 0

Views: 2083

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136134

You could easily toggle the particular column visible property to show and hide the based on arrived data from API.

Code

$scope.columns = [           
    { field: 'InvBookStartTime', displayName: 'Book Start Time', cellFilter: 'date:"dd-MM-yyyy HH:mm"' },
    { field: 'InvBookEndTime', displayName: 'Book End Time', cellFilter: 'date:"dd-MM-yyyy HH:mm"' },
    { field: 'SourceInvNumber', displayName: 'Source Inventory' },
    { field: 'BookingRemarks', displayName: 'Booking Remarks' },
    { field: 'BookingStatus', displayName: 'Booking Status' },
    { field: 'AcceptRejectBy', displayName: 'Accept/Reject By' },
    { field: 'IssuedBy', displayName: 'Issued By' },
    { field: 'IssuedOnTime', displayName: 'Issued On' },           
];

$scope.gridOptions = {
   data: 'invUsageData',
   columnDefs: $scope.columns,
   onRegisterApi: function(gridApi) {
      $scope.gridApi = gridApi;
   }
};

//Once data arrives, inside ajax success
//Web API call to Fetch Data
$scope.invUsageData = dataSuccess;  
$scope.columns.forEach(function(col){
   col.visible = $scope.invUsageData.filter(function(item){
       return angular.isDefined(item[col. field]);
   }).length;
});

Plunker Demo

Retrieve column definition via ajax and after updating columnDefs property refresh the grid to see the changes

function getColumns() {
  $http.get('columns.json').then(function(response) {
    $scope.columns = response.data;
    $scope.gridOptions.columnDefs = $scope.columns;
    $scope.columns.forEach(function(col) {
      col.visible = $scope.invUsageData.filter(function(item) {
        return angular.isDefined(item[col.field]);
      }).length;
    });
    //updated grid after colDef changed.
    $scope.gridApi.grid.refresh();
  });
}

$scope.gridOptions = {
  data: 'invUsageData',
  columnDefs: $scope.columns,
  onRegisterApi: function(gridApi) {
    $scope.gridApi = gridApi;
  }
};

Updated Demo

Upvotes: 1

Related Questions