Canceling an edited row in Angular JS ng-grid to revert back to the original values displayed in ng-grid

Within my ng-grid, each row contains a button for editing and canceling. When the edit button is clicked, the data in the row can be modified. However, if I decide not to save the changes, I can simply click the cancel button. To achieve this behavior, I make use of the following AngularJS code snippet:

angular.copy(row.entity,$scope.data);

After making some edits to the data, I realize that I want to discard them and revert back to the original values. In such cases, clicking the cancel button should restore the grid to its original state. Could someone please advise on how to implement this functionality?

javascriptangularjsng-grid

Answer №1

At first, I attempted to replace the entire row of the ng grid with a single line of code:

row.entity = $scope.tempArray

Unfortunately, this approach did not work as expected. So, I decided to try replacing cell by cell instead.

To achieve this, I set up an array for temporary storage:

$scope.tempArray = {
data1:"",
data2:""
}

Within the edit function, I copied the row data into tempArray like so:

$scope.tempArray.data1 = row.entity.col1;
$scope.tempArray.data2 = row.entity.col2;

Then, in the cancel function, I reverted the row data back to its original state:

row.entity.col1 = $scope.tempArray.data1;
row.entity.col2 = $scope.tempArray.data2;

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

Converting Blob Data to JPG Image: A Step-by-Step Guide

Currently, I am utilizing croper.js to crop and save an image. However, the function that processes the cropped blob to convert the image format is not functioning correctly. cropper.getCroppedCanvas().toBlob(function (blob) { var formData = ...

javascriptjqueryimageblob

Which method is optimal for organizing tree categories and linking them to posts, as well as locating posts based on a selected category within a MERN stack

Currently, I am utilizing the MERN stack for my project development. The project involves a tree category structure as outlined below: {id: { type: Number }, parent_id: { type: Number }, name: { type: String }, sub: { type: Boolean }} For ...

javascriptnode.jsreactjsexpressmern

How to utilize PHP $_SESSION variables with jQuery for error handling and page redirections

I am currently working on a project where I need to access PHP session variables using jQuery in order to redirect users using jQuery instead of PHP. When a user logs in, a PHP script is executed to check their logged in and registered status in the databa ...

javascriptphpjquerysessionhttp-redirect

What is the method for determining the numerical worth of the px containers?

https://i.stack.imgur.com/0K2TD.png Total width of the bar is set to 500px, with the red box at a width of 150px, the yellow box at 200px, and the green box at 50px. CSS Styles: .box { float:left; width:150px; box-shadow:3px 3p ...

javascriptjqueryhtmlcss

Retrieving a nested variable in global scope using Node.js

How can I access the socket in the global scope with my NodeJS code below? io.on('connection', function (socket) { console.log('connection '+socket) socket.on("data",function(d){console.log('data from flash: ',d);}); ...

javascriptnode.jsscope

Developing with React, incorporating a map function within another map function is

I want to develop a basic multiplication table using React. Here's the code I have so far, where I'm attempting to iterate through an array: {array.map((num) => { return ( <tr> <th>{num}</th> {array.map((x) ...

javascriptarraysreactjsreact-native

Toggle the status of active to inactive instantaneously with the click of a

Incorporating DataTables with ajax using PHP CodeIgniter Framework has presented me with a challenge. I am struggling to toggle between Active and Inactive buttons seamlessly. My desired outcome: When the Active button is clicked, it should transition ...

javascriptphpajaxcodeigniterdatatable

Sending jQuery Selectors to a server-side function

How can I pass jQuery selectors to a Javascript function on the server side? Below is my Javascript function : function DisableOperations(Selector) { alert(Selector); $(Selector).parent().find('input').attr('disabl ...

c#javascriptjqueryasp.netselector

Divergence between Angular HTTP get response and network tab display

I've been encountering an intermittent issue where, when I use the Angular HTTP service to make a call, some values are coming back as undefined every 10th time or so when I refresh the page. It's strange because the network tab confirms that all ...

angularjsangularjs-scope

Using jQuery to dynamically alter image source based on class modification

I'm facing an issue with my navbar that changes its class when I scroll down. My goal is to switch the img src when this class changes, but despite searching for solutions in other questions, I haven't found a suitable match yet. Currently, I am ...

javascripthtml

Various conditional statements based on the dropdown menu choice

I currently have a basic dropdown menu on my webpage that enables users to switch between viewing Actual or Planned dates/times in a table (I am utilizing the controller as syntax): <select ng-model="trip.viewType"> <option value="actual"> ...

javascripthtmlangularjs

Define unique positions for multiple shapes and then combine these shapes

import * as THREE from 'three'; import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js'; const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appe ...

javascriptthree.js

Using IONIC2 to localize month names in the UI

I am encountering a challenge with ionic2 related to translating month names into Portuguese for Brazil. In my views, I utilize the date filter to display the full month names, but they are currently appearing in English. I need them to be displayed in Bra ...

angularjsangularionic-frameworkionic2ionic-view

Pass the responsibility to another component or initiate an ajax request in react

I'm currently using fetch for my ajax call, which is located within a handleSearch function in the App component. How can I separate this ajax call into its own component? Coming from Angular 1, where services/factories are used, I'm not sure how ...

javascriptangularjsajaxreactjs

Utilizing CSS background sizing with jQuery for stunning website aesthetics

In my HTML file, there is a main div container with two nested divs inside it. Each of these inner divs has been assigned separate ids for content placement. By implementing a functionality that changes the background image of the parent div upon clicking ...

javascriptjqueryhtmlcss

Creating effective puppeteer tests with reasonable expectations

Imagine I have a list of objects and a create button. Typically, the objects are created quickly without any loading indicator. Here is an example of my creation test: const items = await page.$$('.item'); const itemsCount = items.length; await ...

angularjsjasminepuppeteer

HTML - Text aligned next to a div element in a row with spaces inserted

I have some HTML code that needs formatting. You can view it here: https://jsfiddle.net/nko8p6fr/ It's clear that in the lengthy text given, there are two spaces that need to be removed for better readability. My goal is to consolidate the long text ...

javascripthtmljqueryreactjs

What is the best method for combining elements from various arrays into a single array?

I have an array of objects in Vue that I need to loop over. Each object contains a key value pair where the value is another array. My goal is to iterate through each object, and then within each object, loop over the arrays to gather all unique items into ...

javascriptjqueryhtmlvue.js

Issue with Material UI components failing to return an HTMLElement reference

When working with certain libraries that require the ref prop to return an HTMLElement, I have noticed that 99% of MUI components do not fulfill this requirement. What am I missing? How can I obtain a reference to the root element of a component? import R ...

javascriptreactjsmaterial-ui

Creating a task list using arrays and functions

I am working on developing a to-do list using an array in JavaScript, where the functions are separated from the HTML code. I have managed to set up the HTML structure, but I am facing challenges in completing the necessary functions. Fortunately, the Even ...

javascriptarrays