Frozen Row disables horizontal scroll

[Harald Stapfer]

Hello,

I have a Grid with the command column frozen, and it disables the horizontal scroll.
Only when I resize the window, the horizontal scrollbar works again, how can I fix this issue?

Grid-Code:

<GridComponent key={seed} id="ResubmissionsGrid" height="100%" width="100%" ref={g => grid = g} commandClick={commandClick} actionComplete={actionComplete} batchCancel={resetBPGuid} cellEdit={customCellEdit} rowSelecting={getSelectedRowIndex} dataBound={renderComplete} queryCellInfo={tooltip} editSettings={editSettings} selectionSettings={selectionSettings} pageSettings={pageSettings} filterSettings={filterSettings} infiniteScrollSettings={infiniteScrollSettings} toolbar={toolbar} loadingIndicator={loadingIndicator} enableInfiniteScrolling={true} allowMultiSorting={true} allowSorting={true} allowFiltering={true}>

                            <ColumnsDirective>

                                <ColumnDirective headerText='Aktionen' commands={commands} filter={false} width={125} isFrozen />

                                <ColumnDirective field='status' headerText='Status' editType='dropdownedit' edit={{ params: { query: new Query(), dataSource: states, fields: { value: 'status', text: 'status' } } }} allowEditing={true} width={150} type='string' defaultValue="" />

                                <ColumnDirective field='remark' headerText="Bemerkung" width={200} defaultValue=""/>

                                <ColumnDirective field='resubmission_date' headerText="Wiedervorlagendatum" width={200} type="date" format="dd.MM.yyyy" editType="DatePickerEdit" edit={{ params: { format: 'dd.MM.yyyy', type: 'date' } }}/>

                                <ColumnDirective field='date_last_contact' headerText="Datum letzter aktiver Kontakt" width={250} allowEditing={false} defaultValue=""/>

                                <ColumnDirective field='responsible' headerText="Zuständig" width={200} editType='dropdownedit' dataSource={users} edit={{params: {allowFiltering: true, showClearButton: true}}} foreignKeyField='id' foreignKeyValue='name' allowEditing={true} type='string' defaultValue=""/>

                                <ColumnDirective field='marketinglists.id' headerText="Marketingliste" width={250} editType='dropdownedit' edit={{params: {allowFiltering: true, showClearButton: true}}} dataSource={marketinglists} foreignKeyField='id' foreignKeyValue='name' allowEditing={true} type='string' defaultValue=""/>

                                <ColumnDirective field='businesspartners.id' headerText="Geschäftspartner" width={250} editType='dropdownedit' edit={{params: {allowFiltering: true, showClearButton: true, change: businesspartnersDropdownChange}}} dataSource={businesspartners} foreignKeyField='id' foreignKeyValue='name' allowEditing={true} type='string' defaultValue="" validationRules={{ required: true }}/>

                                <ColumnDirective field='businesspartners.email' headerText="Geschäftspartner Email" width={250} defaultValue="" />

                                <ColumnDirective field='businesspartners.phone' headerText="Geschäftspartner Telefonnummer" width={300} defaultValue=""/>

                                <ColumnDirective field='businesspartners.fulladress' headerText="Geschäftspartner Adresse" width={350} defaultValue=""/>

                                <ColumnDirective field='contacts.id' headerText="Ansprechpartner Name" width={250} dataSource={contacts} edit={{params: {actionBegin: getContacts, change: contactsDropdownChange}}} defaultValue="" editType="dropdownedit" foreignKeyField='id' foreignKeyValue='fullname' type="string" validationRules={{ required: true }}/>

                                <ColumnDirective field='contacts.email' headerText="Ansprechpartner Email" width={250} defaultValue=""/>

                                <ColumnDirective field='contacts.phone' headerText="Ansprechpartner Telefonnummer" width={300} defaultValue=""/>

                                <ColumnDirective field='contacts.mobilephone' headerText="Ansprechpartner Handynummer" width={300} defaultValue=""/>

                            </ColumnsDirective>

                            <Inject services={[Freeze, Edit, Toolbar, Filter, Sort, Search, InfiniteScroll, CommandColumn]} />

                        </GridComponent>

Before resize

After resize

Without frozen column

[Pavithra Subramaniyam]

Hi Harald Stapfer,

We have tried to reproduce the issue but the Frozen Column scrolling is working fine at our end. Please refer to the below screenshot and sample link for more information.

https://stackblitz.com/edit/react-uwg4ew-7fgxx6?file=index.js

If you are still facing the issue, please share the below details which will be helpful for us to validate further.

1. Share the browser details.
2. Share the Syncfusion version.
3. Share ns issue reproducible sample.
4. Or try to reproduce the issue in the above sample.

Regards,

Pavithra S