Flexgrid - Vue 2- How to use autoSizeColumns

Flexgrid - Vue 2- How to use autoSizeColumns

Posted by: daryn.holmes on 30 October 2017, 3:50 am EST

• 

  daryn.holmes

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 30 October 2017, 3:50 am EST

  Hi,

  Does ‘autoSizeColumns’ work with the Vue 2 version?

  Where should I call it?

  Should it set the width of each column to the size of the text in the column?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 30 October 2017, 10:30 pm EST

  Hi Daryn ,
  
  Yes, the autoSizeColumns method will work with vue2 too.
  
  You need to call autoSizeColumns from event or method once FlexGrid is initialized. You can use initialized event or loadedRows event for the same.

  ~Manish

• 

  daryn.holmes

  • Post Options:
  • Link
    Copy

  Posted 31 October 2017, 12:02 am EST

  Thanks Manish,

  Could you give me an example?

  I need to call autoSizeColumns after I have loaded data.

  In my template I have:

  <wj-flex-grid
          ref="fg"
          id="grid"
          :items-source="cells"
          :initialized="initGrid"
          key-action-tab="Cycle"
          :allow-sorting="false"
          :allow-add-new="false"
          allow-dragging="None"
          :auto-generate-columns="true"
          :item-formatter="itemFormatter"
          :pasting-cell="onPastingCell"
          headers-visibility="All"
        >
  

  Then in the Vue mounted method I load the data, and call:

  this.$refs.fg.autoSizeColumns(undefined, undefined, false, 20)
  

  I then get

  this.$refs.fg.autoSizeColumns is not a function
  

  this.$refs.fg is an object with many of the flexgrid properties on it, however it does not have autoSizeColumns on it.

  Do you know how to resolve this?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 31 October 2017, 5:12 pm EST

  Hi Daryn,
  
  You may refer to the FlexGridIntro sample’s Cell Freezing section that depicts how control attribute can be used to get FlexGrid reference.
  
  You can also get FlexGrid reference using getControl method, please go through second code snippet for grouping section.

  http://demos.wijmo.com/5/vue2/flexgridintro/flexgridintro/

  ~Manish