Enquiry about Checkbox in Multiselect and custom 'Tab' key function

[Tan Ken Sing]

Hi,

You may refer below URL for the sample source code
https://stackblitz.com/edit/angular-multiple-edittypes-yq3sth-3qhrv3-tl8wqs?file=app.component.css,app.component.html,app.component.ts

Query 1:

When I try to use the MultiSelect with mode 'CheckBox' it will not show the checkbox correctly. It also will not allow to select the value properly. Is there any way to handle the mode 'CheckBox' when applying like figure below?

Query 2

Currently, the 'Tab' key will move cell by cell. Is there any way to override it to move only the column like figure below?

Query 3

Currently, I unable to change the style for the checkbox from red to blue although I had reference the following tag for the appearance. Is there any way to change the checkbox color from red to blue?
https://ej2.syncfusion.com/angular/documentation/multi-select/checkbox

Query 4

Is there got method to allow us to edit the cell when we try to enter a key except for those key like 'Tab', 'Delete' or any key that is used for command,

[Rajapandi Ravi]

Tan,

Query 1: Is there any way to handle the mode 'CheckBox' when applying like figure below

You can display the checkbox in the multiselect dropdownlist by injecting the CheckboxSelection. Please refer the below code example and sample for more information.

 

import { CheckBoxSelection } from '@syncfusion/ej2-dropdowns';

 

MultiSelect.Inject(CheckBoxSelection);

 

Sample: https://stackblitz.com/edit/angular-od2tji-tp1ccb?file=src%2Fapp.component.ts,src%2Fapp.component.html

Query 3: I unable to change the style for the checkbox from red to blue

You can customize the appearance of the CheckBox component using the CSS rules. Please refer the below documentation for more information.

Documentation: https://ej2.syncfusion.com/documentation/check-box/how-to/customized-checkbox/

Query 2 and 4:

Before we start providing solution to your query we need some more information for our clarification, so please share the below details that would be helpful for us to provide better solution.

1)             Share your exact requirement scenario step by step with detailed description.

2)             Share your requirement scenario in pictorial representation or video demonstration format.

[Tan Ken Sing]

Thanks for you suggestion and Sorry for the late reply,

Query 1: It works as expected. Thanks

Query 3: I try applying css and follow by assigning the cssClass, it still unable to show the style correctly

https://stackblitz.com/edit/angular-multiple-edittypes-yq3sth-3qhrv3-hxvosh?file=app.component.css,app.component.html,app.component.ts,angular.json

Query 2:

Requirement:

Currently, we want to move the editing field column to downward when we press 'Tab'. Existing behaviour will move to different column

Query 4

Requirement :

1) This ensure the selected row will be in edit mode if we pressed any key except key 'Tab' or 'Delete'

2) An example to override existing key function.

[Rajapandi Ravi]

Tan,

Query 3: I try applying css and follow by assigning the cssClass, it still unable to show the style correctly

We have validated the provided sample and suggested to set encapsulation as None to load the custom css in the angular component. Please find the following code and sample for your reference.

encapsulation: ViewEncapsulation.None,

Sample: https://stackblitz.com/edit/angular-multiple-edittypes-yq3sth-3qhrv3-qkrnhm?file=app.component.css,app.component.html,app.component.ts,angular.json

Query 2: Requirement: Currently, we want to move the editing field column to downward when we press 'Tab'. Existing behaviour will move to different column.

In currently EJ2 DataGrid select the next row while pressing down arrow key. This is default behaviour.  When the Grid is edit state, then If you want to move the next row edit we have suggested to use ‘Enter key’. It is automatically to move to edit state on next row.

Query 4 Requirement : This ensure the selected row will be in edit mode if we pressed any key except key 'Tab' or 'Delete'

We have achieved your requirement by using ‘keydown’ event and editCellMethod in Grid. Please find the code example and sample your reference.

<div class="control-section">

  <ejs-grid

    #grid

    [dataSource]="data"

   . . .

    (keydown)="onKeyPressed($event)">

 

 

. . .

 

 onKeyPressed(e: any) {

    if (e.target.classList.contains('e-rowcell')) {

      if (e.keyCode !== 9 && e.keyCode !== 46) {

        this.grid.editModule.editCell(

          e.target.parentElement.rowIndex,

          e.target.attributes['aria-label'].nodeValue.split(' ')[3]

        );

      }

    }

  }

Sample:
https://stackblitz.com/edit/angular-multiple-edittypes-yq3sth-3qhrv3-hxvosh?file=app.component.css,app.component.html,app.component.ts,angular.json