Make displayAsCheckbox cell clickable and update current record

[Laurin S]

Hi,

how can I make a boolean column (cell), which gets visualised as a checkbox with the property "displayAsCheckbox", clickable and thus update the selected record.

(Please note, that I don't want to switch into the inline-edit-mode. Or at least not for the whole record... I want to keep the dialog-edit-mode on, but the user should be able to click on the checkbox to modify the record property.)

Thanks.

[Rajapandiyan Settu]

Hi Laurin,

Thanks for contacting Syncfusion support.

Based on your query, we could understand that you want to edit a column using checkbox control without moving the Grid into Edit mode. You can achieve this by using the updateRow method of Grid.

updateRow: https://ej2.syncfusion.com/react/documentation/api/grid/#updaterow

In the below code example, we have rendered the checkbox control using columnTemplate feature. In its change event, we dynamically updated the checked value to the Grid by updateRow method.

columnTemplate: https://ej2.syncfusion.com/react/documentation/grid/columns/column-template/

Change: https://ej2.syncfusion.com/react/documentation/api/check-box/#change

 

[index.js]

 

  colTemplate(args) {

    return (

      <CheckBoxComponent

        checked={args.Verified}

        change={this.checkboxChange.bind(this)}

      />

    );

  }

  checkboxChange(args) {

    var rowInfo = this.gridInstance.getRowInfo(args.event.target.closest('td')); // get the row details

    var updatedData = rowInfo.rowData;

    updatedData[rowInfo.column.field] = args.checked; // modify the row data

    this.gridInstance.updateRow(rowInfo.rowIndex, updatedData); // updateRow(rowIndex,data) which updates the data in dataSource 

  }

 

Sample: https://stackblitz.com/edit/react-yybqfb?file=index.js,index.html

Please let us know if you have any concerns.

Regards, 

Rajapandiyan S

[Laurin S]

Hi,

thanks for the quick reply. The provided solutions works partially.

When the edit-mode is equal to "Dialog" and I open edit-dialog of an entry, afterwards clicking on a checkbox in the grid crashes the app.

Error in /turbo_modules/[email protected]/cjs/react-dom.development.js (11102:15)

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Steps to reproduce the error:

1. Open the edit-dialog of an existing entry
2. Close the dialog (cancel)
3. Click on a checkbox of any entry in the grid
4. (Crash)

I've attached also the modified example that shows the error.

Any idea?

Attachment: reactyybqfbhyufqs_d3987ec7.zip

[Rajapandiyan Settu]

Hi Laurin,

Thanks for your update.

We have confirmed that the reported behavior is an issue from our side and logged this as - “Script error thrown when we perform Dialog Editing with columnTemplate feature”. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technical feasibility and Product Development Life Cycle ) and will include the defect fix in our upcoming patch release which will be rolled out on July 20^th, 2022.

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through the below link,

Feedback: https://www.syncfusion.com/feedback/36063/script-error-thrown-when-we-perform-dialog-editing-with-columntemplate-feature

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

Regards, 

Rajapandiyan S 

[Rajapandiyan Settu]

Hi Laurin,

Thanks for your patience.

We are glad to announce that our Essential Javascript2 patch release (v20.2.40) has been rolled out successfully and in that release, we have added the fix of “Script error thrown when we perform Dialog Editing with columnTemplate feature” issue. So, please update your Syncfusion packages to the current version and use the latest style script to get this.

Find the below sample for your reference.

Sample: https://stackblitz.com/edit/react-yybqfb-npyl1o?file=index.html,package.json

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require further assistance.

Regards,

Rajapandiyan S