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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Get number of visible rows

Thread ID:

Created:

Updated:

Platform:

Replies:

149370 Nov 23,2019 03:28 AM UTC Nov 26,2019 06:13 AM UTC Vue 1
loading
Tags: Data Grid
William Morgenweck
Asked On November 23, 2019 03:28 AM UTC

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 [Syncfusion]
Replied On November 26, 2019 06:13 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon