Get column data of grouping with quickInfo

[Arturo Martinez]

I have this scheduler set up with have multiple groups , each of them with unique keys as rows.

My question is, when i click a date in the scheduler to trigger the QuickInfo Event, how can i get the row info?

like in this case the '201'?

<ejs-schedule

#scheduleObj

width='100%'

cssClass='timeline-resource-grouping'

height='auto'

[selectedDate]="selectedDate"

[group]="group"

[workDays]="workDays"

[eventSettings]="eventSettings"

[timeScale]="timeScale"

[currentView]="currentView"

(actionComplete)="onActionComplete($event)"

(renderCell)="onRenderCell($event)"

(dataBound)="onDataBound()"

(popupOpen)="onPopupOpen($event)"

(dragStart)="onDragStart($event)"

(dragStop)="onDragStop($event)"

(eventRendered)="onEventRendered($event)"

(resizeStop)="onResizeStop($event)"

[quickInfoOnSelectionEnd] = "true"

>

<ng-template #dateHeaderTemplate let-data>

<div class="date-text"></div>

<div [innerHTML]="getDateHeaderText(data.date)"></div>

</ng-template>

<ng-template #resourceHeaderTemplate let-data let-index>

<div style="height: 100%; display: flex; align-items: center; justify-content: start;">

<div [matMenuTriggerFor]="menu" class="btn btn-icon btn-custom btn-icon-muted">

<img class="thumbnail" *ngIf="isChildNode(data)" [src]="getIconClass(data.resourceData.text)" alt="{{data.resourceData.ImageName}}" style="height: 57px; width: 30px;" />

</div>

<mat-menu #menu="matMenu">

<ng-container *ngFor="let estatus of estatusArray">

<button (click)="onStatusChange(data.resourceData.text, estatus.Descripcion)" mat-menu-item>

<span>{{estatus.Descripcion}}</span>

</button>

</ng-container>

</mat-menu>

{{data.resourceData.text}}

</div>

</ng-template>

<e-resources>

<e-resource

field='ProjectId'

title='Choose Project'

[dataSource]='tipoHabGroupDataSource'

[allowMultiple]='allowMultiple'

name='Type'

textField='text'

idField='id'

colorField='color'

>

</e-resource>

<e-resource

field='TaskId'

title='Category'

[dataSource]='habitacionPorTipoDataSource'

[allowMultiple]='allowMultiple'

name='Rooms'

textField='text'

idField='id'

groupIDField='groupId'

colorField='color'

>

</e-resource>

</e-resources>

<e-views>

<e-view option="TimelineDay" [interval]="dayInterval"></e-view>

<e-view option="TimelineWeek"></e-view>

<e-view option="TimelineWorkWeek"></e-view>

<e-view option="TimelineMonth"></e-view>

</e-views>

</ejs-schedule>

[Vijay Ravi]

Hi Arturo,
 

To access the row information of the selected date in the QuickInfo popup in the Syncfusion Scheduler component, you can use the args parameter in the onPopupOpen method. This parameter provides details about the selected cell or event, including the groupIndex, which can be used to determine the specific row or group that was clicked.

Here’s how you can modify your onPopupOpen method to get the row (group) information

[app.component.ts]
 

public onPopupOpen(args): void {

    if (args.type === 'QuickInfo') {

        const groupIndex = args.data.groupIndex;

        if (groupIndex !== undefined && groupIndex !== null) {

            // Access the specific row/group information here using groupIndex

            const project = this.projectDataSource.find(project => project.id === args.data.ProjectId);

            const category = this.categoryDataSource.find(category => category.id === args.data.TaskId);

           

            console.log('Group Index:', groupIndex);

            console.log('Selected Project:', project ? project.text : 'Not found');

            console.log('Selected Category:', category ? category.text : 'Not found');

        }

       

        // You can also access other information like StartTime and EndTime as needed

        if (args.data.StartTime && args.data.EndTime) {

            const startTime = new Date(args.data.StartTime);

            const endTime = new Date(args.data.EndTime);

            console.log('Start Time:', startTime);

            console.log('End Time:', endTime);

        }

    }

}

Sample link: Qiu7pb (forked) - StackBlitz

Regards,

Vijay