Ej2 Grid: Custom dialog template with datepicker

[ISMAIL HAMZAH]

Dear Support,

I have Grid using custom dialog template with date picker. The dialog template become "broken" after "DatePicker" added to the template.

This is the custom dialog template before DatePicker is added:

*the layout is neat and ok

This is custom dialog template after DatePicker is added:

*the layout become broken, the top label overlap with date content

This is my custom dialog template:

Customer*

Expense Date*

this is JS code that added the datepicker at actionComplete:

actionComplete: (args) => {

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

var dialog = args.dialog;

dialog.height = '500';

dialog.width = '500';

dialog.header = args.requestType === 'beginEdit' ? 'Update Record' : 'New Record';

args.form.ej2_instances[0].addRules('Number', { required: true });

args.form.ej2_instances[0].addRules('CustomerId', { required: true });

args.form.ej2_instances[0].addRules('ExpenseDate', { required: true });

args.form.ej2_instances[0].addRules('ExpenseType', { required: true });

args.form.ej2_instances[0].addRules('EmployeeId', { required: true });

new ej.calendars.DatePicker({value: new Date()}, args.form.elements.namedItem('ExpenseDate'));

}

}

Thank you,

Ismail

[Thiyagu Subramani]

Hi ISMAIL, 

Thanks for contacting Syncfusion support. 

To avoid label overlap with date content we suggest you to use our DatePicker’s placeholder and floatLabelType as always property instead of creating external label. Please refer to the below code and sample link. 

 <div class="form-row"> 

        <div class="form-group col-md-6"> 

                 <input name="Freight" id="Freight" value="${Freight}" /> 

         </div> 

         <div class="form-group col-md-6"> 

                 <input name="OrderDate" id="OrderDate" > 

         </div> 

 </div> 

     new ej.calendars.DatePicker( 

        { 

          value: new Date(), 

          floatLabelType: 'Always', 

          placeholder: 'OrderDate', 

        }, 

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

      ); 

 

Sample link: https://stackblitz.com/edit/6ks2we?file=index.js 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S 

[ISMAIL HAMZAH]

Hi Thiyagu,

Thank you for your feedback, your provided solution by using Placeholder instead of creating external label solve my problem.

Thank you for your help.

Best regards,

Ismail

[Thiyagu Subramani]

Hi ISMAIL, 

Thanks for the update. 

We are happy to hear that the provided solution works at your end.  

Please get back to us if you need further assistance. 

Regards, 

Thiyagu S