RenderCellEventArgs "groupIndex" in AdaptiveUI Mode is not supplied?

[Mike Griffin]

Why is this? We are still group mode when in Adaptive UI mode? We are merely allowing one group at a time but we still need to know what group we are in. Basically, group index goes "bye bye" when in Adaptive UI mode, this doesn't make sense at all, even  in your demo's I've tried it, it fails there too?

Throw this in one of your grouping examples:

enableAdaptiveUI={true} renderCell={(onRenderWorkingHours)}

add this method:

const onRenderWorkingHours = (args: RenderCellEventArgs): void => {

    debugger;
    args.groupIndex // <= what gives? I'm still in group mode here??

}

[Vijay Ravi]

Hi Mike Griffin,

Based on your requirements, we have prepared a React Schedule sample with the enableAdaptiveUI property set to true. Additionally, you can utilize the renderCell event to retrieve the groupIndex value using scheduleObj.current.uiStateValues.groupIndex. To obtain the resource details, you can pass the groupIndex to the getResourcesByIndex method of the Schedule component as shown in the below shared code snippet. Refer the below shared api and sample for your reference. Kindly try it out.

[index.js]
 

const onRenderWorkingHours = (args) => {

        const resourceGroupIndex = scheduleObj.current.uiStateValues.groupIndex;

        console.log(scheduleObj.current.getResourcesByIndex(resourceGroupIndex).resourceData.id)

        console.log(scheduleObj.current.getResourcesByIndex(resourceGroupIndex).resourceData.text)

        console.log(scheduleObj.current.getResourcesByIndex(resourceGroupIndex).resourceData.groupId)

    }
 

 return (<div className='schedule-control-section'>

            <div className='col-lg-12 control-section'>

                <div className='control-wrapper schedule-wrapper'>

                    <ScheduleComponent width='100%' height='650px' id='schedule' selectedDate={new Date(2023, 0, 4)} group={group} enableAdaptiveUI={true} currentView='Month' eventSettings={{ dataSource: data }}

                    renderCell={onRenderWorkingHours} ref={scheduleObj}

                    >

                        <ViewsDirective>

                            <ViewDirective option='Day'/>

                            <ViewDirective option='Week'/>

                            <ViewDirective option='Month'/>

                        </ViewsDirective>

                        <ResourcesDirective>

                            <ResourceDirective field='ProjectId' title='Choose Project' name='Projects' allowMultiple={false} dataSource={projectData} textField='text' idField='id' colorField='color'/>

                            <ResourceDirective field='TaskId' title='Category' name='Categories' allowMultiple={true} dataSource={categoryData} textField='text' idField='id' groupIDField='groupId' colorField='color'/>

                        </ResourcesDirective>

                        <Inject services={[Day, Week, Month, Year, Resize, DragAndDrop]}/>

                    </ScheduleComponent>

                </div>

            </div>

        </div>);

Sample link: https://stackblitz.com/edit/react-dapf29-mgjgeb?file=index.js

getResourceByIndex method: https://ej2.syncfusion.com/react/documentation/api/schedule#getresourcesbyindex

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay