Ways to update a row in ui-grid?

I am attempting to refresh only the specific row that has been edited in the ui-grid without refreshing the entire table.

My scenario involves editing a row in the grid, triggering a rest call, and then updating only that particular row in the grid.

Upon successful rest call:

   $http.put(representation.getLink('reports').href, {
         changes: manualModifications,
         comment: comment
    }).success(function(updatedEntities) {
        for (var i = 0; i < updatedEntities.length; i++) {
           angular.forEach(controller.gridOptions.data, function(entity) {
                if (updatedEntities[i].factId === entity.factId) {
                    entity.value = updatedEntities[i].value;
                    entity.dataOrigin = updatedEntities[i].dataOrigin;
                    entity.isDirty = false;
                }
           });
        }
        controller.gridApi.core.refresh();
   });

Another option that works is using:

controller.gridApi.core.refreshRows();

which updates only the rows within the grid, but still refreshes all rows.

I have checked the grid api documentation but I could not find a solution.

I believe that since I have a reference to a specific grid row inside the forEach loop, it should be possible to update just that individual row.

Answer №1

If you are making a REST call in a different way (such as with JQuery or XHR directly), you might need to trigger $scope.$apply() in order to properly integrate it into the Angular digest cycle.

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

How can I assign a reference to a List component using react-virtualized?

Could someone help me with referencing the scrollable List in react-virtualized using a ref? I'm having trouble as my ref keeps showing its current attribute as undefined. Any tips on how to properly use a ref with react-virtualized List? This is wha ...

Leverage variable as an expression when utilizing ng-include

Here is an example of working code: <div ng-include src="'Test.html'"></div> However, this code does not work: <div ng-include src="ctrl.URL"></div> (When ctrl.URL is set to "Test.html"). I have also tried setting it t ...

retrieve the value of a textarea element from an HTML table

Is there a way to extract data from a nested table's textarea using the row index? I attempted the following code snippet but it did not work. var note = document.getElementById($index).cells[3]; var y = document.getElementsByTagName("textarea").valu ...

Clearing existing HTML content in the TR body

I've been struggling with a Jquery/Ajax call that updates cart details. Currently, I can't seem to clear the existing HTML content in the cart-body (tablebody) even though the ajax request adds all the items to the cart successfully. The code sni ...

Forwarding requests via middleware in next.js 13 AppDir: true

I am currently working on implementing a redirect feature in next.js 13 when the jwt back-end is not received. This is being done with the appdir activated. This is the code in my middleware.ts file: import { NextResponse } from 'next/server' im ...

open a new window with a reference based on the name

In order to obtain a reference to the currently open window, I utilize the following code: var refWindow = window.open("mypage1", "name_mypage"); If I wish to close the window, I simply use this command: refWindow.close(); When I refresh the screen (by ...

Is it advisable to approve automatic pull requests initiated by dependabot for updating the yarn.lock file?

I've recently received some pull requests from "dependabot" in a JavaScript library I am working on, like the one found here. While I appreciate the effort to update dependencies to newer versions, it seems strange that each PR only updates the versi ...

Platform designed to simplify integration of high-definition imagery and scalable vector illustrations on websites

In the ever-evolving world of technology, some clients support advanced features like svg while others do not. With the rise of high resolution devices such as iPhone 4+ and iPad 3rd gen., it has become crucial to deliver graphics that can meet these stand ...

Authenticating with passportjs using a Google Apps email address for verification

I am currently experimenting with using Passport.js along with a Google Apps email ID. I have successfully been able to authenticate using a gmail.com email ID, however, I am facing challenges when attempting to authenticate if the email ID is associated w ...

Retrieve information from an express server using the fetch API

I am attempting to use the alert function to display a variable string in Express's .get() method and then send it using res. I want the alert to show "I am working fetch". This is my server.js var express = require('express'); var app = e ...

Canvas only draws outside the table, with the exception of the first one

I am facing an issue with placing multiple signature pads inside table cells. Only the first canvas gets drawn, while the others remain blank. I have checked the mouse/touch events. The events are triggered (up/down/move) and the draw function is called, ...

Having trouble submitting data to a NextJS API route?

I am currently working on a simple form within a NextJS page, where the data is being stored in state: const [bookingInfo, setBookingInfo] = useState({ name: "", email: "", phone: "", }); const handleChange = (e ...

Breaking down objects or arrays to extract specific values in React components

Some articles recommend using ES6 destructuring for React props & state as a best practice. For example: const { showModal, hideModal } = this.props; While I understand the benefits of cleaner code, I recently discussed with another developer who suggest ...

Steps to modify the servletRequest's content length within a filter

My main objective is to secure the POST body requests sent from my web application to my service by encrypting them. This encryption process takes place within a filter in my system. However, I've encountered an issue related to content length. When ...

Leveraging JQuery for activating an event with Bootstrap Scrollspy

I'm facing a challenge in capturing the Scrollspy event to execute a specific function. The Scrollspy feature is functioning correctly in terms of updating the active link on the navbar. However, I am struggling to capture the event for use in other p ...

Concerns arise with jQuery grid compatibility in Firefox browsers

I have found an interesting tutorial on draggable image boxes grid at this link. Although everything is functioning properly, I am encountering an issue with the drag function specifically on the home page when using Firefox. As a beginner in jQuery, I am ...

Issues with utilizing $http POST

I am a beginner in angular.js and I want to create a form with 2 number fields. When I click on submit, I need to send the data to the server using JSON for calculating the sum. For example, if I input 4 in the first field and 4 in the second field, it sho ...

"Vue.js: The Ultimate Guide to Event Management and Data Handling

I recently started learning Vue.js and I'm having some difficulty with my coding exercises: The task is to have a menu button that opens a dropdown box when clicked, and when any selection is made, it should go back to the menu button. index.js cons ...

Why does the Vue router sometimes refresh the page instead of properly navigating to it? Can you spot the difference between these two code examples?

I am encountering an issue while trying to click on a "checkout" button that is supposed to send cart data to a backend and redirect me to a URL generated by the backend. Despite receiving a valid URL, my code is not functioning correctly. When I attempt ...

Having trouble getting CSURF (CSRF middleware) to function properly with XSRF in AngularJS

Struggling to get the CSRF middleware working with Express and Angular? You're not alone. Despite various guides on the internet, the process remains unclear. Express 4.0 uses csurf as its CSRF middleware, while Angular requires setting X-XSRF-TOKEN. ...