How to disable selection checkbox for a perticular row on condition basis?

[Sharad Hake]

I have a data in datagrid. I added a checkbox selection in that datagrid. Now I want to disable some checkboxes on conditional basis like if the data.stage is rejected then I to disable selection on that row. Can you please help with that? Thank you.

const selectionSettings = {

type: 'checkbox',

headerCheckboxSelection: true ,

checkboxOnly:true};

<GridComponent dataSource={data} ref={grid => gridInstance = grid}

recordClick={recordClick}

toolbar={toolbarOptions} allowPaging={true}

allowGrouping={true} allowSorting={true} allowFiltering={true}

showColumnMenu={true} groupSettings={groupOptions} filterSettings={filterSettings}

pageSettings={{ pageSize: 100, pageCount: 10 }}

selectionSettings={selectionSettings}

rowSelected={handleRowSelected}

rowDeselected={handleRowDelected}

rowDataBound={rowDataBound}

load={load}

// headerCheckboxSelection={true}

>

<ColumnsDirective >

<ColumnDirective headerCheckboxSelection={true} type="checkbox"

width='50' />

<ColumnDirective field='fullName' headerText='Name' template={candidateNameTemplate} width='80' textAlign='Left'></ColumnDirective>

<ColumnDirective field='candidateProfile' headerText='Position' width='80' textAlign='Center'></ColumnDirective>

<ColumnDirective field='candidateResume' headerText='Name' width='50' template={resumeTemplate} textAlign='Center'></ColumnDirective>

<ColumnDirective field='candidateExpInYears' headerText='Experience' width="80" template={experienceTemplate} textAlign='Center' />

<ColumnDirective field='createdAt' headerText='Applied On' width="80" template={appliedOnTemplate} textAlign='Center' />

<ColumnDirective field='noticePeriod' headerText='Notice Period' width='90' template={noticePeriodTemplate} textAlign='Center'></ColumnDirective>

<ColumnDirective field='stage.name' headerText='Stage' width='80' template={stageTemplate} textAlign='Center'></ColumnDirective>

<ColumnDirective field='candidateSource' headerText='Source' width='80' template={sourceTemplate} textAlign='Center'></ColumnDirective>

<ColumnDirective field='' showColumnMenu={false} headerText='Action' width='80' template={deleteTemplate} textAlign='Center'></ColumnDirective>

</ColumnsDirective>

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

</GridComponent>

[Rajapandi Ravi]

Hi Sharad,

Greetings from Syncfusion support

Since your requirement is to prevent specific rows from being selected in checkbox selection, you can prevent specific rows from being selected in the checkbox selection mode by hiding the checkboxes using the rowDataBound event. You achieve this by setting the isSelectable argument as false in the rowDataBound event based on certain conditions as per the needs of the application. we have already discussed about your requirement in our documentation which can be accessed from the below link,

Documentation: https://ej2.syncfusion.com/react/documentation/grid/selection/check-box-selection#prevent-specific-rows-from-being-selected-in-checkbox-selection

Regards,

Rajapandi R