Flexgrid size issue

Flexgrid size issue

Posted by: parmarkinjalk on 5 February 2020, 11:52 pm EST

• 

  parmarkinjalk

  • Post Options:
  • Link
    Copy

  Posted 5 February 2020, 11:52 pm EST - Updated 3 October 2022, 5:39 pm EST

  Hi Team,

  I am displaying a grid using flex grid but the grid is smaller than the space available. So there is a wide empty space on the right side of the grid. How do I make it take the entire available space . Also the available space changes because I have another

  to the grids left which the user can Hide or show. so i want the grid to take the entire available space as the space changes. I have attached the screen shot.

  
  <div class = "row">
        <div class="col-2" [ngClass]="(showorhidestyle)? 'show': 'hide'" #filtersection>
            <span>4</span>
        </div>
        <div class="col-10">
            <div>
              <wj-collection-view-pager
            headerFormat="Page {currentPage:n0} of {pageCount:n0}"
            [cv]="source">
        </wj-collection-view-pager>
          <span>{{currentresultcount}} Documents of {{totalResultCount}} Loaded</span>
              <wj-flex-grid [itemsSource]="source" [frozenColumns]="1" #grid >
                <wj-flex-grid-filter (filterApplied)="cntFilter.updateEditor()" #gridFilter>
                </wj-flex-grid-filter>
                <wj-flex-grid-column
                [width]="'3.5*'"
                  header="Document Name"
                  binding="documentNm" [isReadOnly]="true">
                  <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item">
                    <a href="#" (click)="linkClick(item)">{{item.documentNm}}</a>
                  </ng-template>
                </wj-flex-grid-column>
                <wj-flex-grid-column
                [width]="'2.5*'"
                  header="Sub-Type"
                  binding="documentSubTypeCd.code">
                </wj-flex-grid-column>
                <wj-flex-grid-column
                [width]="'1.5*'"
                  header="Format"
                  binding="fileExtension"
                  >
                </wj-flex-grid-column>
                <wj-flex-grid-column
                [width]="'2.5*'"
                  header="Last Modified By"
                  binding="documentDate">
                </wj-flex-grid-column>
                <wj-flex-grid-column
                [width]="'2.5*'"
                  header="Coverage"
                  binding="products[0].coverageCd.code">
                </wj-flex-grid-column>
                <wj-flex-grid-column
                [width]="'1.5*'"
                  header="AR"
                  binding="clientReadyIn">
                </wj-flex-grid-column>
              </wj-flex-grid>
          </div>
      </div>
    </div>
  

  

  1897×401 26.6 KB

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 7 February 2020, 2:18 am EST

  Hi Kinjalk,

  You may use the Flexbox display for the container of these 2 divs. The FlexGrid’s div will take 65% width when the second div is visible else it will take the whole width. Please refer to the code snippet below:

  In HTML:

  <div class="container">
  	<wj-flex-grid class="main-grid" [itemsSource]="source">
  		<wj-flex-grid-column header="Country" [width]="'*'" binding="country"></wj-flex-grid-column>
  		<wj-flex-grid-column header="Date" [width]="'*'" binding="date"></wj-flex-grid-column>
  		<wj-flex-grid-column header="Amount" [width]="'*'" binding="amount"></wj-flex-grid-column>
  	</wj-flex-grid>
  	<div [style.display]="displaySecondDiv ? 'block' : 'none'" class="custom-div">Second Div</div>
  </div>
  

  In CSS:

  .container {
    display: flex;
    border: 2px dotted darkblue
  }
  
  .main-grid.wj-flexgrid {
    max-height: 500px;
    flex: 1 0 65%;
  }
  
  .custom-div {
    height: 200px;
    width: 400px;
    border: 2px solid black;
    flex: 1;
  }
  

  https://stackblitz.com/edit/angular-ax4w4m

  Regards,
  
  Ashwin

• 

  parmarkinjalk

  • Post Options:
  • Link
    Copy

  Posted 10 February 2020, 2:36 pm EST

  Hi Ashwin,

  Thanks for the answer. Could you please modify the code so that instead of the grid changing the width of the column based on the second div, if the second div is visible the grid has a horizontal scroll and the width of the column remains the same. Thanks.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 11 February 2020, 2:04 am EST

  Hi Kinjalk,

  If you want that the width of the FlexGrid should remain the same, then you will need to explicitly set the width of the flexgrid and each of the columns. Please refer to the sample below:

  https://stackblitz.com/edit/angular-pzrqxy

  ~regards