Cfrgtkky

What I really hope to learn is whether ag-Grid has a (checkboxClicked) event that fires and gives you node data just like (rowClicked) and if not how I could implement such a thing.

Here's the description of my problem:
Right now I have check boxes on each row of the grid. The user needs to be able to click either the row or the checkbox to fire a function in order to access the data behind the grid but if we use (rowClicked) when we click the checkbox this event does not fire... So I looked into using (rowSelected), but when the grid is getting ready it will start firing as we are building our selection state for that grid. Is there a checkboxClicked event or something so that I do not have to customize this?

So far I have done this to get around my problem... as you can see the problem just occurs when i am setting up the check boxes as selected and its triggering the mapping function. So i Turn that off for the first 500 ms after those build functions have fired.

Thanks for any help you can provide! Thank you

component:

  buildSelectionStateFromId() {

    this.buildSelectionStateFromIdIsRunning = true;

    // we will have to loop over userIds array and select all the org admins

    // input = orgVM.orgInfo.userIds && orgVM.orgInfo.

    const admins = this.orgVM.orgAdmins;

    this.agGrid.api.forEachNode(function (node) {

      console.log('node: ', node);

      admins.map(x => {

        console.log('x: ', x);

        if (node.data.id === x.id) {

          console.log('node.data.id: ', node.data.id);

          node.setSelected(true);

        }

      });

    });

    // output = actually checking the box based on the security ids in currentUser



    this.buildingSelection();

  }





  toggleOnlySelectedRows(data) {

    this.buildSelectionStateFromIdIsRunning = true;

    this.toggleSelected = !this.toggleSelected;

    console.log('this.toggleSelected: ', this.toggleSelected);

    if (this.toggleSelected) {

      let selectedRows;

      const clone = [...(<any>this.agGrid.rowData)];

      selectedRows = clone.filter((el) => this.getSelectedRows().includes(el));

      this.agGrid.api.setRowData(selectedRows);

      console.log('selectedRows: ', selectedRows);

      this.buildSelectionStateFromId();

    } else {

      console.log('data: ', data);

      this.agGrid.api.setRowData(data);

      this.buildSelectionStateFromId();

    }

    this.buildingSelection();

  }



  buildingSelection() {

    setTimeout(() => {

      this.buildSelectionStateFromIdIsRunning = false;

    }, 500);

  }



  mapClickToModel(rowClicked) {

    console.log('rowClicked: ', rowClicked);

    // *ag-Grid hint: if we use (rowSelected), it will start firing when we are building

    // * our selection through any automated way like buildSelectionStateFromId();

    // * if we use (rowClicked) when we click the checkbox mapClickToModel wont fire...

    // * Another solution might be to not use their checkbox and just put our checkbox in a cell renderer?

    // TODO: refactor this timing hack

    if (this.buildSelectionStateFromIdIsRunning === false) {

      // console.log('this.buildSelectionStateFromIdIsRunning: mpa click to model fired');



      this.orgVM.orgUsers.map(x => {

        // whenever a row is clicked I grab the id off it and see if it is equal to any on the orgUsers array

        if (x.id === rowClicked.node.data.id) {

          console.log('x.id: ', x.id);

          // if it is then i check if the usertype is 1

          if (x.userType === 1) {

            // if it is then I change it to something else

            x.userType = 0; // ! what do we change it to?

          } else {

            x.userType = 1;

          }

        }

      });



    }



  }

template:

<ag-grid-angular #agGrid (componentStateChanged)="onGridReady($event)"

      (rowSelected)="mapClickToModel($event)" (click)="mapClickToModel($event)"

      (gridReady)="onGridReady($event)" style="width: 100%; height: 84%;"

      class="of-grid-theme" rowMultiSelectWithClick="true"

      [context]="context" [frameworkComponents]="frameworkComponents"

      [headerHeight]="headerHeight" [getContextMenuItems]="getContextMenuItems"

      [enableSorting]="true" [enableFilter]="true" [multiSortKey]="multiSortKey"

      [defaultColDef]="defaultColDef" [rowData]="rowData" [columnDefs]="columnDefs"

      rowSelection="multiple" pagination="true" paginationAutoPageSize="true"

      animateRows="true" [defaultColDef]="defaultColDef">

    </ag-grid-angular>

One better solution I thought of was this:
I could make the mapClickToModel parameter optional and have it fired
on (click) and then check whether it is undefined and thennnn if it is undefined I acces the getSelectedRows() and get node data that way.... BUT I really just want to see if I can get an event that gives me the node that was just selected.