How to positioning the validation error message in JavaScript Grid?

3 mins read

Problem discussion

JavaScript Grid provides an option to pops an error after validating the form fields. The placement of the tooltips would be just below/above field elements with respect to its position which is the default behavior. Some users would like to show them either in 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 them 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 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

error on right of form

Figure 1: Errors placed right to the form fields

Errors on left of form

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

I hope you enjoyed learning about how to positioning the validation error message in JavaScript Grid.

You can refer to our JavaScript Grid feature tour page to know 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, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)