Dialog editing in EJ2 only works sometimes - Dialog form displays just #dialogtemplate only

Question

Hi,I am trying to build a solution (PoC) using EJ2 grid. I am getting data from MySQL DB thru' PHP page.Strangely, when I fetch data from one sample table, the edit->dialog form displays the controls correctly. But when I fetch data from another table, (and with appropriate dialogtemplate added), the edit dialog form shows only #dialogtemplateAttached a zip file containing:1) dist - containing javascript / css files I am using2) dlgorig - This is a test solution using JSON as data source3) dlgtest - This contains the PoC. The index.html and index.js contains some commented section - this section contains code for 'working' scenario and 'not-working' scenario4) SrbDB.sql - MySQL DB / table / data creation script Attachment: tosupport_7e4ce516.zip

Joseph Christ Nithin Issack · Answer

Hi Sathya,

Thanks for contacting Syncfusion support.

Query: Dialog editing in EJ2 only works sometimes - Dialog form displays just #dialogtemplate only

Based on your query, you are facing data binding issue in your Grid application. So, we have prepared sample based on your attached code example and found everything works fine at our end. So, for your convenience we have attached the sample, please refer them for your reference.

Code Example:

Index.js

actionComplete: function (args) {

if (args.requestType === 'beginEdit' || args.requestType === 'add') {

var data = args.rowData;

new ej.inputs.NumericTextBox(

{

value: data.EmployeeID,

format: 'C2',

placeholder: 'EmployeeID',

floatLabelType: 'Always',

},

args.form.elements.namedItem('EmployeeID')

);

// Convert Widget for the ShipCountry field

new ej.dropdowns.DropDownList(

{

value: data.LastName,

popupHeight: '300px',

floatLabelType: 'Always',

dataSource: countryData,

fields: { text: 'LastName', value: 'LastName' },

placeholder: 'LastName',

},

args.form.elements.namedItem('LastName')

);

// Convert Widget for the OrderDate field

new ej.calendars.DatePicker(

{

value: data.BirthDate,

placeholder: 'BirthDate',

floatLabelType: 'Always',

},

args.form.elements.namedItem('BirthDate')

);

// Convert Widget for the ShipCity field

if (ej.base.Browser.isDevice) {

args.dialog.height = window.innerHeight - 90 + 'px';

args.dialog.dataBind();

}

// Set initail Focus

if (args.requestType === 'beginEdit') {

args.form.elements.namedItem('FirstName').focus();

} else {

args.form.elements.namedItem('OrderID').focus();

}

},

});

Index.html

<div>

<label class="e-float-text e-label-top" for="OrderID">Order ID</label>

</div>

<label class="e-float-text e-label-top" for="FirstName">FirstName </label>

</div>

</div>

</div>

</div>

</script>

Sample Link: https://stackblitz.com/edit/kujjpp?file=index.html

Note: The dialog template data binding issue will be occurred when you don’t set the name and id attribute values similar to field name and field values should be available to display the values in the dialog template. So, please ensure the above things to bind the data properly in your Grid application.

Please get back to us if you need further assistance.

Regards,

Joseph I.

Sathya · Answer

Hi,Thanks for your reply.I have already mentioned in issue, that for one (table) details, it works correctly. It does not work for other table, in spite of giving correct field name(Refer Index.html in my attachment)

Joseph Christ Nithin Issack · Answer

Hi Sathya,   
  
Please find the response for your queries below,  
  
Query – 1: “Below is the server-side code, which clearly returns the data in the format you have specified(Please note that the below code, when used to fetch data from one table, works and for another table, does not work)”  
  
We have validated your code example as below,  
  




var data = new ej.data.DataManager({  
    url: 'getData.php/?action=getData',  
    crossDomain: true  
}).executeQuery(new ej.data.Query()).then(function(e){  
   grid.dataSource = e.result;  
});  
  
  
This will act as local data binding in Grid component. We need to return the ‘result’ and ‘count’ object format when only enable DataAdaptors like URLAdaptor(on-demand concept) etc., are bound. Already, we have shared the documentation for the same in last response. So if you are not using ‘DataAdaptors’ then you need to return only JSON object as data source. Please find the below documentation links based on this for your reference,  
  
https://ej2.syncfusion.com/javascript/documentation/grid/data-binding/#local-data  
  
https://ej2.syncfusion.com/javascript/documentation/grid/data-binding/#binding-with-ajax  
  
Query - 2: THE BELOW QUERY DOES NOT WORK, I.E. DISPLAYS ONLY #dialogtemplate EDIT DIALOG  
  
By default, dialogTemplate is used to display while performing CRUD action like adding/editing. Please find the demo for your reference.  
  
https://ej2.syncfusion.com/javascript/demos/#/material/grid/dialog-template.html  
  
If this does not meet your requirement, could you please share the following details to validate further,  
  

Explain more details about your requirement
Are you facing the error while performing CRUD or initial rendering?
Share the screenshot of your issue.
Share the console window if you get any script error.
Share the video demonstration of your issue.
  
Regards,  
Joseph I

Sathya · Answer

Hi,I have attached  a document of issues faced along with screenshots of code, webpage and errors. Please go through and request you to kindly help.Thanks Attachment: Issue_details_with_screenshot_EJ2_grid_8b8de488.zip

Sathya · Answer

Hi,I have resolved the issue myself. (The data object was empty because form data was empty. Form was not constructed because of a syntax error in template)The 'if' statement was repeated twice (bold, underlined text below) in 'dialog template' in HTML file which resulted in template error.<input id="Name" name="Name" type="text" value=${if(isAdd)} '' ${else} ${Name} ${/if}  ${if(isAdd)}'' ${else} ${Name}{/if}/>I have corrected this error and dialog template opened.Thanks for your suggestions

Ajith Govarthan · Answer

Hi Sathya, 
  
Thanks for the update. 
  
Query: I have resolved the issue myself. (The data object was empty because form data was empty. Form was not constructed because of a syntax error in template). 
  
We are happy to hear that you have found the solution at your end and thanks for sharing the solution with us. 
  
Please get back to us if you need further assistance. 
  
Regards, 
Ajith G.