Selection lost on sort/filter/reload

[Roberto Añonuevo]

Can anybody please tell me what's wrong with my TreeGrid configuration?
I've enabled persistence and selection persistence however, row selection still gets lost once the table gets reloaded/sorted/etc.

Notes:

I could see the rowSelecting and rowSelected events being triggered with the correct data being passed in the args, however the row still isn't getting selected in the table.

I'm currently on:

"@syncfusion/ej2-react-treegrid": "^27.2.3"

 Below is my code:

const gridComponent = useMemo(() => {

 return (

<TreeGridComponent

                id="table"

                enablePersistence={true}

                ref={gridRef}

                height="100%"

                width="100%"

                dataSource={datasource}

                parentIdMapping="parentKey"

                idMapping="rowKey"

                treeColumnIndex={1}

                pageSettings={{ pageSize: PAGE_SIZE }}

                allowPaging={true}

                allowSorting={true}

                allowFiltering={false}

                allowResizing={true}

                allowReordering={true}

                showColumnChooser={true}

                rowSelecting={handleRowSelecting}

                rowSelected={handleRowSelect}

                rowDeselecting={handleRowDeselect}

                dataBound={handleDataBound}

                toolbar={[

                    'ColumnChooser',

                    { text: 'Edit', tooltipText: 'Edit', prefixIcon: 'e-edit', id: 'editBtn' }

                ]}

                toolbarClick={(args) => {

                    if (args.item.id.includes('editBtn')) {

                        handleEdit();

                    }

                }}

                filterSettings={{ type: 'Excel' }}

                selectionSettings={{ type: 'Single', persistSelection: true, mode: 'Row' }}

                gridLines="None"

            >

                <ColumnsDirective>

                    <ColumnDirective

                        field="rowKey"

                        headerText="Session key"

                        isPrimaryKey={true}

                        visible={false}

                        showInColumnChooser={false}

                    />

                    <ColumnDirective

                        field="sessionDate"

                        headerText="Date"

                        textAlign="Left"

                        type="date"

                        format={config.dateFmtLng}

                    />

                   <ColumnDirective

                        field="code"

                        headerText="Code"

                        textAlign="Left"

                        template={codeTemplate}

                    />

                    <ColumnDirective

                        field="fullcode"

                        headerText="Full Code"

                        width="700"

                        textAlign="Left"

                        template={fullCodeTemplate}

                        visible={false}

                    />

                  <ColumnDirective

                        field="names"

                        headerText="Full Name"

                        textAlign="Left"

                        visible={false}

                        template={nameTemplate}

                    />

                </ColumnsDirective>

                <Inject services={[Page, Sort, Filter, Resize, Reorder, Toolbar, ColumnChooser]} />

            </TreeGridComponent>

        );

    }, [datasource]);

[Roberto Añonuevo]

Here is a stackblitz I forked from one of your examples that shows the same error:

https://stackblitz.com/edit/react-wzf7r84f?file=index.js

[Sreedhar Kumar Panarapu Sreenivasulu Panarapu]

Hi Roberto Añonuevo,

We checked your sample. To persist selection, you need to set the selection type to Multiple, as persistSelection works only with multiple selection. Please update your settings as below:

Code Snippet:

selectionSettings={{

type: 'Multiple',

persistSelection: true,

mode: 'Row'

}}

 

Updated sample:
https://stackblitz.com/edit/react-wzf7r84f-oq8vesat?file=index.js

Refer to the Grid documentation:
Selection in React Grid component | Syncfusion

We will update our TreeGrid documentation with this behavior.

Regards,

Sreedhar.

[Roberto Añonuevo]

Isn't this a bug? From the looks of it, the treeGrid uses the GridComponent underneath so it looks like it should work. Plus, the selection events still trigger on page reload which indicates that the treegrid is trying to load the saved settings.

[Sreedhar Kumar Panarapu Sreenivasulu Panarapu]

Hi  Roberto,

 

Thanks for sharing the sample.

 

We can replicate the issue of single selection with persistselection enabled and On further validation, we have considered the reported issue (“Selection Not Cleared After Actions When Single Selection & PersistSelection Enabled in EJ2 TreeGrid”) as a bug. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle) and will include the fix in our upcoming NuGet release which is expected to be rolled out on January 27, 2026. Until then we appreciate your patience.

 

You can now track the status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link. 

Selection Not Cleared After Actions When Single Selection & PersistSelection Enabled in EJ2 TreeGrid in React | Feedback Portal

 

 Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

 

Regards,

Sreedhar Kumar.

 

[Roberto Añonuevo]

Hi!

Thank you for your confirmation. In the meantime, we've implemented a workaround for this issue. 

Regards,

Robbie

[Sreedhar Kumar Panarapu Sreenivasulu Panarapu]

Hi  Roberto,

 

Thanks for the update. We will fix the bug and include in the January 27th release as promised.

 

Regards,

Sreedhar.

[Sreedhar Kumar Panarapu Sreenivasulu Panarapu]

Thank you for your patience.

 

We are glad to inform you that the fix for the issue "Selection Not Cleared After Actions When Single Selection & PersistSelection Enabled in EJ2 TreeGrid" has been included in our 32.1.25 release. Please upgrade to the latest version of the Syncfusion NuGet package to resolve the issue.

 

 

Sample:Ba1uuwt2 (duplicated) - StackBlitz

 

Root Cause:

• This issue occurs because the clearSelection method is not triggered when any row is selected after the sort action. As a result, the selection is maintained after sorting when a single row is selected with persistSelection enabled. This is the cause of the problem.

Solution:

• This issue is resolved by ensuring that clearSelection is triggered whenever any row is selected after performing a sort action. Therefore, the selection is cleared when single and persistSelection are enabled.

 

Please update to the latest version and let us know if you need any further assistance.

 

Best regards,

Sreedhar Kumar