CODEWITHSUNDEEP
javascriptangularjsng-grid
murday1983
murday1983

Reputation: 4006

angularJS Do Not Display A Row Depending On Value In An NG-Grid

I am new to angularJS ad I have been asked to hide a row in my ng-grid table if a value of a column is '0'.

My grid has 4 columns:

And I want to hide an entire row if 'This Month' column is '0'

My HTML for the gird is:

<div data-ng-controller="workflowworkitemscompleted as vm">
    <div data-ng-if="isbusy">
        <div data-cc-spinner="vm.spinnerOptions"></div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="gridStyle" style="height:157px" data-ng-grid="gridOptions" id="cwigrid"></div>
        </div>
    </div>
</div>

My controller code is:

$scope.searchfilter = "";
    $scope.mySelections = [];
    $scope.sortInfo = { fields: ['countDay'], directions: ['desc'] };
    $scope.totalServerItems = 0;
    $scope.pagingOptions = {
        pageSizes: [5],
        pageSize: 5,
        currentPage: 1
    };

    $scope.gridOptions = {
        data: 'wfiprocessed',
        multiSelect: false,
        rowHeight: 25,
        showFooter: false,
        footerRowHeight: 40,
        enableColumnReordering: false,
        showColumnMenu: false,
        enableColumnResize: false,
        enableRowSelection: false,
        filterOptions: $scope.filterOptions,
        selectedItems: $scope.mySelections,
        enablePaging: false,
        pagingOptions: $scope.pagingOptions,
        plugins: [gridLayoutPlugin],
        totalServerItems: 'totalServerItems',
        sortInfo: $scope.sortInfo,
        useExternalSorting: false,
        virtualizationThreshold: 50,
        rowTemplate: "<div ng-style=\"{ 'cursor': row.cursor }\" ng-repeat=\"col in renderedColumns\" class=\"ngCell {{col.colIndex()}} {{col.cellClass}}\">" +
            "   <div class=\"ngVerticalBar\" ng-style=\"{height: rowHeight}\" ng-class=\"{ ngVerticalBarVisible: !$last }\">&nbsp;</div>" +
            "   <div ng-cell></div>" +
            "</div>",
        columnDefs: [
            { field: 'userName', displayName: 'User', cellTemplate: vm.optimizedcell },
            { field: 'countDay', displayName: 'Today', cellTemplate: vm.optimizedcell },
            { field: 'countWeek', displayName: 'This Week', cellTemplate: vm.optimizedcell },
            { field: 'countMonth', displayName: 'This Month', cellTemplate: vm.optimizedcell }
        ]
    };

And my table looks like: enter image description here

Looking at the table above, I don't want the 'dtealdev' or 'qauser2' rows to be displayed as the 'This Month' column is '0'

Upvotes: 1

Views: 510

Answers (1)

Shouvik
Shouvik

Reputation: 11720

In your data source of $scope.gridOptions you feed all the dataset you want to show in the grid. What you are doing is, you are passing the undesirable field i.e., qauser2 and dtealedev in this data set too.

What you can do is return only the desired set of data values that need to show. 

$scope.gridOptions.data = function(data) {
    //remove the items in data that contain 0 in all fields

    return newData;
}

Upvotes: 1

Related Questions