Adding external functionality to update the totalItems in angular-ui-grid

For my AngularJS ui-grid, I implemented external pagination following the guidelines provided at this link:

In the process, I update the totalItems field whenever a new page is received:

var getPage = function() {
// skipped some part
$http.get(url)
.success(function (data) {
  $scope.gridOptions.totalItems = 100;
  // updating grid object with data
});

};

The only deviation from the standard example is that I keep the gridOptions inside an object passed to my directive, which contains a grid within it:

// This line is called immediately after receiving a page of data from the server
$scope.gridObj.gridOptions.totalItems= response.TotalItems;

If I initialize this field before the grid is displayed on screen along with the configuration, it retains the value set initially and does not reflect the data received during runtime. However, changing it after calling my loading method results in ui-grid not picking up the change. If left uninitialized at startup, I am unable to assign any value later on.

How can I successfully modify the totalItems parameter for the ui-grid during runtime? Is there a way to manually trigger a grid update?

Answer №1

After some experimentation, I have discovered that setting the totalItems variable within a $timeout function is a satisfactory solution for now. It became necessary because despite ui-grid making updates, they were not aligning with my expectations.

Update: In my particular situation, I needed to display all filtered items across multiple pages, but there was no existing API for this purpose. As a temporary fix, I created an angular filter as shown below. Each GridRow object has a flag called 'visible' set to true when it has not been filtered out by any filters.

For instance:

angular.filter('renderableRows', function() {
  return function(allRows) {
    var renderables = [];

    angular.forEach(allRows, function(row) {
      if(row.visible) {
        renderables.push(row);
      }
    });

    return renderables;
  };
});

$timeout(function() {
  $scope.gridOptions.totalItems = $filter('renderableRows')($scope.gridApi.grid.rows).length;
});

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

express-session fails to remove sessions from mongodb

account.js (node.js part) const express = require("express"); const router = express.Router(); router.post("/logout", (req, res) => { console.log("session: ", req.session); req.session.destroy(); console.log("session: ", req.session); res.send ...

The functionality of window.event.target appears to be malfunctioning in the Firefox browser

I have been working on an angularjs application. We have implemented a functionality to display alerts for unsaved changes using window.event.target. Everything was functioning correctly in all browsers except for <code>Firefox. The error message w ...

Remove underscores from a project utilizing browserify

I am currently working on a npm project and trying to ensure it is browser-compatible with browserify. One of the dependencies in this project is underscore. In order to build the project using browserify without including underscore in the final file, I h ...

Change the default values for grid column configurations in Ext JS globally

The Ext.grid.column.Column class contains the following configurations: draggable (Default: true) sortable (Default: true) menuDisabled (Default: false) Is there a way to globally change the default values of these configurations for all grid columns i ...

Guide to setting a dynamic print style without affecting the screen media

In my report, there is a details section below. The screen provides instructions to view the details with a button that toggles the list's visibility. When printing the report, I only want the instructions to show if the list is visible. If the list ...

An object in typescript has the potential to be undefined

Just starting out with Typescript and hitting a snag. Can't seem to resolve this error and struggling to find the right solution useAudio.tsx import { useEffect, useRef } from 'react'; type Options = { volume: number; playbackRate: num ...

Troubles encountered when trying to display a Plotly OHLC plot using EJS and transferring data

I'm encountering an issue while trying to display a Plotly OHLC plot in my chart.ejs file with the variable result. Even after using EJS templating and <script> tags for logic, the plot fails to render. To address this, I created a separate file ...

Using a static function within a library's state function in NextJS is throwing an error: "not a function"

Inside a library, there's a special class known as MyClass. This class contains a static method named setData. The contents of the MyClass.js file are shown below: class MyClass { static DATA = ''; static setData(data) { MyClass ...

Angular's NgShoppingCart is designed in such a way that items stored in the localStorage are automatically cleared out

I am currently working on an Angular project using version 8.0.0. To integrate a shopping cart feature into my Angular project, I decided to incorporate the NgShoppingCart library by following the instructions provided here. After adding the library in m ...

Is there a way to verify the presence of a particular value in a list?

I need to validate the content of all li tags within a ul list. If any list item contains the text "None," then I want to append specific text to a div. If no li tag includes "None," then different text should be added to the div. Upon checking my code, I ...

Issue: Node.js Express unable to access static files when the route is nested more than one folder level deep.Resolution

Before we delve into the question, let me share with you the folder structure of my node.js express app: /home server.js index.html /app /routes public.js /public /css main.css In my server.js file, ...

Type the website address into the browser's address bar

Recently, I've been exploring the possibility of combining two ideas to navigate to a relative URL based on the current URL. While browsing this link, I came across the following code snippet: <script> function myFunction() { var x ...

Categorizing JavaScript objects based on a shared value

I have a query that retrieves location-based data from my database. After performing the query, I receive a collection of objects (which I consolidate into a single object and use console.log() to inspect its contents). Each object represents a user' ...

React: Incorporating .map for nested arrays. Ensure each child component within the list is assigned a distinct "key" property

I have an array called navMenuItems that contains data for building a navigation menu with links and link names. Each item in the array may also contain child links, similar to the mobile menu on https://www.w3schools.com/. However, I'm encountering a ...

Having trouble with closing the window on Mozilla and Chrome? Keep getting a scripting error message?

To close this window, click <a onclick="self.close();" href="#">here</a>. This is the code I am using. When I submit in Chrome and Mozilla, an error occurs. The error message is: "Script must not be allowed to close a window that was not o ...

Server-side node.js template merging for document files

Currently, I am on the lookout for a library that can assist me in merging a JSON object with a template (txt file) on the server side. It would be great if this library could also handle conditional statements such as if, greater than, equals, etc., as we ...

Data input via $_POST method during the submission of a web application is failing to

Having trouble with the login functionality in an EllisLab application framework. The data from the $_POST method is not being stored upon form submission, resulting in an error message. When using var_dump($POST), it shows array(0){}. View Error Screensh ...

Retrieve JSON information utilizing a specific value stored in the localStorage

After an extensive search online yielded no results, I decided to seek assistance here. This is what I have managed to gather so far: JSON I possess a JSON file containing various lists of words that require retrieval based on user input. The structure ...

Grunt Typescript is encountering difficulty locating the angular core module

Question Why is my Grunt Typescript compiler unable to locate the angular core? I suspect it's due to the paths, causing the compiler to not find the libraries in the node_modules directory. Error typescript/add.component.ts(1,25): error TS23 ...

Troubleshooting Axios NPM connectivity issue in Express.js

I have created an express.js route with the following code snippet: - const path = require("path"); const express = require("express"); const hbs = require("hbs"); const weather = require("./weather"); const app = express(); app.get("/weather", (req, ...