The documentation page has a small issue to preview Dialog/Inline Template Editing

Question

I just wanted to check the behavior or Dialog/Inline template and found this. I hope this helps to fix the documentation.

Ajith Govarthan · Accepted Answer

Hi Prabesh, 
  
Thanks for contacting Syncfusion support. 
  
Query: I just wanted to check the behavior or Dialog/Inline template and found this. I hope this helps to fix the documentation. 
  
We checked the attached documentation page and we able to reproduce the reported issue at our end. We have logged a documentation task to fix the dialog template issue appear in EJ2 JavaScript documentation and this will be refreshed in any of our upcoming release.  
  
For your convenience we have attached the dialog template sample so please refer the sample for your reference. 
  
Code Example: 




Index.js 
  
var grid = new ej.grids.Grid({ 
  dataSource: data, 
  toolbar: ['Add', 'Edit', 'Delete'], 
  editSettings: { 
    allowEditing: true, 
    allowAdding: true, 
    allowDeleting: true, 
    mode: 'Dialog', 
    template: '#dialogtemplate' 
  }, 
  columns: [ 
    { 
      field: 'OrderID', 
      headerText: 'Order ID', 
      textAlign: 'Right', 
      width: 100, 
      isPrimaryKey: true 
    }, 
    { field: 'CustomerID', headerText: 'Customer ID', width: 120 }, 
    { field: 'ShipCountry', headerText: 'Ship Country', width: 150 } 
  ], 
  height: 265, 
  actionBegin: function(args) { 
    if (args.requestType === 'save') { 
      // cast string to integer value. 
      args.data['Freight'] = parseFloat( 
        args.form.querySelector('#Freight').value 
      ); 
    } 
  }, 
  actionComplete: function(args) { 
    if (args.requestType === 'beginEdit' || args.requestType === 'add') { 
      // Add Validation Rules 
      args.form.ej2_instances[0].addRules('Freight', { max: 500 }); 
      // EJ2-control Rendering 
      new ej.dropdowns.DropDownList( 
        { 
          value: args.rowData.ShipCountry, 
          popupHeight: '200px', 
          floatLabelType: 'Always', 
          dataSource: countryData, 
          fields: { text: 'ShipCountry', value: 'ShipCountry' }, 
          placeholder: 'Ship Country' 
        }, 
        args.form.elements.namedItem('ShipCountry') 
      ); 
      new ej.buttons.CheckBox( 
        { label: 'Verified', checked: args.rowData.Verified }, 
        args.form.elements.namedItem('Verified') 
      ); 
      new ej.inputs.NumericTextBox( 
        { 
          value: args.rowData.Freight, 
          format: 'C2', 
          placeholder: 'Freight', 
          floatLabelType: 'Always' 
        }, 
        args.form.elements.namedItem('Freight') 
      ); 
      // Set initail Focus 
      if (args.requestType === 'beginEdit') { 
        args.form.elements.namedItem('CustomerID').focus(); 
      } 
    } 
  } 
}); 
grid.appendTo('#Grid'); 
  
Sample Link: https://stackblitz.com/edit/ezc2jr?file=index.js 
  
Until then we appreciate your patience. 
  
Regards, 
Ajith G.