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.

How to get the <ej:DateTimePicker> control to work inside an External Form Template

Thread ID:

Created:

Updated:

Platform:

Replies:

131307 Jul 3,2017 10:28 AM Jul 4,2017 12:44 PM ASP.NET Web Forms 1
loading
Tags: Grid
sathish
Asked On July 4, 2017 09:46 AM

Hi,I have created a SyncFusion ASP.net project in Visual Studio 2017 with  .net version as 4.6.1. I then copied the grid code from the page http://localhost:17852/grid/externalformonlocaldata.aspx and all worked ok. Then, i tried to add the following line of code to the externalformtemplate to add a datetimepicker Date testingBut the datetime picker control is not appeating and it is only appearing as a text input box. There is also some JS error in the browser.. GridWithExternalTemplateAndUserControl:168 Uncaught TypeError: $(...).ejPropertiesPanel is not a function    at HTMLDocument. (GridWithExternalTemplateAndUserControl:168)    at c (jquery-1.10.2.min.js:21)    at Object.fireWith [as resolveWith] (jquery-1.10.2.min.js:21)    at Function.ready (jquery-1.10.2.min.js:21)    at HTMLDocument.q (jquery-1.10.2.min.js:21)Can someone help me?

Thavasianand Sankaranarayanan [Syncfusion]
Replied On July 4, 2017 12:44 PM

Hi Sathish, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that you want to render the ejDateTimePicker control in the external form template rendering. So, we suggest you to use the actionComplete event of ejGrid control to render the input text box as ejDateTimepicker. 

Refer the below code example. 


<ej:Grid ID="FlatGrid" runat="server" AllowSorting="True" AllowPaging="True" > 
             <ClientSideEvents ActionComplete="complete"  /> 
              <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="ExternalFormTemplate" ExternalFormTemplateID="#template"> 
</EditSettings> 
               
            <Columns> 
                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" Width="75" /> 
                <ej:Column Field="OrderDate" HeaderText="Order Date" TextAlign="Right" Width="80" Format="{0:MM/dd/yyyy hh:mm:ss}" /> 
                <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="75" Format="{0:C}"  /> 
            </Columns> 
        </ej:Grid> 
 
<script type="text/template" id="template"> 
        <table cellspacing="10"> 
              <tr> 
                     <td>Order ID</td> 
                     <td> 
                           <input id="OrderID" name="OrderID" disabled="disabled" value="{{:OrderID}}" class="e-field e-ejinputtext" style="width:116px;height:28px" /> 
            </td> 
                      
              </tr> 
              <tr> 
                     <td>Ordre Date</td> 
                     <td> 
                           <input type="text" id="OrderDate" name="OrderDate" value="{{:OrderDate}}" /> 
                     </td> 
                     <td>Freight</td> 
                     <td> 
                           <input type="text" id="Freight" name="Freight" value="{{:Freight}}" /> 
                     </td> 
              </tr> 
   </table> 
 
    </script> 

<script type="text/javascript"> 
 
       function complete(args) {    
           $("#Freight").ejNumericTextbox(); 
           $("#OrderDate").ejDateTimePicker();// to render the normal input text box as ejDateTimePicker 
       } 
 
   </script> 



We have prepared a sample and it can be downloadable from the below location. 


Refer the help documentation. 


If we misunderstood your query then please get back to us. 

Regards, 
Thavasianand S. 


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.

;