Rendering Checkbox in ejs-grid as enabled

[Vaishali Goyal]

Hi,

I want to make a grid that consistes of checkbox columns, but currently the displayAsCheckBox property shows checkboxs disabled on render,
is there a way to show checkboxes enabled from start. 
I dont want to use double or single click to enable the checkboxes.

They appear to be disabled, I have to click on them to make them editable.
can we remove that extra click used and checkboxes to be editable from start.

Thanks

Regards

Vaishali Goyal

[Praveenkumar Gajendiran]

Hi Vaishali,

Greetings from Syncfusion support.

We checked your query and the provided details, Before proceeding further please confirm with us the following information to clearly understand your requirement, 

• Based on your provided information, we suspect that you wish to render the checkbox component for particular column, and update the dataSource value while check and uncheck the checkbox . So please confirm us if your requirement is as mentioned with more details.
• If not, could you please explain/elaborate on your exact requirement with video or pictorial representation(if possible) based on which we will validate from our end and provide the further details.

Regards,
Praveenkumar G 

[Vaishali Goyal]

Hi Praveen,

In the current scenario, I am able to update datasource and perform actions on checkbox in a column but the issue is if I set column property "displayAsCheckBox" to true,
the checkboxes thus applied seems to be disabled on initial rendering. I want them to be editable from start rather than double or single clicking them to make them editable explicitly.

What I have:

What I want it to be:

I hope this clarifys my requirements.

Thanks

Regards

Vaishali Goyal

[Praveenkumar Gajendiran]

Hi Vaishali, 

Thanks for your update.

Query: “the checkboxes thus applied seems to be disabled on initial rendering. I want them to be editable from start rather than double or single clicking them to make them editable explicitly.” 

You can achieve your requirement by using columnTemplate feature and updateRow method of Grid. We have prepared a sample based on this for your reference.

In the below sample, we have rendered the checkbox component through columnTemplate feature and update the checkbox changes to the dataSource using updateRow method of Grid. 

Sample: https://stackblitz.com/edit/angular-hwvduu?file=app.component.ts

Screenshot: 

<ejs-grid 

      #normalgrid 

      id="Normalgrid" 

      [dataSource]="data" 

      allowPaging="true" 

      [pageSettings]="pageSettings" 

      [editSettings]="editSettings" 

      [toolbar]="toolbar" 

    > 

      <e-columns> 

        <e-column 

          field="OrderID" 

          headerText="Order ID" 

          width="140" 

          textAlign="Right" 

          isPrimaryKey="true" 

          [validationRules]="orderidrules" 

        ></e-column> 

……………
        <e-column 

          field="Verified" 

          headerText="Verified" 

          [allowEditing]="true" 

          editType="booleanedit" 

          width="100" 

        > 

          <ng-template #template let-data> 

            <ejs-checkbox 

              [checked]="data.Verified" 

              (change)="checkboxChange($event, data)" 

            ></ejs-checkbox> </ng-template>
          </e-column> 

      </e-columns> 

    </ejs-grid> 

--------------------------------------------------------------------------
[app.component.ts]

// checkbox change function
public checkboxChange(args: any, data): void { 

    data[data.column.field] = args.checked; // checkbox value 

    this.grid.updateRow(args.event.target.closest('tr').rowIndex, data); // update the checkbox change value to the dataSource by passing current rowIndex and updated data to the updateRow method 

  } 

Refer the below API documentation for updateRow method of Grid.

API Link: https://ej2.syncfusion.com/angular/documentation/api/grid/#updaterow

Please get back to us if you need further assistance.

Regards,
Praveenkumar G 

[Vaishali Goyal]

Hi,

We do not want to make use of ng-template for this.

Do you have any plans of including this property to "displayAsCheckBox" in near future releases so we will wait till then.

Thanks 

Regards

Vaishali Goyal

[Praveenkumar Gajendiran]

Hi Vaishali, 

Thanks for your update.

We would like to inform you that by default Grid’s displayAsCheckBox property  is used only for Grid’s display proposal. We can edit and update the Grid row value only when the row is moved to edit state.  

In the Grid edit state, you can render the CheckBox component for the boolean data type column for editing by setting the columns.editType as “booleanedit”. More details on this can be checked in the below documentation link.

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/edit/#cell-edit-type-and-its-params

So, we cannot able to edit or update the Grid row value without moving the row to the Grid edit state. This is the default behavior for the current grid architecture.  

Regards,
Praveenkumar G 

[Nagendra Gupta]

Hi Team,

Is There any plan for multiple checkbox column without template

[Rajapandiyan Settu]

Hi Nagendra,

Thanks for contacting Syncfusion support.

By default, the EJ2 Grid edits only one record at a time and can’t edit multiple rows at a time. We can edit a row by double-clicking it or executing the editRecord programmatically. So, the Grid will create a form to edit a row. Since this is the architecture of EJ2 Grid editing.

So, it is not feasible to render the multiple columns with editable state at the initial render.

By setting the columns.editType as “booleanedit”, Grid renders the CheckBox component to edit a column.

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/edit/#cell-edit-type-and-its-params

Regards,

Rajapandiyan S