Record selection is lost when clicking on expand/collapse buttons on other records.

[Viji Palanisamy]

Record selection is lost when clicking on expand/collapse buttons on other records. I Have used Group By on a specific column and selected a  record and then when expanding next record to expand . Existing selection is lost.

I have attached a screenshot of it:

[Vasanthakumar K]

Hi Viji Palanisamy,

Greetings from Syncfusion support.

We have validated your query and understand that you need to persist normal row selection when clicking expand and collapse of other grouped caption rows. By default, the grid doesn’t persist selection, but if we enable persistence by setting selectionSettings.persistSelection as true with the primary key defined in one unique data column, we can persist row selection. We have already discussed this topic in our Angular documentation below, and we will update the React documentation soon.

Based on your requirements, we have prepared a sample to achieve this. In that sample, we define one checkbox column with visible false, set one column as the primary key, and also set selectionSettings.persistSelection as true to meet your requirements and it works like checkbox selection functionality (maintain multiple row selection). You can refer to the code example, sample, and documentation below for more details.

[code example]

<GridComponent dataSource={orderDataSource}

                allowPaging={true}

                ref={grid => gridInstance = grid}

                toolbar={toolbarOptions}

                pageSettings={{ pageCount: 5 }}

                editSettings={editSettings}

                selectionSettings={{persistSelection: true}}

                allowGrouping={true}

                groupSettings={groupOptions}

                allowSorting={true} height="320"

                dataBound={dataBound.bind(this)}

                created={created}>

                    <ColumnsDirective>

                        <ColumnDirective headerText='id' type="CheckBox" visible={false} width="70"/>

                        <ColumnDirective field='OrderID' headerText='Order ID' width='140' textAlign='Right' validationRules={orderidRules} isPrimaryKey="true"></ColumnDirective>

                        . . . . . . . .

                        <ColumnsDirective>

</GridComponent>

Sample: 186986-expand-colpse-selection-persist - StackBlitz

Angular documentation: Row selection in Angular Grid component | Syncfusion

Regards,

Vasanthakumar K

[Viji Palanisamy]

I fixed the issue and it work as expected. Thanks

[Vasanthakumar K]

Hi Viji Palanisamy,

We are happy to hear that our provided solution was helpful for your problem.

Kindly get back to us if you have any further queries. As always, we will be happy to assist you.

Regards,

Vasanthakumar K