Issue with setting multiple checkboxes in AG Grid

I have a situation where I am trying to select multiple checkboxes on different rows in my application. Each time I click on one checkbox, it gets selected just fine. However, when I click on another checkbox in a different row, the previously selected checkbox gets de-selected.

Here is a snippet of the HTML:

<div>
  <ag-grid-angular
    #dataVisGrid
    style="width: 1000px; height: 500px;"
    class="ag-theme-balham"
    [rowData]="rowData"
    [columnDefs]="columnDefs"
    [rowSelection]="multiple"
    [rowMultiSelectWithClick]="true"
    [enableRangeSelection]="true"
    (rowClicked)="onRowSelect($event)">

  </ag-grid-angular>
</div>

In the data-vis-component.js file,

columnDefs = [
  {headerName: 'Data Source', field: 'dataSource', sortable: true, filter: true, checkboxSelection: true},
  {headerName: 'Value', field: 'value', sortable: true, filter: true},
  {headerName: 'State', field" 'state', sortable: true, filter: true}
];

onRowSelect(event) {
  console.log("onRowSelect:"+JSON.stringify(event));
}

Even though I can see multiple rows highlighted when I ctrl-click due to enableRangeSelection, only one checkbox seems to be working properly.

According to the documentation, everything seems to be set up correctly. But for some reason, it's not functioning as expected. Any ideas or suggestions would be greatly appreciated!

javascriptangularjsag-grid

Answer №1

To assign row selection to a variable, set the variable's value to "multiple"

[rowSelection]="rowSelection"

Within the component code:

this.rowSelection = "multiple";

Alternatively, you can directly assign the value without using square brackets:

rowSelection="multiple"

Since 'multiple' is a string and not a variable

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

Encountered a $resource configuration issue while making a request to the SharePoint REST service with Angular

In an old sample app without angularJS, a rest service is called in the following way: This app does not use angularJS. var listName = "Events"; // the url to use for the REST call. var url = SPAppWebUrl + "/_api/SP.AppContextSite(@target ...

javascriptangularjsrestsharepoint

Error: The function pathRegexp is not defined

While attempting to conduct tests on my project with jest, I encountered an error code that seems unrelated to the actual testing process. It appears to be more of a dependency or Node Express compatibility issue. `● Test suite failed to run TypeError: ...

javascriptnode.jsjsonpostgresqlexpress

Steps for ensuring a div component appears on top of any other component (like h1 or p)

The outcome of the code below is displayed in this image: https://i.stack.imgur.com/CPDqC.png Is it possible to make the dropdown overlap on top of the 'HELLO's text, hiding the h1 and p tags? I have tried using z-index without success. Making ...

javascripthtmlcssreactjs

Utilize jQuery append() to create a grid layout using <td> tags

I need to integrate address information from an object into an HTML table using the append() method. The initial HTML table structure is as follows: <table class="shipping_information" border="1"> </table> To achieve this, I place the addre ...

javascriptjqueryhtml

Avoid the occurrence of the parent's event on the child node

Attempting to make changes to an existing table created in react, the table is comprised of rows and cells structured as follows: <Table> <Row onClick={rowClickHandler}> <Cell onCLick={cellClickHandler} /> <Cell /> ...

javascriptreactjstypescripteventsdom-events

Use ag-Grid to customize your column headers with checkboxes, allowing you to easily select or deselect all items in that column. This feature is not limited to

In my experience with ag-grid, I often find myself needing to customize the first column header to include a checkbox. This allows me to easily perform actions such as selecting all or deselecting all rows in the grid. It's important to note that this ...

javascriptangularjsag-grid

Identify dead hyperlinks on a webpage with the help of selenium webdriver while steering clear of links that

I have been trying to identify broken links on a webpage by extracting all anchor tags. However, some of the links are dynamically generated through JavaScript. When I attempt to print out the list of all the links, I encounter a StaleElementReferenceExcep ...

javascriptselenium-webdriver

`Considering various factors to alter class pairings`

I have defined a few style classes in my stylesheet as shown below: .left-align{ /* some styles here */ } .right-align{ /* some styles here */ } .validate-error{ /* some styles here */ } Depending on the type of data, I need to align the content ei ...

htmlcssangularjsvalidationng-class

Removing an article from a Vue.js localStorage array using its index position

I am facing an issue while trying to remove an item from localStorage. I have created a table to store all the added items, and I would like to delete a specific article either by its index or ideally by its unique id. Your assistance is greatly apprecia ...

javascriptvue.jslocal-storage

What is the best way to retrieve the value of a boolean property from a JSON object produced by Rails within an AngularJS expression?

Here's the story: So, I had this element with an ng-repeat directive and decided to use the ng-class directive on it. The purpose of adding the ng-class was to apply a specific class to the element based on certain conditions. But here's where t ...

ruby-on-railsrubyjsonangularjsangularjs-directive

Using the "i" parameter in a Lodash for loop results in undefined, however, it functions properly with specific values set

My goal is to use Lodash to search for specific integer values in an object and then store some of those values in an array. The integers are variable and come from a separate array, but I am consistently getting undefined as the result. If I manually inp ...

javascriptnode.jsobjectlodash

Steps for importing a JavaScript file from Landkit into a Vue project

Currently, I am working on an interesting project and utilizing Vue with Landkit Bootstrap. However, I am encountering issues with the JavaScript behavior of the Landkit component. I usually import the following links in my index.html file, but in the new ...

javascripthtmlcssvue.jsbootstrap-4

How can you ensure an element's height matches its width within an Ionic framework?

I am currently creating an application using the Ionic framework, and I am looking to set a square image as the background. The challenge is to ensure that the image scales appropriately for different screen resolutions; ideally, it should occupy the full ...

javascriptcssangularjsangularjs-directiveionic-framework

What is the best way to connect a fresh post to a different URL in ReactJS and Redux?

Currently, I am working with Redux and ReactJS to develop a discussion platform. One of the key features I am trying to implement is where users can input the title and content of their post, which will then be submitted to create a new post. After submit ...

javascripthtmlurlreactjsredux

AngularJS - Issue with ng-mouseover not triggering controller function

I am struggling to get a function to trigger when my button is hovered over. Despite writing what I believe is the correct code, the function from my controller is not being called. Can anyone spot the issue? Below is the JavaScript code: angular.module( ...

javascriptangularjs

The issue persists with multiple instances of Swiper js when trying to use append and prepend functions

I'm encountering an issue with my swiper carousels on the page. Despite everything working correctly, I am facing problems with the append and prepend slide functions. When I remove this part of the code, everything functions as expected. $('.s ...

javascriptjqueryswiper.js

What does the JS Array Filter function return?

Is it necessary to include a return statement in the filter function when NOT using ES6 arrow syntax? Could the two separate filter functions be combined into one for efficiency? cars.filter(function(car, index) { return car[0].setAttribute("data-ori ...

javascriptjqueryarrays

Maintain the selected image

I am working on a program that allows users to choose images and I have given them the pseudo-class. .my_image_class:hover{ border:3px solid blue; -webkit-box-sizing: border-box; } This makes the images bordered in blue when hovered over, giving a "sele ...

javascripthtmlcss

`Inability to Execute Callback Function in JQuery AJAX POST Request`

I've created a simple JavaScript method that sends an AJAX request to a server and is supposed to execute a callback function. However, I'm facing an issue where the specified callback function isn't being executed. Despite this, when I chec ...

javascriptjqueryajax

What is the best way to include an "average" line in a nvd3.js Stacked Area Chart?

My Stacked Area Chart is up and running smoothly using NVD3.js. You can view it in action on this working jsfiddle link. var volumeData = [{"key":"Hit","values":[[1.3781628E12,12],[1.3782492E12,9],[1.3783356E12,9],[1.378422E12,4],[1.3785084E12,2],[1.37859 ...

javascriptd3.jsnvd3.js