Hiding dynamic column and adjustment of width of dynamic columns

Hiding dynamic column and adjustment of width of dynamic columns

Posted by: nivishapanwar on 4 November 2020, 10:01 am EST

• 

  nivishapanwar

  • Post Options:
  • Link
    Copy

  Posted 4 November 2020, 10:01 am EST

  Hello,
  
  Issue 1:
  
  After binding the json data into the grid, 4 columns are visible, but according to the UI only 2 columns should be visible.
  
  Issue 2: How can we adjust the width of dynamic columns
  
  Issue 3: How can we hide the column name of the dynamic column

  Can I please get some help regarding these issues.

  Thanks

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 5 November 2020, 4:47 am EST

  Hi nivishapanwar,

  Can you let us know what exactly are you referring to when you say according to UI? If the json data contains 4 keys, then 4 columns will be created. You can either hide the columns are generating them or manually provide the column layout.

  flexGrid.columns.getColumn(`<column binding>`).visible = false;
  

  Regarding issue #2, you can get the reference of the column and set its width property accordingly:

  flexGrid.columns.getColumn(`<column binding>`).width = 100;
  

  Regarding issue #3, you can hide the name by setting the header property to an empty string (make sure to add a space instead of empty string):

  flexGrid.columns.getColumn(`<column binding>`).header = " ";
  

  Let me know if you need any additional help.

  Regards,
  
  Ashwin

• 

  nivishapanwar

  • Post Options:
  • Link
    Copy

  Posted 5 November 2020, 7:20 am EST

  Hi Ashwin,

  Thank you for the help.
  
  In the front end I have to show only 2 columns , but the json data is having 4 columns, so when I bind the data in the grid, all 4 columns are visible. So I have to hide 2 columns.

  Regards,
  
  Nivisha

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 5 November 2020, 2:12 pm EST

  You can resolve this in two ways, either generate the columns automatically and then hide them or manually generate the columns for only two properties. Please refer to the sample link below for more clarification:

  https://stackblitz.com/edit/js-jahmxz

  ~regards