DevExtreme DataGrid OnRowClick

I'm using a DevExtreme Data Grid inside a master-detail view. I want to open another component (or section) when a row is clicked inside the detail grid. To do this, I'm setting a variable (showAddHorario = true) inside the onRowClick event. However, it doesn't always work on the first click—it sometimes requires multiple clicks before the state updates.

Here’s the relevant code:

[dataSource]="salas"
[showColumnLines]="true"
[showBorders]="true"
[rowAlternationEnabled]="true"
[focusedRowEnabled]="false"
[selection]="{ mode: 'none' }"
[masterDetail]="{ enabled: true, autoExpandAll: true, template: 'detailTemplate' }">

//rest of code

</div>
<div *dxTemplate="let data of 'detailTemplate'">
<dx-data-grid
[dataSource]="data.data.horarios"
[showBorders]="true"
[hoverStateEnabled]="true"
[selection]="{ mode: 'none' }"
[focusedRowEnabled]="false"
keyExpr="id"
(onRowClick)="onRowClick($event, data.data)"
class="detail-grid">
<dxi-column dataField="startDate" caption="{{ label.DataInicio }}" [format]="{ type: 'date', format: 'dd/MM/yyyy' }"></dxi-column>
<dxi-column dataField="endDate" caption="{{ label.DataFim }}" [format]="{ type: 'date', format: 'dd/MM/yyyy' }"></dxi-column>

@for (day of daysOfWeek; track $index; let dayIndex = $index) {
<dxi-column [caption]="day" [calculateCellValue]="getScheduleCalculator(dayIndex)"></dxi-column>
}
</dx-data-grid>
</div>


heres the function called:

onRowClick(event: RowClickEvent, sala: GetSalasByServiceResponse): void {
const horario: GetSalasByServicoHorarioResponse = event.data;
const horarioData: GetSalaByServicoHorarioDiarioResponse[] = event.data.horariosDiarios || [];
this.selectedHorarioData = horario;
this.horariosDiarios = horarioData;
this.selectedSala = sala;
this.showAddHorario = true;
}

Continue reading...