Editable checkbox in grid

[LastCodeDE]

Hello everyone,

I am using version 15.4.29 on our project.

In my model is a column type boolean which one I want to display in the grid as checkbox. The checkbox should be editable, so when I click on the on the checkbox it will set check or uncheck. 

I found those two properties on the gridColumns:

displayAsCheckBox:true

- This displays only the value as checkbox but is not editable.

type: "checkbox"

- This command gives me an editable checkbox. Unfortunately it changes the type of the grid so it's multiple and one click on the row of the checkbox will be setted.

Maybe someone has a good idea or any sample code for me that I can use.

Why I need a checkbox with seperate click event in the grid? Because I want a double click event on the grid to open an edit mask and don't want that the checkbox will be changed

Regards

[Isuriya Rajan]

Hi LastCodeDE, 

  

Thanks for contacting Syncfusion support, 

  

Here we have used column template to render the checkbox in specific column. You can check and uncheck the checkbox. Based on the checked state we have prevented the edit in actionBegin event. When setting the args.cancel as a true it will prevent the editing operation. 

  

Please refer the below code example 

  

<ej-grid #grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar'(actionBegin)='Begin($event)'> 

        <e-columns> 

  <e-column headerText='Employee Image' width='150' [allowEditing] =false textAlign='center'> 

            <ng-template #template let-data> 

              <ej-checkbox #checkbox  [checked]="false"></ej-checkbox> 

            </ng-template> 

           </e-column> 

           <e-column field='OrderID' headerText='Order ID' width='125' textAlign='right'></e-column> 

           <e-column field='ShipCity' headerText='Ship City' width='120'></e-column>  

            </e-columns> 

  

    </ej-grid> 

  

[Component.ts] 

  

Begin(args){ 

if(args.requestType === 'beginEdit' && args.row.querySelectorAll('input[type="checkbox"]')[0].checked) 

   {alert("You cant edit this row") 

                args.cancel = true;//args.cancel  will prevent the editing operation 

            } 

    } 

  

Refer the below sample for your reference: 

  

Sample : http://plnkr.co/edit/tHwNT3ZyDhVxNYBLEaHe?p=preview 

  

1. displayAsCheckBox property  will display the checkbox based on the Boolean value in dataSource. If the Boolean value is true check box will display like a checked
2. type:checkbox we have maintain this for selection purpose.This will enable the checkbox selection

  

Regards, 

Isuriya  

[LastCodeDE]

@Isuriya Rajan

thank you for the fast answer.

On plunker it works but in our project when we are using ColumnModel it doesn't work.

The model is from "node_modules\@syncfusion\ej2-ng-grids\node_modules\@syncfusion\ej2-grids\src\grid\models\column.d.ts".

It works when I write "input type checkbox" in the property template but this looks not so good :-).

(See attachments (a1, a1_code)

The syncfusion checkbox doesn't work because the code will not executed

(See attachments (a2, a2_code, a2_debug)

All attachments are in the zip container.

Is there any idea what I can do?

Attachment: attachment_8c4ab71b.zip

[Isuriya Rajan]

Hi LastCodeDE, , 

 

We can render the checkbox inside template . Here we have included input checkbox element inside the template .And created the checkbox element inside the  rowDataBound event and append to the checkbox element.  

Refer the below code example 

                                                                                                                                                                                       

  let grid: Grid = new Grid({ 

        dataSource: data, 

        columns: [ 

            { 

                headerText: 'Order Status', 

                template: 

                `<input id="checked" type="checkbox" class="e-control e-checkbox">`, width: 140 

    }, 

    { field: 'OrderID', headerText: 'Order ID', textAlign: 'right', width: 100 }, 

], 

    height: 315, 

        rowDataBound: dataBound 

    }); 

    grid.appendTo('#Grid'); 

function dataBound(args: QueryCellInfoEventArgs): void { 

  let ele: HTMLSelectElement =args.row.querySelector('input[type=checkbox]'); 

    let checkBoxObj: CheckBox = new CheckBox({ checked: false}); 

     checkBoxObj.appendTo(ele); 

} 

Please get back to us. If you need further assistance. 

Regards, 

Isuriya R