Check boxes in the remote data binding grid

[TaeWook Kang]

There are some questions in the grid check box

This is my code.

   <ejs-grid gridLines="Both" allowResizing="true" allowSelection="true" allowTextWrap="true" width="auto" height="620px" created="CodeGridBinding" toolbar="@(new List<string>() { "Update", "Cancel" })">
                       <e-grid-editsettings allowAdding="false" allowDeleting="false" allowEditing="true" mode="Batch"></e-grid-editsettings>
                       <e-grid-textwrapsettings wrapMode="Header"></e-grid-textwrapsettings>
                       <e-grid-selectionsettings checkboxOnly="true" type="Single" ></e-grid-selectionsettings>
                       <e-grid-columns>
                           <e-grid-column field="USE_YN" type="checkbox" headerTextAlign="Center" textAlign="Center" width="30"></e-grid-column>
                           <e-grid-column field="MTO_KEY" headerText="MTO KEY" headerTextAlign="Center" textAlign="Right" width="40"></e-grid-column>
                           <e-grid-column field="MATL_DESC" headerText="DESCRIPTION" headerTextAlign="Center" textAlign="Left" width="250" allowEditing="false"></e-grid-column>
                           <e-grid-column field="MATL_CD_STD" headerText="CODE" headerTextAlign="Center" textAlign="Left" width="120" allowEditing="false"></e-grid-column>
                           <e-grid-column field="MATL_CD" headerText="CODE(INNER)" headerTextAlign="Center" textAlign="Left" width="120" allowEditing="false"></e-grid-column>
                           <e-grid-column field="PARENT_MATL_CD" headerText="PARENT CODE" headerTextAlign="Center" textAlign="Left" width="120" allowEditing="false"></e-grid-column>
                       </e-grid-columns>
                   </ejs-grid>

Q1. When specifying a check box remotely, the first check box is not visible

Specify the check boxes for the grid as remote data.

I want to specify the field name of the check box and configure it to be checked only when the value is true.

However, the first check box that gives the value of the field as remote data is not selected.

Also, you can't see the bottom grid line.

Q2. Update check box when binding to remote data

Modifying the check box changes the color of some rows on the screen like traditional updates, but some do not work.

I want to change the color when the remotely imported data is modified in the grid and pass the value to the database when I press the Update button on the toolbar.

Q3. The phenomenon in which the checkbox is selected when modifying a row

Modifying a row releases all existing selected check boxes.

I hope the value of the check box that was checked will remain the same even when the modification is started.

In addition, there is a phenomenon that the check box is selected when modifying other cells even though the 'checkbox only' option is given.

I would appreciate it if you could answer three questions after watching the video.

Attachment: gridcheckbox_efe9a25a.zip

[Vinitha Balasubramanian]

Hi TaeWook,

Thank you for reaching out to Syncfusion support.

Query1 : When specifying a check box remotely, the first check box is not visible

In EJ2 Grid, the checkbox column is used to select multiple rows in the Grid and cannot be used for grid actions such as editing or filtering. It is only for selection purposes. Also, we want to let you know that the checkbox column will be checked or unchecked during the initial rendering based on the field value. And the checkbox change will not affect the Grid dataSource.

It is also not possible to edit the checkbox column. If you want to edit a boolean column, you can set the type as “Boolean”. Please check the verified column in the attached sample.

Query1.1: can't see the bottom grid line.

To resolve the issue you reported, we recommend using the latest version of the Syncfusion package.

Query2: Update check box when binding to remote data

In EJ2 Grid, the checkbox column is used to select multiple rows. However, it is not possible to edit this column.

Query2.1: I want to change the color

You can use the following CSS to change the background color of the edited cell.

<style>

    .e-grid td.e-updatedtd {

        background-color: red;

        color: #000;

    }

</style>

If it doesn’t meet your exact requirement, kindly share the exact requirement with detailed description to proceed your query from our side.

Query3: The phenomenon in which the checkbox is selected when modifying a row

In EJ2 Grid, the checkbox column is used to select multiple rows, however, it cannot be used for grid actions such as editing or filtering. It is only for selection purposes. Also, it is not possible to edit the checkbox column. If you wish to edit a boolean column, you can set the type as “Boolean”.

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_grid_local_remote_batch_edit850017936

Regards,

Vinitha Balasubramanian