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

Ensuring form field accuracy through server-side validation using Ajax - Mastering the art of Ajax

I am in need of implementing Ajax to validate my form fields, currently I have a javascript validation set up. Is it possible to reuse my existing javascript code and integrate Ajax for form validation? HTML Form <form method="post" action="ajax/valid ...

javascriptphpjqueryajaxvalidation

a guide on integrating dynamic text input in AngularJS with SVG circles created in D3.js for effective filtering

I am working with a d3js bubble chart that contains multiple circles, each identified by an id corresponding to a city name. var cities = ["Toronto", "London", "Paris"]; In addition, there is a standard input box in the HTML code. <input id="searchBo ...

javascriptangularjssvgd3.js

Conceal portion in HTML until revealed

I am attempting to create 3 sections within a single HTML file using the <section id="id"> tag, and I want to be able to open each section by clicking a link in the header with <a href="#id">1</a>, and then close it when another section i ...

javascriptphphtmlcss

Models of Earth and the Sun are failing to render

After numerous attempts at debugging, I am stuck on an issue with my Earth and Sun models not rendering correctly. They are displaying as a dull filled color despite having a texture applied to the sphere. If you could take a look at lines 104 - 141 where ...

javascriptthree.js

What is the reason why Prettier does not automatically format code in Visual Studio Code?

After installing and enabling ESLint and Prettier in my Nuxt application, I made the switch to Visual Studio Code. However, when I open a .vue file and use CMD+ Shift + P to select Format Document, my file remains unformatted. I even have the Prettier ex ...

javascriptvue.jsvisual-studio-codenuxt.jsprettier

Verifying the activation status of a button within a Chrome extension

I have been working on a chrome plugin that continuously checks the status of a button to see if it is enabled. If it is, the plugin clicks on the button. I initially used an infinite for loop for this task, but realized that it was causing the browser to ...

javascriptjquerygoogle-chromeplugins

Can someone help me figure out how to trigger my function after my jQuery 'each' function has completed along with all the AJAX calls it includes?

Hello all, seeking some guidance here. I have experimented with various solutions from SO and other sources. This particular one caught my attention as I tried to ensure that my function wouldn't execute until all ajax calls were completed. However, I ...

javascriptjquery

How can a border be applied to a table created with React components?

I have been utilizing the following react component from https://www.npmjs.com/package/react-sticky-table Is there a method to incorporate a border around this component? const Row = require("react-sticky-table").Row; <Row style={{ border: 3, borderco ...

javascriptreactjstypescript

A JavaScript plugin that offers functionality similar to the repeating options in Google Calendar for forms

Does anyone know of a JavaScript plugin that visually replicates the repeat options in Google Calendar? ...

javascriptjquerygoogle-calendar-api

Vue's reactivity in Vue 3 is exhibiting strange behavior with boolean data

Currently, I am attempting to modify a boolean variable. Upon the initial page load, everything works as expected. However, upon reloading the page, the variable gets updated locally within the method but not in the global data section. As a result, an err ...

javascriptvue.jsruntime-errorvuejs3vue-reactivity

Accessing JS code from HTML is not possible in React

Attempting to create a list using React, I have utilized the module found here: https://github.com/pqx/react-ui-tree I am currently testing out the sample application provided in this link: https://github.com/pqx/react-ui-tree/blob/gh-pages/example/app.js ...

javascripthtmlreactjs

Demonstrating the transformation of child elements into parent elements through angular 6 ngFor

I have a JSON array dataset where each object may contain nested arrays. In order to display the inner nested array elements as part of the parent array using Angular's NgFor, I need to format the input like this: [{ 'id': 1, 'tit ...

javascripthtmlangular

The function attached to the `click` event of `#cart-continue` is not invoking

I'm currently working on implementing a navigation to a specific anchor tag when the user clicks the continue button on the cart page. This project involves a mobile application built with Cordova, and the function call is done using jQuery. Here is ...

javascriptjqueryhtmlcordova

Using Reactjs to create a custom content scroller in jQuery with a Reactjs twist

I am attempting to implement the Jquery custom scrollbar plugin here in my React project. Below is a snippet of my code: import $ from "jquery"; import mCustomScrollbar from 'malihu-custom-scrollbar-plugin'; ..... componentDidMount: function() ...

javascriptjqueryreactjs

A Guide to Handling Errors while Converting a Map to a Promise in Typescript

I am attempting to capture errors if any of the asynchronous code within my map function fails. It seems to enter the error block but does not log anything, as the error variable remains null. Is there an alternative method for handling errors within map ...

javascripttypescripterror-handling

The sidebar vanishes when you move your cursor over the text contained within

My issue is that the side menu keeps closing when I hover over the text inside it. The "About" text functions correctly, but the other three don't seem to work as intended. Despite trying various solutions, I am unable to identify the root cause of th ...

javascripthtmlcss

What is causing the issue with $(document).append() method in jQuery version 1.9.1?

Why is the following code not functioning properly in jQuery 1.9.1? It worked fine in previous versions. $(function () { $(document).append(test); document.write('done'); }); var test = { version: "1.0", }; JSFiddle: http://jsfiddl ...

javascriptjquery

Establishing the initial value of a <select> element

My webpage features a table that displays the details of past order history, with columns for Order, Date, and Review. For the Review column, I am seeking to add a select dropdown with various options. Upon the initial page load, I would like the select d ...

javascripthtml

Ways to retrieve JSON string from responsetext in JavaScript

After spending the entire day on this, I still can't figure it out. I have AJAX that fetches a JSON string from a PHP script, but now I need to work with it in JavaScript. Here's what I've tried: var xmlhttp; xmlhttp=new XMLHttpRequest(); ...

javascriptphpjqueryajaxjson

Exploring JavaScript: Accessing an array object within another object

I'm having trouble accessing an array object within an object in JavaScript. The object structure is as follows: categories: Array(5) 0: name: "Electronics" subCategories: Array(16) 0: name: "Video Games & Accessories" __typena ...

javascriptarraysreactjs