FlexGrid: Enable horizontal scrolling when cursor is over column headers

FlexGrid: Enable horizontal scrolling when cursor is over column headers

Posted by: matt_baker on 21 April 2021, 3:22 pm EST

• 

  matt_baker

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 21 April 2021, 3:22 pm EST

  See https://stackblitz.com/edit/vue-3gee2y as an example.

  We are wanting to use the Column header row as a way to choose filters on a Collectionview, WITHOUT seeing the rows of data. The number of columns is large (30+ so far) and when the FlexGrid is tall enough to show data, the columns are scrollable left-to-right, IF I begin the horizontal scroll by placing my cursor in the data, NOT the headers.

  Is there a way to make the column headers respond to horizontal scrolling? I am also considering using a MultiRow grid to “stack” the column headers together to prevent the need to scroll, but that requires more unrelated code changes to be practical at this time.

• 

  matt_baker

  • Post Options:
  • Link
    Copy

  Posted 21 April 2021, 3:26 pm EST

  See better example at https://stackblitz.com/edit/vue-nyzbpk

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 25 April 2021, 8:57 pm EST

  Hi,

  Thank you for sharing the sample.
  
  We are sorry but it is not possible to scroll from the headers area. What we could do is hide the column header and format the first row as header and display the filter icons. Please refer to the following sample which demonstrates the same and let us know if you face any issues:
  
  https://codesandbox.io/s/wijmo-vue-forked-z15f0?file=/src/components/HelloWorld.vue

  Regards
  
  Sharad