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.
Unfortunately, activation email could not send to your email. Please try again.

External Template Editing for Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

130300 May 4,2017 10:40 PM May 5,2017 05:47 AM ASP.NET MVC 1
loading
Tags: Grid
Aravind Ashokkumar
Asked On May 4, 2017 10:40 PM

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 05:47 AM

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 
@(Html.EJ().Grid<object>("Grid") 
         .Datasource((IEnumerable<object>)ViewBag.dataSource1) 
                .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.ExternalFormTemplate).ExternalFormTemplateID("#template"); }) 
        .Columns(col => 
        { 
... 
              }) 
      
       .ClientSideEvents(eve => eve.ActionComplete("complete")) 
    ) 
 
@(Html.EJ().ScriptManager()) 
 
<script id="template" type="text/template"> 
    <b>Order Details</b> 
    ... 
            <td style="text-align: right;"> 
                OrderDate 
            </td> 
            <td style="text-align: left"> 
                <input id="OrderDate" name="OrderDate" value="{{:OrderDate}}" class="e-field e-ejinputtext" placeholder="Choose display end date" /> 
            </td> 
</tr> 
    </table> 
</script> 
<script> 
    function complete(args) { 
        if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "externalformtemplate") { 
            ... 
            $("#OrderDate").ejDatePicker({ value: args.rowData.OrderDate }); 
        } 
    } 
    </script> 
 

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. 

Regards, 
Manisankar Durai. 


CONFIRMATION

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.

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.

;