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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Asp.net webforms Kanban dialog template datepicker

Thread ID:

Created:

Updated:

Platform:

Replies:

146268 Jul 29,2019 10:05 AM UTC Jul 30,2019 01:02 PM UTC ASP.NET Web Forms 1
loading
Tags: Kanban
Nicholas Johansen
Asked On July 29, 2019 10:05 AM UTC

Hello,

While it is possible to set datepicker as an edit item in an aspx Kanban board:

<EditSettings
     <EditItems >
          <ej:KanbanEditItem EditType="DatePicker" Field="Deadline" >
           etc.


- I cannot find an example of a datepicker being implemented into a template:

 <EditSettings AllowAdding="true" AllowEditing="true" EditMode="DialogTemplate" DialogTemplate="#template"  >
...

 <script id="template" type="text/template">
                    <td style="text-align: center;">
                    <h4>Deadline</h4>  
                    <ej:DatePicker ID="Deadlines" runat="server" Value="7/18/2014" Width="180px">
                    </ej:DatePicker>
                </td>
               etc.

If the datepicker element is specified outside of the template, as a regular page element, it gets rendered just fine. But when inside the template it renders like a generic text field.

The first problem is this rendering. However, there seems to be another problem in the value adding.
<ej:DatePicker ID="Deadlines" runat="server" Width="180px"  AllowEdit="true" DateFormat="dd/MM/yyyy" Value="{{:Deadline}}" />
Will cause the following error to occur "Cannot create an object of type 'System.Nullable`1[[System.DateTime, mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089]]' from its string representation '{{:Deadline}}' for the 'Value' property" - The Deadline property being of VB.net  Date type. Even if the value is set manually - Value="7/18/2014" - the datepicker still renders as an empty text field.

My questions are 
  • How do I implement a datepicker element to my dialog template so it renders correctly?
  • How do I incorporate the {{:Deadline}} variable without the aforementioned error occurring, as well as not getting a blank field?
  • How do one add validation rules in a dialog template? Basically I want the filling in of all editable values in my template to be mandatory.
I have added a zip with a screenshot showing the difference in rendering of a datepicker element outside and inside of a template on the same page.


Attachment: datepicker_rendering_ce67afc1.zip

Arun Palaniyandi [Syncfusion]
Replied On July 30, 2019 01:02 PM UTC

Hi Nicholas , 
 
Greetings from Syncfusion.  
 
 
How do I implement a datepicker element to my dialog template so it renders correctly? 
 
 
In the ASP.NET webforms Dialog template, we cannot able to give the Datepicker or any controls directly. We have to give the control as HTML element in the template javascript render and then need to convert it as a EJ1 control in the  actioncomplete event of the Kanban. 
 
 
 
How do I incorporate the {{:Deadline}} variable without the aforementioned error occurring, as well as not getting a blank field? 
 
 
If we render the Datepicker control as HTML and give the binding means then it will automatically bind the date value inside the Dialog template render. 
How do one add validation rules in a dialog template? Basically I want the filling in of all editable values in my template to be mandatory. 
 
Our Syncfusion form controls are supported with the jQuery validation. Hence using this support we can provide the validation for all our forms controls inside the template. 
 
 
 
 
 
Please find the below code snippet for more reference. 



<script type="text/template" id="template"> 
                <table cellspacing="10"> 
                    <tr> 
                        <td style="text-align: right;">Id 
                        </td> 
                        <td style="text-align: left"> 
                            <input id="Id" name="Id" value="" class="e-field e-ejinputtext valid e-disable" style="text-align: right; width: 175px; height: 28px" disabled="disabled" /> 
                        </td> 
                         <td style="text-align: right;">Deadline Date 
                        </td> 
                        <td style="text-align: left"> 
                           <input id="datePicker" value="{{:Deadline}}" /> 
                        </td> 
                        <td style="text-align: right;">Status 
                        </td> 
                        <td style="text-align: left"> 
                            <select id="Status" name="Status"> 
                                <option value="Close">Close</option> 
                                <option value="InProgress">InProgress</option> 
                                <option value="Open">Open</option> 
                                <option value="Testing">Testing</option> 
                            </select> 
                        </td> 
                    </tr> 
                     
                </table> 
            </script> 
 
    <script type="text/javascript"> 
 
     
 
        $.validator.setDefaults({ 
           //if we don’t set custom class, default “error” class will be added 
           errorClass: 'e-validation-error', 
           //it specifies the error message display position 
           errorPlacement: function (error, element) { 
               $(error).insertAfter(element.closest(".e-widget")); 
           } 
       }); 
 
 
         function complete(args) { 
                    if (args.requestType == "refresh" || args.requestType == "save") { 
                        $('#<%= Kanban.ClientID %>').ejWaitingPopup("hide"); 
                   } 
                   if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") { 
                       $("#Estimate").ejNumericTextbox({ value: parseFloat($("#Estimate").val()), width: "175px", height: "34px", decimalPlaces: 2 }); 
 
                      // convert as datepicker control 
 
                       $("#datePicker").ejDatePicker({ 
                                //validation APIs 
 
                                validationRules: { required: true },// sets the field to be required 
 
                               validationMessage: { required: "Required Date value" } // sets validation message 
 
            }); 
 
 
                       $("#Assignee").ejDropDownList({ width: '175px' }); 
                       $("#Status").ejDropDownList({ width: '175px' }); 
                       $("#Priority").ejDropDownList({ width: '175px' }); 
                       if (args.requestType == "beginedit" || args.requestType == "add") { 
                           $("#Assignee").ejDropDownList("setSelectedValue", args.data['Assignee']); 
                           $("#Priority").ejDropDownList("setSelectedValue", args.data['Priority']); 
                           $("#Status").ejDropDownList("setSelectedValue", args.data['Status']); 
                       } 
                       $(".e-field").css({ 'width': '175px', 'text-align': 'left' }); 
                   } 
               } 
    </script> 
 

We have prepared a sample below for your reference. 


Please check the shared details and let us know if you need further assistance.  

Regards, 
Arun P. 


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