We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

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

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

3 Replies

PG Praveenkumar Gajendiran Syncfusion Team August 4, 2021 12:56 PM UTC

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 



NR Nambi Ramamoorthy August 4, 2021 04:54 PM UTC


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



PG Praveenkumar Gajendiran Syncfusion Team August 5, 2021 12:24 PM UTC

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 you
r reference,

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

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 


Loader.
Live Chat Icon For mobile
Up arrow icon