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.
|
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.
|
|
<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> |
