We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

External Template Editing for Grid

Hi Team,

I am trying to use an external template for editing the grid values. 
I am able to get the values from the grid for all the 'text' related values but when i try to copy over the 'Date' field it is not working. Please suggest the correct way for editing the date.

The following is working (where I am just trying to edit the name)
    <input id="label_display" type="text" maxlength="25" name="label_display"  value="{{:_label_display}}" class="e-field e-ejinputtext" placeholder="Enter Label for Display"/>
The following is not working for External template.

<input id="display_end_date" type="date" name="display_end_date"  value="{{:display_end_date}}" class="e-field e-ejinputtext" placeholder="Choose display end date" />

Note: The value of date is in datetime from the database and I have used the 'Column Format' option to display only the date.

1 Reply

MS Mani Sankar Durai Syncfusion Team May 5, 2017 09:47 AM UTC

Hi Aravind, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we can able to reproduce the reported issue. To render the datepicker in external form template with the cell contains the corresponding value we suggest you render the datePicker control for the corresponding column in ActionComplete event in grid. 
Refer the code example 
                .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.ExternalFormTemplate).ExternalFormTemplateID("#template"); }) 
        .Columns(col => 
       .ClientSideEvents(eve => eve.ActionComplete("complete")) 
<script id="template" type="text/template"> 
    <b>Order Details</b> 
            <td style="text-align: right;"> 
            <td style="text-align: left"> 
                <input id="OrderDate" name="OrderDate" value="{{:OrderDate}}" class="e-field e-ejinputtext" placeholder="Choose display end date" /> 
    function complete(args) { 
        if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "externalformtemplate") { 
            $("#OrderDate").ejDatePicker({ value: args.rowData.OrderDate }); 

We have also prepared a sample that can be downloaded from the below link. 

Refer the documentation link. 
We have already explained in our UG documentation link. 
Online sample link:  

Note: When rendering date picker with corresponding value for date column it is not enough to set the type as date in input element while rendering external form template 

Refer the screenshot 

Please let us know if you need further assistance. 

Manisankar Durai. 

Live Chat Icon For mobile
Up arrow icon