angular ui.grid column spanning

Question

How to achieve the column spanning in UI-Grid, for row in-between. Such rows can be assorted with a column with Column spanning can be in assorted pattern.

as shown below

enter image description here

c0bra c0bra · Accepted Answer · 2015-04-09T15:36:01

It's not the prettiest, but the way I would go about this is by doing a custom row template with an ng-if in it. If your row has a vehicle assigned, show the columns as normal, if it doesn't, show the first column and then your button.

<div>
  <!-- normal rows with car -->
  <div ng-if="row.entity.hasCar">
    <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>

  <!-- first row and button with no car -->
  <div ng-if="!row.entity.hasCar">
    <div class="no-car-container">
      <div ng-repeat="(colRenderIndex, col) in [colContainer.renderedColumns[0]] track by col.colDef.name"
        class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }"
        ui-grid-cell></div>

      <div class="ui-grid-cell-contents">
        <div class="no-car">
          <button type="button" class="btn">Assign a vehicle</button>
        </div>
      </div>
    </div>
  </div>
</div>

Then I would add some a special cell template and some custom CSS to get everything laid out like you want.

Here's a very close working plunker: http://plnkr.co/edit/OTIu84JxiUnInr8w8XFT?p=preview

angular ui.grid column spanning

1 Answers