Scrolling my scroll bar according to the header

Scrolling my scroll bar according to the header

Posted by: mehmetkaya on 22 February 2024, 7:28 pm EST

• 

  mehmetkaya

  • Post Options:
  • Link
    Copy

  Posted 22 February 2024, 7:28 pm EST - Updated 22 February 2024, 7:33 pm EST

  Hello,
  
  I want to scroll my scrollbar so that the header I want is at the top in VUE. To give an example, I will add a button and when I click on this button, I want my scrollbar to scroll so that the Vendor header is the first column of my table.

  

  1495×93 8.65 KB

• 

  mehmetkaya

  • Post Options:
  • Link
    Copy

  Posted 22 February 2024, 9:52 pm EST - Updated 22 February 2024, 9:57 pm EST

  AFTER
  
  

  

  1495×93 8.96 KB

• 

  mehmetkaya

  • Post Options:
  • Link
    Copy

  Posted 25 February 2024, 6:44 pm EST

  Can you help me for VUE

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 25 February 2024, 7:49 pm EST

  Hello,

  To achieve the desired behavior, you can use the getCellBoundingRect() method on the columnHeaders gridPanel to retrieve the bounding rectangle of the desired column header cell. Then, you can set the scrollPosition property of FlexGrid to scroll to that column. Please refer to the code snippet and sample link below, which demonstrate the same:

  scroll() {
        if (this.flex) {
          // get cell rect, adjust scrollPosition.x to bring it to the left
          var rc = this.flex.columnHeaders.getCellBoundingRect(0, 'amount', true);
          this.flex.scrollPosition = new wjCore.Point(
            -rc.left,
            this.flex.scrollPosition.y
          );
        }
      },

  Sample link: https://stackblitz.com/edit/vue-example-1-ix6zbs?file=src%2FApp.vue
  
  Wijmo Demo link: https://developer.mescius.com/wijmo/demos/Grid/PagingScrolling/ScrollingandViewRange/vue

  Regards