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

DatePicker in DialogTemplate

Thread ID:

Created:

Updated:

Platform:

Replies:

143431 Mar 19,2019 07:22 PM UTC Mar 29,2019 04:38 AM UTC ASP.NET Web Forms 7
loading
Tags: Grid
Guadalupe
Asked On March 19, 2019 07:22 PM UTC

Hello
I need modify with DatePicker a DialogTemplate. This is possible?


Vignesh Natarajan [Syncfusion]
Replied On March 20, 2019 07:39 AM UTC

Hi Guadalupe, 
 
Thanks for using Syncfusion products. 
 
Query: “I need modify with DatePicker a DialogTemplate. This is possible?” 
 
From your query, we understand that you need to render the ejDatePicker in the dialogTemplate editor of ejGrid. We suggest you to achieve your requirement using ActionComplete event of ejGrid. 
 
Refer the below code example 
 
   <script type="text/template" id="template"> 
        <b>Order Details</b> 
        <table cellspacing="10"> 
………………………………………………………. 
            <tr> 
                <td style="text-align: right;">Fecha1 
                </td> 
                <td style="text-align: left"> 
                    <input id="Fecha1" name="Fecha1" class="e-field e-ejinputtext valid" 
                        style="width: 116px; height: 28px" value="{{:Fecha1}}" /> 
                </td> 
                <td style="text-align: right;">EmployeeID 
                </td> 
                <td style="text-align: left"> 
                    <input id="EmployeeID" name="EmployeeID" class="e-field e-ejinputtext valid" 
                        style="width: 116px; height: 28px" value="{{:EmployeeID}}" /> 
                </td> 
            </tr> 
        </table> 
    </script> 
    <ej:Grid ID="Grid1" runat="server" AllowPaging="True" OnServerEditRow="EditEvents_ServerEditRow" OnServerAddRow="EditEvents_ServerAddRow" 
                    OnServerDeleteRow="EditEvents_ServerDeleteRow"> 
                    <ClientSideEvents ActionComplete="complete" /> 
                    <Columns> 
…………………………………………………………. 
                        <ej:Column Field="Fecha1" HeaderText="ShipName" Width="110"></ej:Column> 
                        <ej:Column Field="ShipCountry" HeaderText="ShipCountry" Width="90" EditType="DropdownEdit" /> 
                    </Columns> 
                    <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="Dialog"></EditSettings> 
                    <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> 
                </ej:Grid> 
    <script> 
    function complete(args) {            
            if (args.requestType == "beginedit" || args.requestType == "add") { 
                $("#Fecha1").ejDatePicker(); 
            } 
 
Refer our API documentation for your reference 
 
 
Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan. 


Guadalupe
Replied On March 22, 2019 03:24 PM UTC

Hello
I need to Datepicker in EditFormTitle.



Vignesh Natarajan [Syncfusion]
Replied On March 25, 2019 05:51 AM UTC

Hi Guadalupe,  
 
Query#:- I need to Datepicker in EditFormTitle && I need modify with DatePicker a DialogTemplate. This is possible? 
 
We have prepared sample with “DatePicker inside the DialogTemplate” which can be downloaded from the below location. 
 
 
Please refer to the code example:- 
 
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True"> 
      <EditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true" EditMode="DialogTemplate" DialogEditorTemplateID="#template"></EditSettings> 
        <ClientSideEvents ActionComplete="complete"  /> 
                    <Columns> 
                        <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="90"> 
                        </ej:Column> 
                           .   .    . 
                        
                    </Columns> 
                   <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> 
                </ej:Grid> 
  <script type="text/template" id="template"> 
        <b>Order Details</b> 
        <table cellspacing="10"> 
            <tr> 
            </tr> 
             <td style="text-align: right;">Fetcha1 
                </td> 
                <td style="text-align: left"> 
                    <input id="OrderDate" name="OrderDate" class="e-field e-ejinputtext valid" 
                        style="width: 116px; height: 28px" value="{{:OrderDate}}" /> 
                </td> 
            </tr> 
        </table> 
    </script> 
     <script type="text/javascript"> 
         
        function complete(args) { 
             
            if ((args.requestType == "beginedit" || args.requestType == "add")) { 
                $("#OrderDate").ejDatePicker();  
                 $("#Freight").ejNumericTextbox(); 
                    $("#ShipName").ejDropDownList(); 
            } 
        } 
    </script> 
 
Screenshot:- 
 
 
 
 
If your requirement is different from the above solution, please share us the following details. 
 
  1. Are you expecting the above behavior or any other requirement?
  2. Share us the screenshot of exact scenario you need to achieve.
  3. Dateicker in the EditFormTitle. Can you please share more details regarding your requirement.
 
 
Regards, 
Vignesh Natarajan. 
 


Guadalupe
Replied On March 27, 2019 02:09 PM UTC

Hello
I want the resulot of the screenshot.

I am to compare with my code, but I can't to find the error.



Attachment: DialogTemplatedate_3df639d0.rar

Vignesh Natarajan [Syncfusion]
Replied On March 28, 2019 07:12 AM UTC

Hi Guadalupe,   
 
Thanks for the update. 
 
We have analyzed your query and we have rendered the ejDatePicker using ActionComplete event of the Grid. While analyzing the code example, you have used ClientSideEvents two times, so ActionComplete doesn’t get hit. Because ClientSideEvetn which is defined at last will be considered. So we request you to use as like below code example:- 
 
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True">      
     <SelectionSettings SelectionMode="row"/>  
         <Columns> 
                <ej:Column Field="Crtd_DateTime"> 
                </ej:Column> 
                    .    .     . 
         </Columns> 
       <ClientSideEvents ActionBegin="begin" BeforePrint="beforePrint" ActionComplete="complete"  /> 
</ej:Grid> 
 
After following the above solution still facing the issue, please get back to us with more details. 
 
Regards, 
Vignesh Natarajan. 
 


Guadalupe
Replied On March 28, 2019 02:16 PM UTC

Thank you! I to try do this. And after speak with  you.

Vignesh Natarajan [Syncfusion]
Replied On March 29, 2019 04:38 AM UTC

Hi Guadalupe, 

Thanks for the update.  

Please get back to us if you face any issue after implementing our solution. 

Regards, 
Vignesh Natarajan. 





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.

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

Live Chat Icon For mobile
Live Chat Icon