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
}
}
}
};
}
} |
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)
} |
