CODEWITHSUNDEEP
angularjshtmlangular-ui-gridui-grid
ReyHielo
ReyHielo

Reputation: 31

RowTemplate gets overriden by Cell Template in UI-Grid

I have an ui-grid that sets the background color of each row based on the value of one of the data fields. One of the columns is a boolean that I'd like to show as a checkbox. The rows get colored as desired except in the first column, the checkbox.

If I remove the column celltemplate instruction, it works (the cell gets colored) so Im guessing my checkbox template is not accurate or that it overrides the rowtemplate by default.

I'm failing to see my mistake or maybe I'm missing some extra code.

Here's the juice. 

var myrowTemplate= '<div ng-class="{\'stPending\':row.entity.xSTATUS==1, \'stConfirmed\':row.entity.xSTATUS==2, \'stFailed\':row.entity.xSTATUS==3, \'stDue\':row.entity.xSTATUS==4, \'stCanceled\':row.entity.xSTATUS==5, \'stPassed\':row.entity.xSTATUS==6 }">' +
                        '<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell>' +
                        '</div>' +
                   '</div>';

var mycheckboxTemplate= '<div class="checkbox" style="text-align:center; margin-top:0px;" >' +
                            '<input type="checkbox" class="flat" ng-disabled="1" ng-model="row.entity.xACTIVE" >' +
                         '</div>';

$scope.gridOptions = {
    data :  $scope.options,
    enableSorting: true,
    enableFiltering: true,
    paginationPageSizes: [16, 32, 64],
    paginationPageSize: 16,
    enablePaginationcontrols: true,
    enableVerticalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED,
    rowTemplate: myrowTemplate,
    columnDefs: [
        { name: 'Active', field: 'xACTIVE', width: '7%', cellTemplate: mycheckboxTemplate},
        { name:'Location', field: 'xLOCATION'},
        { name:'Task', field: 'xTASK'},
        { name:'Section', field: 'xSECTION'},
        { name:'Name', field: 'xNAME'},
        { name:'Last Name', field: 'xLASTNAME'},
        { name:'Date', field: 'xDATE', width: '7%', type : 'date'},
    ],
    onRegisterApi: function (gridApi) {
          $scope.gridApi = gridApi;
          gridApi.core.on.renderingComplete($scope, function () {
            $timeout(function () {
              var gridBodyElem = document.getElementById(gridApi.grid.id + '-grid-container');
              gridBodyElem.addEventListener('mouseup', handleGridClick);
            });
      });
    }
};

And the custom styles in my css

.stConfirmed.ui-grid-cell-contents
{
  background-color:red;
}

.stPending.ui-grid-cell-contents
{
  background-color:green;
}

.stCancelled.ui-grid-cell-contents
{
  background-color:transparent;
}

.stDue.ui-grid-cell-contents
{
  background-color:yellow;
}

.stFailed.ui-grid-cell-contents
{
  background-color:orange;
}

.stPassed.ui-grid-cell-contents
{
  background-color:grey;
}

.gridUIOptions {
  width: 100%;
  height: 600px;
}

And the HTML just in case 

<div class="spacer col-md-12">

            <div data-ui-grid="gridOptions" ui-grid-pagination ui-grid-selection class="gridUIOptions" ui-grid-auto-resize></div>
</div>

Upvotes: 0

Views: 1290

Answers (2)

ReyHielo
ReyHielo

Reputation: 31

Ok, finally I got it to work.

The key here is to give the cellTemplate the exact same class "ui-grid-cell-contents". If not, cellTemplate will take some other class like ui-grid-cell and thus it tonwt work as the rowTemplate does.

var myrowTemplate= '<div ng-class="{\'stPending\':row.entity.xSTATUS==1, \'stConfirmed\':row.entity.xSTATUS==2, \'stFailed\':row.entity.xSTATUS==3, \'stDue\':row.entity.xSTATUS==4, \'stCanceled\':row.entity.xSTATUS==5, \'stPassed\':row.entity.xSTATUS==6 }">' +
                        '<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell>' +
                        '</div>' +
                   '</div>';

var mycheckboxTemplate= '<div class="ui-grid-cell-contents" class="checkbox" style="text-align:center; margin-top:0px;" >' +
                            '<input type="checkbox" class="flat" ng-disabled="1" ng-model="row.entity.xACTIVE" >' +
                         '</div>';

I lost health over this, so I hope reading this can help someone in the future.

Upvotes: 1

ReyHielo
ReyHielo

Reputation: 31

So after 2 days trying to kill myself over this I found a workaround. Though still not 100% what I was looking for.

I added a the ng-class with the color options to the cellTemplate. But here I had to write new custom styles withou the "ui-grid-cell-contents" tag. So basically I have all that stuff duplicated.

Yet the styling is not acurate because the background color does not fill the whole cell.

I also considered using cellClass but couldnt make it work.

Upvotes: 1

Related Questions