using checkbox button only ( Not using dbclick Edit Mode )

[TaeWook Kang]

Hi, Syncfusion teams

As in the title, I want to be checked only when the check box is selected in the grid.

so,

Although checkbox only is set to true, it is automatically checked when editing by Dbclicking, and the proper manual to deal with this part is not visible.

<My code>

<ejs-grid id="DataInputGrid" created="GridCreated" allowSelection="true" gridLines="Both" rowHeight="30" height="500px" frozenColumns="5" allowTextWrap="true" cellEdit="cellEdit"

              toolbar="@(new List<string>() { "Add","Delete","Update","Cancel" })" >

        <e-grid-textwrapsettings wrapMode="Header"></e-grid-textwrapsettings>

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

        <e-grid-editSettings allowAdding="true" allowEditing="true" allowDeleting="true" mode="Batch" newRowPosition="Top"></e-grid-editSettings>

<e-grid-columns>

<e-grid-column type="checkBox" width="40" headerTextAlign="Center" textAlign="Center"></e-grid-column>

            @*Frozen Column*@

            <e-grid-column headerText="ARCHITECTURAL INFORMATION" headerTextAlign="Center" textAlign="Center"

                           columns="@(new List<Syncfusion.EJ2.Grids.GridColumn>() {

                    new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "ROOM INFORMATION", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List<Syncfusion.EJ2.Grids.GridColumn>(){

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "RM_SNO" , MinWidth = "80", Width = "120", HeaderText = "KEY" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Left},

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "ROOM_NO" , MinWidth = "80", Width = "90" , HeaderText = "ROOM NO." , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, ValidationRules = new { required=true}},

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "AIR_SYS_NM", MinWidth = "80", Width = "90" , HeaderText = "AIR SYSTEM NAME", DefaultValue = "1", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Edit = new { create = "ASN_Create", read = "ASN_Read", destory = "ASN_Destory", write = "ASN_Write" }},

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "RM_NM" , MinWidth = "80", Width = "140", HeaderText = "ROOM NAME" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Left, ValidationRules = new { required=true}}}

                    }})">

            </e-grid-column>

 </e-grid-columns>

    </ejs-grid>

<end>

can i solve it?

please give me a solution.

Thanks and regards

[Pavithra Subramaniyam]

Hi TaeWook, 

 

Thanks for contacting Syncfusion support. 

 

By default, the checkbox column is used for Row selection. And while doing the cell edit action the row will get selected. So that the checkbox is checked automatically. This is the default behavior. However, you can prevent the selection by setting cancel property inside the “rowSelecting” event based on your condition. Please refer to the below code example and documentation link for more information. 

 

<ejs-grid id="DataInputGrid" allowSelection="true" gridLines="Both" rowHeight="30" height="500px" frozenColumns="5" allowTextWrap="true" 

          toolbar="@(new List<string>() { "Add","Delete","Update","Cancel" })" cellEdit="cellEdit" rowSelecting="rowSelecting"> 

 

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

     .  .  .  

</ejs-grid> 

 

<script> 

    var flag = false; 

    function rowSelecting(e)  { 

        if (flag) { 

            // canceling the row selection 

            e.cancel = true; 

            flag = false; 

        } 

    } 

    function cellEdit(e) { 

            // here you can set the flag as per your requirement 

            flag = true; 

        } 

    </script> 

 

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

 

Regards, 

Pavithra S