External Template Editing for Grid

[Aravind Ashokkumar]

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]

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. 

Link: https://www.syncfusion.com/downloads/support/forum/130300/ze/12.4_Sample637894006 

Refer the documentation link. 

Link: https://help.syncfusion.com/api/js/ejdatepicker#members:value 

https://help.syncfusion.com/api/js/ejdropdownlist#events:actioncomplete 

We have already explained in our UG documentation link. 

Link: https://help.syncfusion.com/aspnetmvc/grid/editing#external-template-form 

Online sample link:  

https://mvc.syncfusion.com/demos/web/grid/externalformediting 

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.