Performing calculations within handsontable

Trying to figure out how to concatenate values from a handsontable grid, I stumbled upon some code on jsfiddle that caught my eye.
Here is the link:

http://jsfiddle.net/9onuhpn7/4/

The task at hand involves 3 columns A,B,C and an attempt to concatenate them and display the result in the "SUM" column. However, things aren't quite working as expected.

This code was borrowed from someone else, and there's a line if (changes[i][1] === 3) { that seems crucial but puzzling. Removing it breaks the functionality. Any insights on its purpose would be greatly appreciated.

If anyone can offer some guidance or assistance, it would be much appreciated. Thank you!

javascriptcalculated-columnshandsontable

Answer №1

The code snippet you provided seems a little off. I made some tweaks to better align it with your needs.

(PS: Just FYI, I'm not very familiar with Handsontable)

It looks like the issue lies in how you're handling change events and making changes within those events, potentially causing an endless loop.

The specific line

if(changes[i][1] === 3)

is there to prevent this loop by checking if the change occurred on the 'SUM' cell at coordinates [i,1] to avoid triggering the change event again unnecessarily.

You can refer to this example code: http://jsfiddle.net/9onuhpn7/6/

When using setDataAtCell(), you have the option to assign a name to the change. This name will be passed as the 2nd parameter of the afterChange listener.

You can then add a condition based on the source name of the event to determine whether to trigger it or not.

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

Exploring the functionality of $timeout in AngularJS

Can you explain the functionality of $timeout in AngularJS and how it sets itself apart from traditional setTimeout()? ...

javascriptangularjs

Does JavaScript adhere to a particular pattern?

Is there a more streamlined approach to implementing this particular design pattern? function a() { function x() { /* code */ } function y() { /* code */ } /* additional code */ x(); y(); // can be called from here } a(); a.x(); a.y(); I ...

javascriptprototype

What is the best way to determine the operational schedule of online stores that have varying business days?

Struggling to automatically calculate the working days for various online stores that operate on different schedules. The challenge lies in some of these stores being open on weekends. It's important to note that JavaScript starts counting days of the ...

javascriptreact-native

The div is incorrect and causing the label and input to move in the wrong direction

Whenever I try to adjust the position of the current-grade-name-input, the entire grade-point-input moves along with it inexplicably. /* final grade calculator: (wanted-grade - (current-grade * (1 - final%))) / final% Ex: have a 80 an ...

javascripthtmlcss

What is the best way to send an event handler to a sibling component?

I am facing a situation where I have an eventHandler that needs to be handled by its sibling component. The <Brains /> component contains several properties (such as this.randomNumber = 555 inside the constructor) that are required for the proper fun ...

javascriptreactjs

What is the best way to inject a service instance into the implementation of an abstract method?

In my Angular application, I have a service that extends an abstract class and implements an abstract method. @Injectable({ providedIn: 'root', }) export class ClassB extends ClassA { constructor( private service : ExampleService) { s ...

javascriptangulartypescript

The Material UI dialog is causing issues for CKEditor 4

In the midst of my React project, I have incorporated CKEditor 4 into a Material UI dialog. However, when attempting to utilize advanced features like Math, I encounter an issue where I am unable to input any text into input or textarea fields. Despite sea ...

javascriptreactjsckeditormaterial-ui

Guide on sending data to MongoDB using Postman

I am currently facing an issue while trying to send data to the MongoDB database using Postman. Despite everything seeming fine, I keep encountering errors. https://i.stack.imgur.com/Gcf5Q.jpg https://i.stack.imgur.com/ntjwu.jpg https://i.stack.imgur.co ...

javascriptexpress

I will evaluate two arrays of objects based on two distinct keys and then create a nested object that includes both parent and child elements

I'm currently facing an issue with comparing 2 arrays of objects and I couldn't find a suitable method in the lodash documentation. The challenge lies in comparing objects using different keys. private parentArray: {}[] = [ { Id: 1, Name: &ap ...

javascriptangularjstypescriptlodash

Difficulty in extracting data from child elements of JSON documents

Below is the JSON String: "book_types": { "type": "1", "books": [ { "name": "default", "cover": null, "lastUpdated": { "microsecond": 114250, "ctime": "Fri Aug 9 01:27:45 ...

javascriptjqueryjson

When using $.getJSON and $.ajax, the expected JSON object is not being returned

Currently, I am taking on the "local weather" front-end development challenge on freecodecamp.com. However, I'm facing some challenges when it comes to making an API call to fetch weather data from various weather APIs. This particular task requires r ...

javascriptjqueryjsonajaxapi

What is the Best Way to Enable Tooltips to Function from External Elements?

I am currently designing a map that features points with tooltips. When hovered over, the tooltips function correctly. I am interested in exploring the possibility of making the tooltips interact with an external navigation bar. My goal is to have specifi ...

javascriptphpjquerytooltipster

"Implement a function to append a new item to all JSON objects in an array if they share a common value with a different JSON object in the array using

Hi there, I'm new to Vue Js and I'm currently working on adding or merging new items in all JSON objects within an array that share the same value with another JSON object. I know how to push a new JSON object into an existing one, but I would re ...

javascriptarraysjsonvue.js

Utilizing Jquery Validation to Remove a Class Upon Form Validation Success

In my current registration process, I have a multipart form where each subsequent form is displayed when the next button is pressed without fading effects. Initially, the button appears faded. Here's a simplified version of how I handle the first form ...

javascriptjqueryvalidation

Ways to update div content following a successful AJAX call

I have a form that utilizes AJAX requests, and when the input fields are not filled correctly and the submit button is clicked, error messages are displayed without refreshing the page. While this functionality works, a problem arises when the form is subm ...

javascripthtmljqueryajaxforms

The dimensions on Next.js pages exceed those of the viewport by a significant margin

I have recently encountered a perplexing issue where the dimensions of my webpage appear to be 2.7 times larger than the viewport, even when there is no content or styles applied. The strange part is that it seems as though the page has been scaled up, eve ...

javascriptcssreactjsnext.js

Unable to access npm run build on localhost

I have developed a web application using react and node.js, and now I want to test it with a production build. After running npm run build in the app directory, I successfully created a build folder. However, when trying to run the application using local ...

javascriptnode.jsreactjsnpm

Navigating a local and server environment with relative paths in a web server's multiple sites

My ASP.NET website is published to a web server with multiple sites, such as www.example.com/SiteA or www.example.com/SiteB. Before publishing, I test the site locally at localhost:12345. When referencing an image path like /Images/exampleImage.gif, it wo ...

javascripthtmlasp.netpath

Certain images fail to load when the properties are altered

I am facing an issue where the images in my child components do not show up when props are changed, unless the page is manually refreshed. There are no 404 errors for the images, and even when I inspect the image element, I can see the correct image link b ...

javascriptreactjsreact-redux

Multiple web pages utilizing Angular app/widget

I have successfully built a chat application similar to Google Hangouts. However, I am facing a challenge with the angular app/widget running on other pages when URL's are changed, causing the app to either remain fixed or restart on the new web page. ...

javascriptangularjshtmlweb