Wijmo flexgrid Multilined data viewing issue

Wijmo flexgrid Multilined data viewing issue

Posted by: teenu.k on 20 April 2020, 7:32 am EST

• 

  teenu.k

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 20 April 2020, 7:32 am EST

  Hi,
  
  I am using wijmo flexgrid with angular 8.
  
  below is my HTML code snippet.

  <wj-flex-grid #flex class=“flexgridClass” [selectionMode]=“‘Row’” [itemsSource]=“myData” [itemFormatter]=“itemFormatter” >
  
  <wj-flex-grid-column *ngFor=“let s_col of allTableColumn; let i = index” [visible]=“s_col.visible” [allowSorting]=“s_col.allowSorting”
  
  [header]=“s_col.text” [binding]=“s_col.headerbinding” [width]=“s_col.width” [dataType]=“s_col.datatype” [multiLine]=“s_col.multiLine”
  
  [format]=“s_col.format” align=“left”>
  
  </wj-flex-grid

  for some columns, values are shown in multilned ( used ‘\n’ for showing data in multi lined.).but when we viewing the grid only first line can be shown.
  
  when we edit the cell I can view all data in the cell.

  how can I see all the lines in the cell content when loading the grid?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 21 April 2020, 1:04 am EST

  Hi,

  By default, the height of the rows is 35px and when you are adding the multiline data, the data in next line is not being displayed due to the small height of the rows.

  To resize the rows, in the ngAfterViewInit callback, get the reference of the flexgrid and call the autoSizeRows method.

  ngAfterViewInit() {
  	this.flex.autoSizeRows();
  }
  

  This will automatically resize the rows of the FlexGrid according to its data.

  You can also specify a default size of the rows:

  ngAfterViewInit() {
  	this.flex.rows.defaultSize = 50;
  }
  

  autoSizeRows: https://www.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#autosizerows

  Regards,
  
  Ashwin

• 

  teenu.k

  • Post Options:
  • Link
    Copy

  Posted 21 April 2020, 11:06 am EST

  Hi,
  
  As per your reply, I tried autoSizeRows() method but it didn’t work for me.

  Following is my code snippet.

  • “In html I added”

  <wj-flex-grid #flex class=“flexgridClass” [selectionMode]=“‘Row’” [itemsSource]=“myData” >
  
  <wj-flex-grid-filter #filter [filterColumns]=“filtrColumns” (filterChanging)=“filterChanging(filter,$event)” >
  
  <wj-flex-grid-column *ngFor=“let s_col of allTableColumn; let i = index” [visible]=“s_col.visible” [multiLine]=“s_col.multiLine”
  
  [allowSorting]=“s_col.allowSorting” [header]=“s_col.text” [binding]=“s_col.headerbinding” [dataType]=“s_col.datatype” [format]=“s_col.format” align=“left”>
  
  
  
  

  • "In component.ts file "

  allTableColumn= [{ allowSorting: false, headerbinding: ‘id’, text: ‘ID’, visible: true, datatype: ‘1’, width: ‘2*’ ,multiLine:false},
  
  { allowSorting: false, headerbinding: ‘referId’, text: ‘Reference’, visible: true, datatype: ‘1’, width: ‘2*’,true },
  
  { allowSorting: false, headerbinding: ‘createdDate’, text: ‘Creation Date’, visible: true, datatype: ‘4’, format: ‘YYYY-MM-DD’, width: ‘2*’,multiLine:false },
  
  { allowSorting: false, headerbinding: ‘typeCode’, text: ‘Transaction Type’, visible: true, datatype: ‘1’, width: ‘2*’,multiLine:false },
  
  { allowSorting: false, headerbinding: ‘description’, text: ‘Description’, visible: true, datatype: ‘1’, width: ‘2*’ ,multiLine:false},
  
  { allowSorting: false, headerbinding: ‘groupId’, text: ‘Group Ref’, visible: true, datatype: ‘1’, width: ‘2*’,multiLine:false }
  
  ];

  also used ngAfterViewInit() method.
  
  ngAfterViewInit() {
  
  this.flex.autoSizeRows();
  
  }

  for the Reference column sample data is like (Multilined)
  
  national_association_of_insurance_commissioners : 6789
  
  identi_identification_number : 8909

  but when the grid loaded i can only see full cell data only when editing the cell.

  Can you provide a working sample with these above code snippets? or can you suggest an option for solving the issue?

  Regards,
  
  Teenu.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 22 April 2020, 1:07 am EST

  Hi,

  In the column definition, you have set the multiLine property to false for each of the columns. Please change this to true. Also, to be multilined, the data should be spanned into multiple lines by using ‘\n’ character.
  
  Please make these changes and try to run the application again.
  
  Also, if ngAfterViewInit does not work, you can also use the initialized event. Please refer to the sample link below:

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

  ~regards