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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

External Template Editing for Grid

Thread ID:





130300 May 5,2017 02:40 AM UTC May 5,2017 09:47 AM UTC ASP.NET MVC 1
Tags: Grid
Aravind Ashokkumar
Asked On May 5, 2017 02:40 AM UTC

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.

Mani Sankar Durai [Syncfusion]
Replied On 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. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon