We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Get number of visible rows

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



1 Reply

TS Thavasianand Sankaranarayanan Syncfusion Team November 26, 2019 01:13 AM

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> 
... 
 

Please get back to us if you need further assistance. 

Regards, 
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon