ag-Grid есть ли событие (checkboxClicked)?
Что я действительно надеюсь узнать, так это то, есть ли в ag-Grid событие (checkboxClicked), которое запускает и выдает данные об узлах, как (rowClicked), и если нет, то как я мог бы реализовать такую вещь.
Вот описание моей проблемы: Прямо сейчас у меня есть флажки в каждой строке сетки. Пользователь должен иметь возможность щелкнуть либо по строке, либо по флажку, чтобы запустить функцию, чтобы получить доступ к данным за сеткой, но если мы используем (rowClicked), когда нажимаем флажок, это событие не срабатывает... Поэтому я посмотрел в использование (rowSelected), но когда сетка готовится, она начнет срабатывать, когда мы создаем наше состояние выбора для этой сетки. Есть событие checkboxClicked или что-то, чтобы мне не пришлось настраивать это?
До сих пор я делал это, чтобы обойти мою проблему... как вы можете видеть, проблема возникает только тогда, когда я устанавливаю флажки как выбранные и запускаю функцию отображения. Так что я отключаю это в течение первых 500 мс после запуска этих функций сборки.
Спасибо за любую помощь, вы можете предоставить! Спасибо
составная часть:
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;
}
}
});
}
}
шаблон:
<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>
Одним из лучших решений, о котором я подумал, было следующее: я мог бы сделать параметр mapClickToModel необязательным и включить его (щелкнуть), а затем проверить, является ли он неопределенным, и затем nnnn, если он не определен, получить доступ к getSelectedRows() и получить данные узла таким образом.... НО я действительно хочу посмотреть, смогу ли я получить событие, которое даст мне только что выбранный узел.