Get number of visible rows

[William Morgenweck]

I have a grid that does not use paging but is in a scroll-able div.  I would like to know the number of rows in the grid that are visible.  I know I can query against the data source but If I filter I would like the filtered count.  I have created a record navigation pane that when a row is selected additional details are provide.  My record navigation pane has a next and previous with a first and last button.  I need to know how many records so I can display record number: 4 of 15 or 4 of 500.

       let rows = this.$refs.reportGrid.ej2Instances.getSelectedRowIndexes();

       let index = rows[0];

      switch (arg) {

        case "first":

          this.$refs.reportGrid.ej2Instances.selectRow(0, true);

          break;

        case "next":

          this.$refs.reportGrid.ej2Instances.selectRow(index + 1, true);

          break;

        case "previous":

          this.$refs.reportGrid.ej2Instances.selectRow(index - 1, true);

          break;

        case "last":

          this.$refs.reportGrid.ej2Instances.selectRow(0, true);

          break;

      }

Thanks

[Thavasianand Sankaranarayanan]

Hi William, 

 

Greetings from Syncfusion support. 

 

Query: Get number of visible rows 

 

We have validated your query and you want to get the number of visible rows in the Grid. You can achieve your requirement by using getRows method of the grid. Here, we have prepared a sample based on your code snippets. Find the below code snippets and sample for your reference. 

 

[code snippets] 

<template> 

    ... 

</template> 

 

<script> 

... 

export default { 

  ... 

 methods: { 

    btnClick(args) { 

      var buttonText = args.target.innerText; 

      let rows = this.$refs.grid.ej2Instances.getSelectedRowIndexes(); 

      let index = rows[0]; 

      let lastIndex = this.$refs.grid.ej2Instances.getRows().length - 1; 

      switch (buttonText) { 

        case "FIRST": 

          this.$refs.grid.ej2Instances.selectRow(0, true); 

          break; 

        case "NEXT": 

          this.$refs.grid.ej2Instances.selectRow(index + 1, true); 

          break; 

 

        case "PREV": 

          this.$refs.grid.ej2Instances.selectRow(index - 1, true); 

          break; 

 

        case "LAST": 

          this.$refs.grid.ej2Instances.selectRow(lastIndex, true); 

          break; 

 

        default: 

          console.log(); 

      } 

    } 

  }, 

}; 

</script> 

... 

 

Sample: https://codesandbox.io/s/buttonclickpagingvue-n70bv 

Please get back to us if you need further assistance. 

Regards, 

Thavasianand S.