Format Date with Inline Template Form

[Kai]

Hi all,

in my asp.net web forms grid with Inline Template Form, I want to use a text field which contains a date from the database record. Retrieving the date works fine, but it displays the long default format, e.g. "Tue Feb 16 2021 12:00:00 GMT+0100". Instead, I want to have a short format like "16.02.2021 12:00" (it's a german format).

This code here works quite nice https://www.w3schools.com/code/tryit.asp?filename=GNQ5UVLOR8EZ but I don't know how to assign this format to my input field :-(

Inputfield in Inline Template Form looks like this:

<input type="text" id="StartDate" value="{{:StartDate}}" class="e-field e-ejinputtext" />

I've also check JsRender but did not find any information there. Any ideas?

Many thanks!

[Pon Selva Jeganathan]

Hi Kai,   

Query: Format Date with Inline Template Form

 

To achieve this requirement, we suggest that you to set the EditType property of the column as DateTimePicker and set appropriate Format using Format property  on rendering  of Grid. 

 

Also on Editing, using ActionComplete event of Grid render ejDateTimePicker control for the input element. This will allow you to select proper datetime value to be updated in Grid. And you can set the date format using dateTimeFormat property of DatetimePicker component. Please refer to the below code snippet,  

 

  

Default.aspx 

    <ej:Grid ID="EmpGrid" runat="server" ClientIDMode="Static" AllowPaging="True" > 

            <EditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true" EditMode="InlineFormTemplate" InlineFormTemplateID="#template" ></EditSettings> 

           <ClientSideEvents ActionComplete ="complete" /> 

           < 

                        <ej:Column Field="OrderDate" EditType="DateTimePicker" Format="{0:dd.MM.yyyy hh:mm}"/> 

          </Columns>  

   </ej:Grid> 

   <script id="template" type="text/template">                              

   <table cellspacing="10"> 

        

                     <td> 

                             <input id="OrderDate" name="OrderDate" value="{{:OrderDate}}" class="e-field e-ejinputtext" style="width: 116px; height: 28px" /> 

                      </td> 

              </tr> 

               

  </table> 

</script> 

           <script> 

            function complete(args) { 

                … 

               

                    $("#OrderDate").ejDateTimePicker({ 

                         

                        dateTimeFormat: "dd.MM.yyyy hh:mm", 

                        timePopupWidth: "150px", 

                        

                        width: '300px', 

                         

                    }); 

                

            } 

        </script> 

 

        

 

 

 

Please refer to the below screenshot: 

 

 

While Editing: 

 

 

Please refer to the below sample, 

https://www.syncfusion.com/downloads/support/forum/162653/ze/Sample827039811 

 

Please refer to the below help documentation: 

https://help.syncfusion.com/aspnet/grid/editing#inline-template-form 

https://help.syncfusion.com/api/js/ejdatetimepicker#members:datetimeformat 

https://help.syncfusion.com/aspnet/grid/editing#cell-edit-type-and-its-edit-options 

 

If your requirement is different, share us the complete Grid code details to proceed further. 

   

Regards,   

Pon selva   

 

[Kai]

Hi Pon Selva,

thanks for your reply. Unfortunately it does not work in my project :-( I see that your sample code is working fine. So I've stripped down my grid to just show the date column only. Nevertheless it still does not work. When I copy my grid code to your project, everything is working fine. So it does not seem to be a problem of the grid.

But when i use it in my project, the website freezes for about 10 seconds when I click on the date time picker calendar icon and then Firefox asks me "A web page is slowing down your browser. What would you like to do?" I clicked "Wait" several times, but not changes, so I click "Stop it". After some seconds, control is back and I see hundreds of time picker texts at the bottom of my web site..... Additionally Firefox console logs the timeout (I've replaced my server name in the attached textfile). I've also noticed an information regarding jQuery, I don't know whether this should make me nervous.

So I've spent several hours today and I don't have any idea how to fix it. Probably you also don't have an idea as the problem does not be caused by your grid as this is working fine when I copy it to your example. Therefore the best way for me would be to use a text field as input box instead of the date time picker. Is it possible to format the date in the text input then?

Many thanks

Kai

Attachment: Grid_4cbeb9db.zip

[Pon Selva Jeganathan]

Hi Kai,   

 

Thanks for the update 

Query: Format Date with Inline Template Form

We have checked your problem by preparing sample with Datetimepicker control but we are unable to reproduce the issues at our end. 

please share us the following details. 

           

1. Please let us know if the issue only occurs when the datetime picker is inside the grid component. Could you check placing datetimepicker outside grid and let us know you still face issue?
2. Complete code example.  

1.                  3.    If possible, reproduce the reported issue in the shared sample Or share us issue reproducing sample.   

2.                  4.    Share the details of your product version.   

3.                  5.    Share the video demonstrating of the issue. 

 

The provided information will be helpful to provide you response as early as possible.   

   

Regards,   

Pon selva   

 

[Kai]

Hi Pon selva,

Thanks but that is too mich work. AS said, my grid is working fine in your Demo project so the grid is Not the Problem. But then it is my configuration, like Master pages, Bootstrap, jquery etc. So it is too complicate to rebuild. And i Do Not really need the date picker. Text field would be fine.

So thanks for your Support, But i will try to figure out how to get the format into the Text field AS initially written.

Kind regards

Kai

[Farveen Sulthana Thameeztheen Basha]

Hi Kai, 

Thanks for your update. Please get back to us if you need any further assistance on it. 

Regards, 

Farveen sulthana T