admin管理员组文章数量:1316018
I'm using DevExpress's Form widget to create two date editors: CheckInFromDate and CheckInToDate. I want to enable the second date box (CheckInToDate) only when the first date box (CheckInFromDate) has a valid date selected. However, calling form.getEditor('CheckInToDate') inside onValueChanged of the first date box returns undefined.
Here's a simplified version of my code:
$(function () {
const formData = {};
const form = $("#formContainer")
.dxForm({
formData: formData,
items: [
{
itemType: "group",
colCount: 2,
items: [
{
dataField: "CheckInFromDate",
label: { text: "Check-In from" },
editorType: "dxDateBox",
template: function (data, $itemElement) {
const editorTemplate = $("<div>").dxDateBox({
dataField: "CheckInFromDate2",
showClearButton: true,
displayFormat: "dd/MM/yyyy",
onValueChanged: function (e) {
const minDate = e.value;
form.getEditor("CheckInToDate").option("min", minDate);
form
.getEditor("CheckInToDate")
.option("disabled", !minDate);
},
});
editorTemplate
.dxValidator({
validationGroup: "checkInValidator",
validationRules: [
{
type: "required",
message: "At least one valid date pair is required.",
},
],
})
.appendTo($itemElement);
editorTemplate.dxDateBox("instance");
},
},
{
dataField: "CheckInToDate",
label: { text: "To" },
template: function (data, $itemElement) {
$("<div>")
.dxDateBox({
showClearButton: true,
displayFormat: "dd/MM/yyyy",
disabled: true,
})
.dxValidator({
validationGroup: "checkInValidator",
validationRules: [
{
type: "required",
message: "At least one valid date pair is required.",
},
],
})
.appendTo($itemElement);
},
},
],
},
],
})
.dxForm("instance");
});
I assumed that adding dataField: 'CheckInToDate' plus a custom template for the second item would make form.getEditor('CheckInToDate') return the editor instance.
I also attempted setting editorType: 'dxDateBox' for the second item, but the custom template overrides that.
My expectation is to retrieve the second date box instance via the form's getEditor method so I can enable/disable it dynamically..
I'm using DevExpress's Form widget to create two date editors: CheckInFromDate and CheckInToDate. I want to enable the second date box (CheckInToDate) only when the first date box (CheckInFromDate) has a valid date selected. However, calling form.getEditor('CheckInToDate') inside onValueChanged of the first date box returns undefined.
Here's a simplified version of my code:
$(function () {
const formData = {};
const form = $("#formContainer")
.dxForm({
formData: formData,
items: [
{
itemType: "group",
colCount: 2,
items: [
{
dataField: "CheckInFromDate",
label: { text: "Check-In from" },
editorType: "dxDateBox",
template: function (data, $itemElement) {
const editorTemplate = $("<div>").dxDateBox({
dataField: "CheckInFromDate2",
showClearButton: true,
displayFormat: "dd/MM/yyyy",
onValueChanged: function (e) {
const minDate = e.value;
form.getEditor("CheckInToDate").option("min", minDate);
form
.getEditor("CheckInToDate")
.option("disabled", !minDate);
},
});
editorTemplate
.dxValidator({
validationGroup: "checkInValidator",
validationRules: [
{
type: "required",
message: "At least one valid date pair is required.",
},
],
})
.appendTo($itemElement);
editorTemplate.dxDateBox("instance");
},
},
{
dataField: "CheckInToDate",
label: { text: "To" },
template: function (data, $itemElement) {
$("<div>")
.dxDateBox({
showClearButton: true,
displayFormat: "dd/MM/yyyy",
disabled: true,
})
.dxValidator({
validationGroup: "checkInValidator",
validationRules: [
{
type: "required",
message: "At least one valid date pair is required.",
},
],
})
.appendTo($itemElement);
},
},
],
},
],
})
.dxForm("instance");
});
I assumed that adding dataField: 'CheckInToDate' plus a custom template for the second item would make form.getEditor('CheckInToDate') return the editor instance.
I also attempted setting editorType: 'dxDateBox' for the second item, but the custom template overrides that.
My expectation is to retrieve the second date box instance via the form's getEditor method so I can enable/disable it dynamically..
1 Answer
Reset to default 1From the answer here
The
dxForm.getEditormethod is intended only for built-in editors. If you are using templates, you will need to find editors manually
So set the id on the editorTemplate div's and get the dtDateBox instance like this:
$("#CheckInToDate").dxDateBox("instance")
Full editorTemplate code:
const editorTemplate = $("<div id='CheckInFromDate'>").dxDateBox({
dataField: "CheckInFromDate2",
showClearButton: true,
displayFormat: "dd/MM/yyyy",
onValueChanged: function(e) {
const minDate = e.value;
const checkInToDate = $("#CheckInToDate").dxDateBox("instance")
checkInToDate.option("min", minDate)
checkInToDate.option("disabled", ! minDate)
},
});
Note: You also need to set the id attribute on the CheckInToDate field.
...
template: function(data, $itemElement) {
$("<div id='CheckInToDate'>").dxDateBox({
...
})
}
...
Check this working JsFiddle Demo.
本文标签：
版权声明：本文标题：javascript - Why is form.getEditor('CheckInToDate') returning undefined in my DevExpress form with custom templa 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741983527a2408538.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论