What is the best method to retrieve the filtered rows in ui-grid?

With the use of ui-grid, I am aiming to retrieve a complete list of all the filtered data rows utilizing the filter function.

In the provided plunker example, I originally had 500 items in the dataset which got filtered down to 61. Now the question is how can I access those 61 entities?

Check out the plnkr example here!

The code snippet below only captures the rows that are visible on the screen:

var _renderedRows = $scope.gridApi.grid.renderContainers.body.renderedRows;

Upon clicking the button at the bottom of the plunkr link, it displays the number of filtered rows, providing us with a count of 14 rather than the actual count of 61. This method is effective when dealing with 14 or fewer filtered entities, as their object details can be accessed from above. However, there doesn't seem to be any direct property in the grid component that exposes the full list of filtered rows.

Considering this, what would be the most efficient way to obtain the complete list of 61 entries so they can be passed into another function for further processing?

Answer №1

Utilize the PublicApi to retrieve the current number of visible rows

$scope.filteredRows = $scope.gridApi.core.getVisibleRows($scope.gridApi.grid);

Check out the latest version of this plnkr example (Hint: Remember to click the "Get filtered rows" button)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The array is not being updated with the new value entered in the input field for "address"

Currently, I have a table that loops through an array and displays the content in a list format. The address field is displayed as an input with the value set to :value="location.address". The input fields are initially disabled, but when the ed ...

JavaScript tabs that smoothly fade in and out

I'm currently working on implementing tabbed content, but I'm struggling with getting the fade effect to apply to the content itself when clicked, rather than just the tab headers. Check out my demo here $('#tab-wrapper li:first').add ...

"Learn how to implement a dropdown menu using Vue.js and Quasar on Cloud Firebase

Hey there, I'm trying to figure out how to retrieve and display a Firebase array in a dropdown using Vue js. Here's what I currently have: I've read some of your articles before, but I'm having trouble displaying the data from an array ...

Can you provide guidance on how to use Javascript to submit a form specifically when the input name is labeled as "submit"?

Query: How can I use Javascript to submit a form when one of the form inputs is named submit? Scenario: I need to send users to another page using a hidden HTML form. Unfortunately, I cannot modify the names of the inputs in this form because it needs to ...

AngularJS: Reset all numeric text boxes to blank when clicked/tapped in Kendo

I am facing a challenge in AngularJS where I have an uncertain number of NumericTextBoxes that are generated using ng-repeat: <input kendo-numeric-text-box k-format="'c2'" class="form-control" k-min="0" k-max="10000000" k-ng-model ...

Reorganize nested JSON arrays

After receiving a Json array from a web service, I encountered a structure where this array contains other arrays. My goal is to transform this multi-level array into a single-level array in order to create an HTML table. For example, consider the followi ...

Issue: ng-model not functioning properly with typeahead functionality

I've encountered some issues with ngModel while using angular's typeahead feature. Below is the HTML code for my typeahead setup: <input type= "text" ng-model= "symbol" placeholder= "begin typing" typeahead= "hit.message for ...

Hide specific content while displaying a certain element

Creating three buttons, each of which hides all content divs and displays a specific one when clicked. For instance, clicking the second button will only show the content from the second div. function toggleContent(id) { var elements = document.getEl ...

angularJs ng-hide using the $index value within an ng-repeat directive

I have a list of items that need to be displayed with serial numbers. I tried using $index with ng-repeat, but when an element is hidden, the index increases unexpectedly. The code I attempted is as follows: <div ng-repeat="itemRow in salesitem" class ...

What is the best way to remove input focus when clicked away?

I am in the process of developing an application using next js, and I need assistance with designing a search field. The primary functionality I am looking to implement is displaying search suggestions when the user starts typing, but hiding them when the ...

Retrieve information from a JSON file containing multiple JSON objects for viewing purposes

Looking for a solution to access and display specific elements from a JSON object containing multiple JSON objects. The elements needed are: 1) CampaignName 2) Start date 3) End date An attempt has been made with code that resulted in an error displayed ...

Error message: Cannot establish the attribute 'next' on the string '/:id'

I encountered an error while trying to develop an API for a travel company. The error message "TypeError: Cannot create property 'next' on string '/:id'" keeps popping up, even though all the necessary functions are already created. con ...

"Utilizing AJAX for Data Retrieval in a Form with Dynamically Generated

Hey there, I'm trying to figure out how to make my ajax data call dynamic. Here's what I've attempted: var opt_name = $(".NAME").data('opt_name'); var opt_business = $(".BUSINESS").data('opt_business&ap ...

Blogger's homepage URL obtained using JSON data

Please note: I don't have a background in programming. I'm making an effort to learn as much as possible. As I was reading (and later experimenting with) the solution to this query, it dawned on me that having the same information in JSON form ...

Convert a date from the format of YYYY-MM-DD HH:MM:SS to MM-DD-YYYY using Javascript

Looking to transform YYYY-MM-DD HH:MM:SS into MM-DD-YYYY For instance: Given a date string in the format: 2013-06-15 03:00:00 The goal is to convert this string to 06-15-2013 using JavaScript. Is there a library available for this task, or should I rely ...

What is the best way to utilize a variable across all functions and conditions within an asynchronous function in Node.js?

I need to access the values of k and error both inside and outside a function. Initially, I set k to 0 and error to an empty string, but unexpectedly, the console prints out "executed". var k = 0; var error = ""; const { teamname, event_name, inputcou ...

Experimenting with ngModel in a Jasmine test suite

I've created a directive that generates input fields and connects them to the scope using ngModel. When a user uses this directive in the HTML file like so: <div tk-quick-form="formStructure" form-data="formData" id="main_form" ></div> a ...

Exploring ways to create additional file upload fields with distinct names through JavaScript

My latest project involved creating a button that allows users to add a file upload field, a separate button to remove a file upload field, and a counter to keep track of the total number of file upload fields. However, it appears that the fields are not b ...

Having trouble with the functionality of a simple jQuery toggle menu on mobile?

I am experiencing an issue with a simple toggle menu that utilizes jQuery's on: tap feature, but it is not functioning as expected: <nav id="mobile-nav"> <ul> <li>Item 1</li> <li>Item 2</li> ...

Fade-in a new, revised text after fading-out the original text in ReactJS

I have a bunch of p elements that I'd like to cycle through, fading in one at a time and then replacing it with the next. Here is the jQuery example on CodePen: https://codepen.io/motion333/pen/EBBGVM Now, I'm attempting to achieve the same effe ...