Batch edit validation tooltip position

[Ivica]

Hello.

Is it possible to customize the default location of the validation error tooltips in batch edit mode? My grid is inside a draggable dialog object, and when a validation tooltip appears in the bottom row, it gets cutoff by the dialog:

Is it possible to make the tooltips appear above the fields, or get the appended to body, so they appear above the dialog?

Thanks.

[Rajapandi Ravi]

Hi Ivica, 

Greetings from syncfusion support 

We have analyzed your query and we could see that you like to positioning the validation error message. We have already discussed about your requirement in our kb. So please follow the below kb to achieve your requirement. 

Kb: https://www.syncfusion.com/kb/11217/how-to-positioning-the-validation-error-message 

Regards,
Rajapandi R 

[Ivica]

Thank you for the pointer. Those events do not fire in batch editing mode though. I tried 'beginEdit', and it also does not fire in batch mode. What is the correct event to use? cellEdit doesn't seem to work, because grid.editModule.formObj is not present.

[Rajapandi Ravi]

Hi Ivica, 

Thanks for the update 

We have analyzed your query and we could see that you like to positioning the validation error message on top of the fields in batch edit mode. Based on your query we have prepared a sample and achieved your requirement by overriding grid customPlacement() method. Please refer the below code example and sample for more information. 

function positioning() { 

      var grid = (document.getElementById('Grid') as any).ej2_instances[0]; 

          var valError = getObject('valErrorPlacement', grid.editModule).bind(grid.editModule); 

          grid.editModule.formObj.customPlacement = function (input, error) { 

            debugger; 

            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'; 

        } 

    } 

    function cellEdit(args) { //cellEdit event of Grid 

           args.cell.addEventListener("keydown", e => { //bind keydownevent to the cell 

                if(e.key === "Enter") { 

                  positioning(); 

                } 

        }); 

        args.cell.addEventListener("focusout", e => { //bind focusout event to the cell 

                  positioning(); 

        }); 

    } 

 

Index.html 

<style> 

            body{ 

                touch-action:none; 

            } 

            .e-gridform .e-arrow-tip.e-tip-top { 

            transform: rotate(180deg); 

            top: 21px; 

        } 

        </style> 

Sample: https://stackblitz.com/edit/tudoct-7hg89g?file=index.ts 

Screenshot: 

 

Regards, 

Rajapandi R