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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to positioning the validation error message

Platform: JavaScript - EJ 2 |
Control: Grid

Problem discussion

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

 

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile