How to positioning the validation error message in JavaScript Grid?
Problem discussion
In JavaScript Grid provides an option to pop an error after validating the form fields. The placement of the tooltips would be just below/above the field elements with respect to their position, which is the default behavior. Some users would like to show them either on the right or left of the respective form fields.
Solution
To achieve the required placement of the tooltip error, you need to override the customPlacement functionality of the Grid’s Edit Module.
Define the Grid with the required number of columns with the validation rules. Bind an actionComplete event of the Grid where you can customize the functionality of the cutomPlacement method.
import { Grid, Edit, Toolbar, Page, parentsUntil, getObject } from '@syncfusion/ej2-grids';
import { orderData } from './data-source';
/**
* Dialog Editing sample
*/
Grid.Inject(Edit, Toolbar, Page);
let grid: Grid = new Grid(
{
dataSource: orderData,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' },
allowPaging: true,
pageSettings: { pageCount: 5 },
actionComplete: onActionComplete,
toolbar: ['Add', 'Edit', 'Delete'],
columns: [
{
field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', textAlign: 'Right',
validationRules: { required: true, number: true }, width: 120
},
{
field: 'CustomerID', headerText: 'Customer ID',
validationRules: { required: true }, width: 140
},
},
{
field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit',
width: 120, format: 'C2', validationRules: { required: true }
},
{
field: 'OrderDate', headerText: 'Order Date', editType: 'datepickeredit',
format: 'yMd', width: 170, validationRules: { required: true }
},
{
field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150,
edit: { params: { popupHeight: '300px' } }, validationRules: { required: true }
}],
});
grid.appendTo('#Grid');
Define the actionComplete event
In the actionComplete event, override the cutomPlacement method, where you can place the tooltip element for any form field based on its position. The following code demonstrates the way to place the tooltip to the form field’s right.
var onActionComplete = (args) => {
if (args.requestType == "beginEdit" || args.requestType == "add") {
var valError = getObject('valErrorPlacement', grid.editModule).bind(grid.editModule);
grid.editModule.formObj.customPlacement = function (input, error) {
valError(input, error);
var leftPOS = '-1px';
var topPOS = '-1px';
var elem = document.getElementById(input.name + '_Error');
var tooltipWidth = elem.offsetWidth;
var formWidth = parentsUntil(input, 'e-gridform').getBoundingClientRect().width;
var inputElem = null;
if (document.querySelector('#' + grid.element.id + input.name)) {
inputElem = document.querySelector('#' + grid.element.id + input.name);
} else if (document.querySelector('#' + input.name)) {
inputElem = document.querySelector('#' + input.name);
}
var pos = inputElem.getBoundingClientRect();
leftPOS = (pos.left + formWidth).toString() + 'px'; //for right side
topPOS = (pos.top).toString() + 'px';
elem.style.left = leftPOS;
elem.style.top = topPOS;
elem.style.position = 'fixed'
}
}
} Place the tooltip tail
Using the following CSS, change the placement of the tooltip tail and move it to the left of the tooltip.
.e-gridform .e-arrow-tip.e-tip-top {
transform: rotate(263deg);
left: -10px;
top: 9px;
}
Left side placement
You have to redefine the actionComplete event and add the CSS for placing the tooltip to the left of the form fields.
var onActionComplete = (args) => {
if (args.requestType == "beginEdit" || args.requestType == "add") {
var valError = getObject('valErrorPlacement', grid.editModule).bind(grid.editModule);
grid.editModule.formObj.customPlacement = function (input, error) {
valError(input, error);
var leftPOS = '-1px';
var topPOS = '-1px';
var elem = document.getElementById(input.name + '_Error');
var tooltipWidth = elem.offsetWidth;
var formWidth = parentsUntil(input, 'e-gridform').getBoundingClientRect().width;
var inputElem = null;
if (document.querySelector('#' + grid.element.id + input.name)) {
inputElem = document.querySelector('#' + grid.element.id + input.name);
} else if (document.querySelector('#' + input.name)) {
inputElem = document.querySelector('#' + input.name);
}
var pos = inputElem.getBoundingClientRect();
leftPOS = (pos.left - tooltipWidth - 16).toString() + 'px'; // for left side pop
topPOS = (pos.top).toString() + 'px';
elem.style.left = leftPOS;
elem.style.top = topPOS;
elem.style.position = 'fixed'
}
}
}
.e-gridform .e-arrow-tip.e-tip-top {
top: 9px;
transform: rotate(100deg);
left: 118px;
}
Output
Figure 1: Errors placed right to the form fields
Figure 2: Errors placed left to the form fields
Typescript demo: https://stackblitz.com/edit/e2odbc-pnkyso?file=index.html
Angular Demo: https://stackblitz.com/edit/angular-validation-dlg?file=app.component.ts
React Demo: https://stackblitz.com/edit/react-ymbpuu?file=index.js
Conclusion
We hope you enjoyed learning about how to position the validation error message in JavaScript Grid.
You can refer to our JavaScript Grid feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Grid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!
