FlexGrid Columns disappear when resized to width greater than Parent Container

FlexGrid Columns disappear when resized to width greater than Parent Container

Posted by: peter_murray on 17 October 2019, 3:23 pm EST

• 

  peter_murray

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 17 October 2019, 3:23 pm EST - Updated 3 October 2022, 6:56 pm EST

  Hello,

  I am having an issue with flex grid where if a column is resized to a width greater than that of the parent container, any and all columns that were to the right of it become invisible, as in they can no longer be seen on screen. If you look in the developer console as well, you will see that the html representing those columns can no longer be seen, as if they never existed in the first place.

  Lastly, the column that was being resized can no longer be resized until the site is refreshed.

  The desired behavior is that all columns should remain accessible through horizontal scrolling. Does there exist a fix for this problem?

  Thanks!
  
  

  

  657×1072 2.67 KB

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 18 October 2019, 12:36 am EST

  Hi,

  We are sorry but we were not able to replicate the issue at our end. Please refer to the sample below that we used to replicate the issue:

  https://stackblitz.com/edit/js-7x2bzn

  Feel free to modify the sample so that it reproduces the issue.

  Also, could you please try adding the following CSS rule and let me know if this solves the issue?

  
  .wj-flexgrid div[wj-part="root"] {
   	overflow: scroll;
  }
  

  Regarding columns not shown in the console:

  The reason for that is FlexGrid virtualizes the cells. Meaning that if a column is not visible on the DOM, then it will not appear in the Elements part of the console.

  Regards,
  
  Ashwin

• 

  peter_murray

  • Post Options:
  • Link
    Copy

  Posted 22 October 2019, 12:44 pm EST

  Sorry for the delay, but the solution you posted did not work. I have a sample project that I can zip up and share with you, which also has the same problem. Would you like to review this project?

• 

  peter_murray

  • Post Options:
  • Link
    Copy

  Posted 22 October 2019, 1:04 pm EST

  flexgriddemo.zip

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 23 October 2019, 1:06 am EST

  Hi Peter,

  You could avoid the issue by setting the minWidth of each of the columns:

  for (let i = 0; i < info.columns.length; i++) {
  	this.flex.columns.push(
  		new wjGrid.Column({
  			binding: info.columns[i].bindingKey,
  			header: info.columns[i].label,
  			width: "*",
  			minWidth: 20
  		})
  	);
  }
  

  You may refer to the updated sample attached.

  ~regards

  flexgriddemo_updated.zip

• 

  peter_murray

  • Post Options:
  • Link
    Copy

  Posted 23 October 2019, 1:44 pm EST

  That solved it. Thanks for your help!