select only one checkbox in the asp.net core grid

Hi. I want to select only one checkbox. I user select another, the previous selection will be remove. 

<div class="row tbl-padding">

            <div class="col-md-12">

                <ejs-tooltip id="Tooltip" target=".e-rowcell" beforeRender="beforeRender">

                    <e-content-template>


                        <ejs-grid id="Grid" dataSource="@Model" allowSelection="true" toolbar="@( new List<string>() { "Search" })"

                                  allowSorting="true" allowPaging="true" allowFiltering="true" allowResizing="true" allowReordering="true"

                                  >


                            <e-grid-selectionsettings type="Single"></e-grid-selectionsettings>


                            <e-grid-filterSettings type="Excel"></e-grid-filterSettings>


                            <e-grid-pagesettings id="pageSizes_Main" pageSizes="@(new string[] { "5", "10" , "20", "All" })" pageSize="10" pageCount="5"></e-grid-pagesettings>

                            <e-grid-columns>


                                <e-grid-column type="checkbox" width="50"></e-grid-column>

                                <e-grid-column headerText="DETAILS" template="#actionColumnTemplate" width="75px" headerTextAlign="Center"></e-grid-column>

                                <e-grid-column headerText="GAUGE TYPE" field="GaugeType_Name" width="150px"></e-grid-column>

                                <e-grid-column headerText="SIZE" field="ToolName_Size" width="100px"></e-grid-column>

                                <e-grid-column headerText="GRADUATION" field="ToolName_Graduation" width="130px"></e-grid-column>

                                <e-grid-column headerText="ACTUAL" field="ToolName_Actual" width="105px"></e-grid-column>

                                <e-grid-column headerText="DIAMETER" field="ToolName_Diameter" width="115px"></e-grid-column>

                                <e-grid-column headerText="LIMIT" field="ToolName_Limit" width="100px"></e-grid-column>


                                <e-grid-column headerText="ONSTOCK" field="ONSTOCK" width="115px" headerTextAlign="Left" textAlign="Right"></e-grid-column>

                                <e-grid-column headerText="RECEIVED" field="SumOfQtyReceive" width="118px" headerTextAlign="Left" textAlign="Right"></e-grid-column>

                                <e-grid-column headerText="WITHDRAW" field="SumOfQtyWithdraw" width="118px" headerTextAlign="Left" textAlign="Right"></e-grid-column>

                                <e-grid-column headerText="DEFECTIVE" field="SumOfQtyDefective" width="118px" headerTextAlign="Left" textAlign="Right"></e-grid-column>

                                <e-grid-column headerText="RETURN" field="SumOfQtyReturn" width="105px" headerTextAlign="Left" textAlign="Right"></e-grid-column>

                                <e-grid-column headerText="MISSING" field="SumOfQtyMissing" width="118px" headerTextAlign="Left" textAlign="Right"></e-grid-column>


                                <e-grid-column headerText="TOOL ID" field="ToolNameID" width="105px"></e-grid-column>


                            </e-grid-columns>


                        </ejs-grid>

                    </e-content-template>

                </ejs-tooltip>



            </div>

        </div>


1 Reply

PS Pavithra Subramaniyam Syncfusion Team July 14, 2023 01:33 PM UTC

Hi Rejz Arron,


By default, Checkbox selection is used for multiple Grid row selection. So, if you want to maintain only one selected row, you can achieve your requirement by using the “rowSelecting” event of the Grid component. Please refer to the below code example, the documentation link, and the sample link.


function rowSelecting(e) {

  if (grid.getSelectedRecords().length) {

    grid.clearSelection();

  }

}


https://ej2.syncfusion.com/javascript/documentation/api/grid/#rowselecting

https://ej2.syncfusion.com/javascript/documentation/api/grid/#getselectedrecords

https://ej2.syncfusion.com/javascript/documentation/api/grid/#clearselection


Please get back to us if you need further assistance on this.


Regards,

Pavithra S


Loader.
Up arrow icon