Set Focus to Specific Cell after make textbox empty in Normal Edit Grid Mode

[Nambi Ramamoorthy]

I am using syncfusion ejs-grid in angular . Whenever user editing the row and make the mandatory textbox as empty and click on save (or outside of the grid) the Validation error message is displaying .

1. How to set AutoFocus to the specific cell input which is mandatory in that row on the grid?
2. Also, I didn't set the height to the grid. First row is getting disappeared / truncated when user tries to add a record for the first time and clicks outside the fields without entering Field values . (Attached screenshot for this behaviour)

Thanks

Nambi R

[Praveenkumar Gajendiran]

Hi Nambi,

Greetings from Syncfusion support.

Query1: “How to set AutoFocus to the specific cell input which is mandatory in that row on the grid?”

Based on your query, we would like to inform you that by default in EJ2 Grid, first editable element of the form will be focused. This is our default behavior of EJ2 Grid. Based on your provided screenshot, we could see that you have an empty records in the Grid and adding a new record to the Grid, in this case, which cell element do you want focus? Please explain/elaborate on your exact requirement with more details.

Query2: “Also, I didn't set the height to the grid. First row is getting disappeared / truncated when user tries to add a record for the first time and clicks outside the fields without entering Field values”

Based on your query, we would like to inform you that when the Grid content height exceeds the element height, the scroller will be appear automatically in order to view the complete Grid content. This is the default behavior of HTML Table.

If the Grid element is in the scrollable view and it has space at the bottom, then the Grid’s form validation tooltip will have enough space to be rendered and displayed there. So for this case, you can scroll up to see that validation tooltip which is the default behavior.

However, you can use the height property of the Grid to resolve your reported problem which allows to increase the Grid element height. Please refer the below code example and sample for more information.

Code Example: 

<ejs-grid 

      #normalgrid 

      id="Normalgrid" 

      [dataSource]="data" 

      allowPaging="true" 

      [pageSettings]="pageSettings" 

      height="100" 

      [editSettings]="editSettings" 

      [toolbar]="toolbar" 

    > 

      <e-columns>
……………….. 

      </e-columns> 

    </ejs-grid> 

Sample: https://stackblitz.com/edit/angular-2hk1eg?file=app.component.html

Please get back to us if you need further assistance.

Regards,
Praveenkumar G 

[Nambi Ramamoorthy]

Hi Praveenkumar,

Query1: “How to set AutoFocus to the specific cell input which is mandatory in that row on the grid?”

My scenario is like, I am editing a row(Inline editing) in grid, and clear\empty the text in mandatory field textbox, then click on Save button (or outside of grid), then it shows the validation error message but I need it to be auto focus on the required textbox field  (screenshot below). 

Query2: “Also, I didn't set the height to the grid. First row is getting disappeared / truncated when user tries to add a record for the first time and clicks outside the fields without entering Field values”

1. How the set the grid height when adding new row to the grid ?
2. How to get the row count in Grid ?

Thanks

Nambi R

[Praveenkumar Gajendiran]

Hi Nambi,

Thanks for your update. 

Query1: “it shows the validation error message but I need it to be auto focus on the required textbox field” 

Based on your query, we could see that you want to highlight/focus the column cell which have the validation error message. For this, we suggest you to use the below solution, in that we used Grid’s actionComplete event and FormValidator’s validationComplete event to highlight/focus the column cell which have the validation error message as demonstrated in the below code example.

Code Example: 

actionComplete(args) { //grid’s actionComplete event 

    if (args.requestType == 'beginEdit' || args.requestType == 'add') { 

      var form = args.form.ej2_instances[0]; //form validator 

      form.validationComplete = function(args) { //form validator’s validationComplete event 

        if (args.status == 'failure' &&!args.element.parentElement.classList.contains('e-input-focus')) { 

          args.element.parentElement.classList.add('e-input-focus');  //add highlight/focus class to the column cell element when validation status is failure 

          if ( args.errorElement.parentElement.parentElement.style.display =='none') { 

            args.errorElement.parentElement.parentElement.style.display = ''; // here we show the error message tooltip if it is not shown 

          } 

        } else if (args.status == 'success' && args.element.parentElement.classList.contains('e-input-focus')) { 

          args.element.parentElement.classList.remove('e-input-focus'); // remove that highlight/focus class to the column cell element when validation status is success 

          var vError= args.element.closest('form').querySelectorAll('.e-griderror'); 

          for (var i = 0; i < vError.length; i++) { 

            if (vError [i].id == args.inputName + '_Error') { 

              vError [i].style.display = 'none'; // here we hide the error message tooltip if it is not hide 

            } 

          } 

        } 

      }; 

    } 

  } 

We have prepared a sample based on this for your reference,

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

API Link: https://ej2.syncfusion.com/angular/documentation/api/grid#actioncomplete
                 https://ej2.syncfusion.com/javascript/documentation/api/form-validator/#validationcomplete 

Query 2: “How the set the grid height when adding new row to the grid ?”

You have to set the height property of the Grid initially as shown in the below code example.

Code Example: 

<ejs-grid 

      #normalgrid 

      id="Normalgrid" 

      [dataSource]="data" 

      allowPaging="true" 

      [pageSettings]="pageSettings" 

      height="100" 

      [editSettings]="editSettings" 

      [toolbar]="toolbar" 

    > 

      <e-columns>
……………….. 

      </e-columns> 

    </ejs-grid> 

Query 3: “How to get the row count in Grid ?”

Based on your query, you want to get the row count in Grid, for this we suggest you to use the grid.pagerModule.pagerObj.totalRecordsCount in the Grid’s dataBound event as demonstrated in the below code example to achieve your requirement.

Code Example: 

dataBound(){  

      var rowCount=this.grid.pagerModule.pagerObj.totalRecordsCount; 

      console.log(rowCount) 

  } 

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

Please get back to us if you need further assistance.

Regards,
Praveenkumar G