DatePicker in DialogTemplate

[Guadalupe]

Hello

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

[Vignesh Natarajan]

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 

 

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

 

Please get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan. 

[Guadalupe]

Hello

I need to Datepicker in EditFormTitle.

[Vignesh Natarajan]

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. 

 

http://www.syncfusion.com/downloads/support/forum/143431/ze/Sample_(4)-1583872933 

 

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]

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]

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]

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

[Vignesh Natarajan]

Hi Guadalupe, 

Thanks for the update.  

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

Regards, 

Vignesh Natarajan.