Resize of grid

Posted by: mark.nebrat on 6 December 2017, 7:02 pm EST

    • Post Options:
    • Link

    Posted 6 December 2017, 7:02 pm EST

    Hello

    I’ve tried to add a resize option to whole grid by adding the following css options

    to class:

    
    	resize: both;
        	overflow: auto;
    
    

    This working perfect on simple div but was disabled on wj-flex-grid.

    How can I resize a whole grid (dynamically change max-height property)?

    Best Regards,

    Mark Nebrat

  • Posted 7 December 2017, 1:02 am EST

    Hi Mark,

    You can apply above CSS with padding :5px; on host element. Please refer to the code snippet for the same.

    <div id="flex" style="max-height:auto;overflow:auto;resize:both;padding:5px;"></div>
    

    ~Manish

  • Posted 7 December 2017, 3:53 am EST

    Hello

    I’ve added ccs but sometimes I see two scroll bars or empty space after last column/row.

    Could you please fix my code?

    Thanks in advance.

    This is the code:

    HTML:

    
    <div id="flex" style="max-height:auto;overflow:auto;resize:both;padding:5px;height:150px;width:500px">
        
    <wj-flex-grid *ngFor="let dataCollection of dataCollections;index as i;" [itemsSource]="dataCollections[i]">        
      <wj-flex-grid-filter #filter ></wj-flex-grid-filter>
      <wj-flex-grid-column [header]="'Country'" [binding]="'country'" [width]="'*'"></wj-flex-grid-column>
      <wj-flex-grid-column [header]="'Date'" [binding]="'date'"></wj-flex-grid-column>
      <wj-flex-grid-column [header]="'Revenue'" [binding]="'amount'" [format]="'n0'"></wj-flex-grid-column>
      <wj-flex-grid-column [header]="'Active'" [binding]="'active'"></wj-flex-grid-column>
    </wj-flex-grid>
    </div>
    
    

    TS:

    
    import * as wjcCore from 'wijmo/wijmo';
    import * as wjcGrid from 'wijmo/wijmo.grid';
    import * as wjcGridFilter from 'wijmo/wijmo.grid.filter';
    
    import { Component, EventEmitter, Input, Inject, enableProdMode, NgModule, ViewChild } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { CommonModule } from '@angular/common';
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    import { BrowserModule } from '@angular/platform-browser';
    import { DataSvcService } from '../data.svc.service';
    
    @Component({
      selector: 'app-wg',
      templateUrl: './wgrid.component.html',
      styleUrls: ['./wgrid.component.css']
    })
    
    export class WGridComponent {
      numOfGrids=1;
      
      dataCollections = [];
      countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
      count = 301;
      constructor() {
        for(let i=0;i<this.numOfGrids;i++){
          const wijmoArray = new wjcCore.ObservableArray();
          this.dataCollections.push(new wjcCore.CollectionView(wijmoArray));
          this.init(8, wijmoArray);
        }
    
        // setInterval(() => {
        //   this.dataCollections.forEach((dataCollection: wjcCore.CollectionView)=>{
        //     this.count++,
        //     this.getData(this.count, dataCollection.items);
        //     dataCollection.refresh();
        //   });
        // }, 1000);
    
      }
    
      public init(count: number, data: any[]) {
        for (var i = 0; i < count; i++) {
          this.getData(i, data);
        }
        return data;
      }
    
      getData(i: number, data: any[]) {
        data.unshift({
          id: i,
          country: this.countries[i % this.countries.length],
          date: new Date(2014, i % 12, i % 28),
          amount: Math.trunc(Math.random() * 10000),
          active: i % 4 == 0
        });
        return data;
    
      }
    
    }
    
    

    Best Regards

    Mark Nebrat

  • Posted 10 December 2017, 8:58 pm EST

    Hi Mark,

    This is because of the “height:150px;width:500px” properties set in style tag. These properties set the FlexGrid height and width initially and on resizing FlexGrid two scrollbars get added.

    You can place FlexGrid within a resizable div and change FlexGrid width and height on wrapper div resizing by setting

    grid.hostElement.style.width
    and ```

    grid.hostElement.style.height

    
    ~Manish
  • Posted 12 December 2017, 6:18 pm EST

    Thank you very much, I’ll try it

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels