1. Home
  2. Forum
  3. React - EJ 2
  4. Wrong error text placement on edit with template dialog

Wrong error text placement on edit with template dialog

Hi,

I have a grid for which I created a custom template for editing in Dialog mode.
I have different validation rules for the fields.

The problem is that the text for the rules is not displayed correctly. Also the date field is not displayed OK when editing a grid record.
I attached a file with 2 screenshots of the problem and also the grid and template implementations.

Thanks,

Attachment: tmp_afd48cc0.zip

9 Replies
SK Sujith Kumar Rajkumar Syncfusion Team January 15, 2021 09:23 AM UTC

Hi Walter, 

Greetings from Syncfusion support. 

Please find the response for your queries below, 

Query – 1: “I have a grid for which I created a custom template for editing in Dialog mode. I have different validation rules for the fields. The problem is that the text for the rules is not displayed correctly.”  

We checked your query and reported problem with the provided screenshot from our end. Based on that we would like to let you know that on using custom dialog template, you need to customize the edit controls position (using the form spacing styles) and the edit dialog height/width to fit with your scenario. 

For e.g., We have rendered edit input controls as 3 in one row and 4 in the next one. On doing so the validation rules will be displayed on top of each other due to spacing not provided properly for the custom controls. This can be seen in the below image, 

 

This case can be resolved by increasing the dialog height and width in the Grid’s actionComplete event which will then display the validation messages as shown in the below image, 

 

So similarly, you can use this approach of customizing the edit control and edit dialog position to resolve your problem. 

We have prepared a sample to demonstrate this for your reference. You can find it below, 

 
Query – 2: “Also the date field is not displayed OK when editing a grid record.” 

We checked this case from our end but unfortunately were unable to reproduce it as the date picker was rendered properly for Grid editing. You can check this case in the above shared sample. 

So please share us the following additional details to validate further on this, 

  • Are any console errors thrown? If so please share it.
  • Let us know the value that is getting set here – “value: new Date(this.state.VATpayerfromdate),” in the edit date picker control.
  • Syncfusion package version used.
  • If possible share us a simple sample to replicate the problem or try reproducing it in the above shared sample.

Let us know if you have any concerns. 

Regards, 
Sujith R 


WK Walter Konnerth January 18, 2021 12:53 PM UTC

Hi,

Thanks for the example, it works ok!

Anyway I have also following issue: I have a custom rules validator on the custom editor which is not working well.
Following code is used:

// in constructor
this.customRulesVAToncollectionfromdate = {
required: [
this.customValidatorVAToncollectionfromdate,
'Camp obligatoriu',
],
};
/* ... */
actionComplete(args) {
if (args.requestType === 'beginEdit' || args.requestType === 'add') {
args.dialog.width = '800px';
args.dialog.dataBind();

args.form.ej2_instances[0].addRules(
'VAToncollectionfromdate',
this.customRulesVAToncollectionfromdate
);
}
}

customValidatorVAToncollectionfromdate(args) {
let gridInstance = document.getElementById('providerGrid').ej2_instances[0];
console.log('gridInstance.editModule.formObj.inputElements',gridInstance.editModule.formObj.inputElements); // empty NodeList
var issuerVAToncollection = [].slice
.call(gridInstance.editModule.formObj.inputElements)
.filter((x) => x.getAttribute('name') === 'VAToncollection')[0];

if (issuerVAToncollection) {
if (issuerVAToncollection.value === 'true') {
if (args.value) {
return true;
} else {
return false;
}
} else {
return true;
}
}
}

The problem is the NodeList for the inputElements of the grid instance is empty.

Can you please help me?

PS: I attached a full working project for testing.



Attachment: tmp_f653790.zip

SK Sujith Kumar Rajkumar Syncfusion Team January 19, 2021 07:15 AM UTC

Hi Walter, 
 
You’re welcome. We are glad to hear that the provided solution worked for your requirement. 
 
As for your other query – “Anyway I have also following issue: I have a custom rules validator on the custom editor which is not working well. The problem is the NodeList for the inputElements of the grid instance is empty.”, since custom input controls are rendered using template the elements are not getting properly retrieved. So we suggest you to resolve this by accessing the form input elements as demonstrated in the below code snippet, 
 
customValidatorVAToncollectionfromdate(args) { 
    let gridInstance = document.getElementById('providerGrid').ej2_instances[0]; 
    // Form input elements are retrieved 
    var inputEles = gridInstance.editModule.formObj.element.querySelectorAll('input'); 
    console.log('gridInstance.editModule.formObj.inputElements', inputEles); 
                     . 
                     . 
} 
 
We have modified the shared sample based on this for your reference. You can find it below, 
 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R 


WK Walter Konnerth January 19, 2021 01:51 PM UTC

Hi,

Thanks for the updated, it worked well!

I'm facing now other 2 issues:
1. I can not set the height for the custom editor
2. when editing a record, the 2 datepickers are not displayed ok and the approved field is not displayed at all.

I attached a working example.

Can you please help me with this?

Thanks,


Attachment: tmp_54039fbb.zip

SK Sujith Kumar Rajkumar Syncfusion Team January 20, 2021 08:02 AM UTC

Hi Walter, 

We checked the sample that you have shared but in that the default edit dialog was only rendered(without any custom editors) and there were no ‘Approved’ and two date picker fields. We suspect that you might have shared the wrong validation sample. So can you please confirm us if you have shared the correct sample and if not, then please share us the mentioned sample or the code file to validate further on this. 

Regards, 
Sujith R 


WK Walter Konnerth January 20, 2021 11:21 AM UTC

Hi,

Indeed I uploaded a wrong source code :(
I attached now (hopefully :)) a correct working example.

Thanks,

Attachment: tmp_7efb3cc9.zip

SK Sujith Kumar Rajkumar Syncfusion Team January 21, 2021 12:37 PM UTC

Hi Walter, 
 
Thanks for sharing the sample. 
 
Please find the response for your queries below, 
 
Query – 1: “I cannot set the height for the custom editor” 
 
You can achieve this requirement by directly setting the required height for the edit control elements(using its id) as demonstrated in the below code snippet, 
 
#IBAN, #bank { 
  height: 50px; 
} 
  
This will apply the height to the edit input controls as displayed in the below image, 
 
 
 
 
Query – 2: “when editing a record, the 2 datepickers are not displayed ok and the approved field is not displayed at all.” 
 
We checked this problem in the provided sample and it was occurring because the code for appending the two Date pickers and the approved dropdown list object was getting executed before the edit dialog with the input controls(on which these controls need to be appended) are rendered as it is written in the componentDidMount function of the template component file. 
 
So we suggest you to resolve this by either executing this append function in the Grid’s actionComplete function(triggers after the edit dialog is created) or use the react approach to directly render the EJ2 Date picker component in the template. More details on this can be checked in the below documentation link, 
 
 
We have modified the provided sample based on the above queries for your reference. You can find it below, 
 
 
Note: In the above sample we have used a timeout function in the componentDidMount function to render the date picker controls properly for demonstration purposes. Here you can use the approach suggested by us above as per your requirement to resolve the problem. 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R 


WK Walter Konnerth January 21, 2021 02:01 PM UTC

Hi,

Thanks for the clarifications, they helped me a lot!

Regarding question 1.  I can not set the height for the custom editor
I meant the height of the dialog window.
I managed to do it by setting the max-height prop as !important in the css like:
.e-dialog {
max-width: 2000px;
max-height: 750px !important;
}

Please let me know if this is the correct approach.

Thanks,

SK Sujith Kumar Rajkumar Syncfusion Team January 22, 2021 11:18 AM UTC

Hi Walter, 
 
You’re welcome. We are glad to hear that the provided solution helped with your query. 
 
As for the query related to setting height/width for the Grid edit dialog, you can achieve it by directly setting the required height and width to the edit dialog element which can be retrieved in the Grid’s actionComplete event(when the arguments requestType is ‘beginEdit’ or ‘add’). This is demonstrated in the below code snippet, 
 
// Grid’s actionComplete event handler 
actionComplete(args) { 
    if ((args.requestType === 'beginEdit' || args.requestType === 'add')) { 
       args.dialog.width = '1000px'; 
       args.dialog.height = '400px'; 
    } 
} 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R 


Loader.
Up arrow icon