1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Multiple Page Validation

Multiple Page Validation

Hi,

I'm having a problem with the validation of my forms per row/cell. If my Grid contains page 1, validation works properly. But when the grid has more than one page, the validation error happens and I'm getting this error:


Uncaught TypeError: Cannot read properties of null (reading 'parentElement')

    at t.getErrorElement (<anonymous>:10:565646)

    at t.validateRules (<anonymous>:10:562650)

    at t.validate (<anonymous>:10:557775)


My suspicion is because page 1 is not accessible or not available in the dom.

Additional question:

  1. how to move/traverse to another page and focus on the newly added row?


Thanks,

Jane


3 Replies
RS Rajapandiyan Settu Syncfusion Team March 22, 2022 11:34 AM UTC

Hi Mary, 

Thanks for contacting Syncfusion support. 

Query #1: If my Grid contains page 1, validation works properly. But when the grid has more than one page, the validation error happens and I'm getting this error: 
Uncaught TypeError: Cannot read properties of null (reading 'parentElement') 

We are unable to reproduce the reported problem at our end. Find the below sample for your reference. 


Kindly share the below details to replicate the issue at our end. 

  1. Share the complete Grid code and Syncfusion package version.
  2. Are you using custom validation in the Grid columns?
  3. What are the features you have used in the Grid?
  4. Share the replication procedure and video demo of the issue.
  5. If possible, share the issue reproducible sample or try to make the issue in the given sample.

Query #2: how to move/traverse to another page and focus on the newly added row? 

By default, the Form will be closed when we perform another data actions like Paging, Sorting, Filtering, Grouping, etc., in the Grid. Since this is the behavior of EJ2 Grid. 

Are you want to render the Add form while navigating to other page like below image? 

Screenshot: 
 

If this is not your requirement, kindly elaborate it to proceed further. 

Regards, 
Rajapandiyan S 


MJ Mary Jane Buenaventura March 23, 2022 07:49 PM UTC

each row and column are displayed with input components. I iterate with the dataSource to create FormValidator object to validate those fields. But when the Grid reached the 2nd page, since the page 1 inputs are not loaded in the dom/html it throws that error. 


RS Rajapandiyan Settu Syncfusion Team March 24, 2022 12:13 PM UTC

Hi Mary, 

Thanks for your update. 

By default, Grid have the support to edit only one row at a time. But by analyzing your query, we could see that you are rendering input element on each row and each columns and validate it by using FormValidator.

When we navigating to the next page in the Grid, the previous page rows will be removed from DOM and next page rows are loaded in the DOM. Since this is the behavior of Grid. So, you need to destroy the form before moving to next page. 

Kindly share the below details which will be very helpful to validate further. 

  1. Share the simple issue reproducible sample with us.
  2. Share the complete Grid code.
  3. Share the replication procedure and video demo of the issue.
Regards, 
Rajapandiyan S 


Loader.
Up arrow icon