AG-GRID: Continual cycle occurring between onRowSelected and setSelected

When trying to select certain rows based on whether a row is selected or deselected, I encountered an issue. If a row is selected, all rows with an index lower than the selected row's index should also be selected. However, a problem arises when the setSelected(true) or setSelected(false) function triggers the onRowSelected event repeatedly, creating an infinite loop.

this.gridOptions.onRowSelected = function(event) {
    var rowIndexSelected = event.rowIndex;
    if (event.node.selected) {
        vm.gridOptionsSuiviPrestataire.api.forEachNode(function(rowNode, index) {
            if (index < rowIndexSelected) {
                rowNode.setSelected(true);
            }
        });             
    } else {
        vm.gridOptionsSuiviPrestataire.api.forEachNode(function(rowNode, index) {
            if (index > rowIndexSelected) {
                rowNode.setSelected(true);
            }
        }); 
    }
};

Is there a workaround to achieve this functionality without triggering the onRowSelected event listener endlessly, perhaps by using a flag to prevent executing the code within the method?

Answer №1

node.setSelected has a third parameter known as suppressFinishActions, however, it currently only suppresses the onSelectionChanged event. This limitation has prompted ag-Grid to add two items in their backlog (AG-2859 and AG-2707) to address this issue. As for when the fix will be provided, that remains uncertain.

In the meantime, you could experiment with using node.selected = true. Although, I've observed that rows selected in this manner do not receive the highlighting that is present when manually selecting or using setSelected.

Answer №2

I believe this solution will be beneficial for your situation.

let isRowSelected = false;

this.gridOptions.onRowChanged = function (event) {

  if (isRowSelected) {
    return;
  }

  var selectedRowIndex = event.rowIndex;

  if (event.node.selected) {
    vm.gridOptions.api.forEachNode(function (rowNode, index) {
      if (index < selectedRowIndex) {
        isRowSelected = true;
        rowNode.setSelected(true);
      }
    });
  } else {
    vm.gridOptions.api.forEachNode(function (rowNode, index) {
      if (index > selectedRowIndex) {
        isRowSelected = true;
        rowNode.setSelected(true);
      }
    });
  }

  isRowSelected = false;
};

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

Enhancing user experience by implementing AJAX in a contact form to eliminate the need for page

I have read numerous questions on this topic and have compiled the code I currently have from various responses. Unfortunately, despite my efforts, I am unable to make it work and I cannot identify the reason behind this issue. Below is the HTML form str ...

Unable to locate the React Native variable named "NetworkStatus"

I have been working on implementing a code to test internet connectivity using react native NetInfo from '@react-native-community/netinfo'. Unfortunately, I keep running into an error that says "Can't find variable: connectionStatus&quo ...

Unlocking the potential of Arrays in Javascript: strategies for extracting maximum value

After running a database query in node, I received the result in the form of an object: [ [1234] ]. Now, I am trying to extract this value and convert it into a string so that I can pass it onto the client side. Although I have written the necessary code ...

What is the best way to simulate fetch in Redux Async Actions?

When writing tests in the Redux Writing Tests section, how does store.dispatch(actions.fetchTodos()) not trigger the fetch method when store.dispatch is directly calling actions.fetchTodos? The issue arises when trying to run similar code and encountering ...

Events bound to JSX elements created in an array map are not being triggered by React

My current task involves working on a compact react + typescript (1.6) application designed for editing slideshows. The functionality of the app is straightforward. A sidebar on the left displays all existing slides, and upon clicking, a canvas appears on ...

AngularJS array not refreshing following an AJAX request

Currently, I am still in the process of familiarizing myself with Angularjs and actively learning about its functionalities. One issue I have encountered is that when I define an array and loop through it using "ng-repeat," the items within ng-repeat fail ...

Is there a way to dynamically add or modify a JavaScript timestamp component after the webpage has finished loading?

Context: Utilizing the SailsJS framework to showcase the timestamp of data model updates. The framework, originating from 'parasails', leverages Vue.js and offers the <js-timestamp :at="1573487792252"> component to display elapsed time like ...

Guide on utilizing AngularJS Filter service without HTML for Chrome extension development

Currently, I am attempting to utilize the filter service in AngularJS within my Chrome extension. However, I am unsure of how to properly obtain and inject it into my function. At this time, my code looks like: chrome.contextMenus.onClicked.addListener(fu ...

Tips for creating a cohesive group of HTML elements within an editable area

Imagine having a contenteditable area with some existing content: <div contenteditable="true"> <p>first paragraph</p> <p> <img width='63' src='https://developer.cdn.mozilla.net/media/img/mdn-logo-s ...

Express-hbs: Dynamic Helper Function with Additional Features

I am currently utilizing express-hbs and Async Helpers in my project. However, I am facing an issue with passing options to the helper as async helpers do not seem to support this feature (or maybe I am unaware of how to do it correctly). In the code snipp ...

Unexpected issue encountered when working with JSON in Node.js

I've searched through countless solutions on stackoverflow, but none of them seem to work for me. It's really frustrating not understanding what's going wrong. Below is the code I'm having trouble with: var data = ""; req.on('dat ...

Having trouble accessing req.user on my Node.js server using Auth0 and Angular

Currently, I am utilizing auth0 for my admin panel's login system and it is functioning smoothly. However, I have encountered an issue in node where 'req.user' is returning as undefined for some unknown reason. This setup is fairly basic; I ...

jQuery: Input mask functionality not functioning on field after validation error

My form validation using JQuery is successful. I have integrated a masked input into the birth date field on my form, utilizing the plugin from https://github.com/RobinHerbots/jquery.inputmask. Initially, the birthdate field displays the masked input prop ...

Click to Modify ID and Class

I am currently in the process of developing a visual configurator for customizing cars and wheels. This project involves two main variables - the type of car selected and the style of wheels chosen. To facilitate this process, I have set up two separate c ...

Ways to align an image at the center with jQuery

I recently set up a contact form on my website that displays a "Thank You" message and an image after the user submits their information. However, I'm having trouble with the alignment - everything is currently aligned to the right and I'd like t ...

Using Angular's $filter to target a specific field

I'm attempting to use the $filter function in my controller, within a $watch function, to filter specific fields. I am having trouble understanding the documentation provided. The situation: I have a dropdown menu that serves as the filter parameter. ...

The prop HandleClick is not being identified

Whenever I click on the sidebar, my menu should appear, but instead I'm encountering an error message saying "react-dom.development.js:86 Warning: React does not recognize the handleClick prop on a DOM." import { useState } from "react"; imp ...

Using AngularJS, what methods can I use with ng-show to filter through an array and identify specific values?

I have a model called Program, which has the following structure: var ProgramSchema = new Schema({ permissions: [{ user: { type: Schema.ObjectId, ref: 'User' }, roles: { type: [{ type: Stri ...

Having trouble with accessing input field in a modal that was generated by TinyMCE React within a Next.JS environment

In my current project, I am utilizing Next.JS and looking to incorporate the TinyMCE editor onto my webpage. Here is the code snippet I have implemented: <TinyMceEditor selector='textarea' initialValue={ props.value } apiKey=<AP ...

Achieving a stacked arrangement of divs upon click-through using only pure JavaScript

http://jsfiddle.net/Zgxv9/ In the example provided in my fiddle, the div elements return to their original positions when clicked. However, I am looking for a solution where the last clicked div always remains on top. This is my current code: function di ...