我有一个由 devexpress 网格组成的部分视图。单击网格相应行的编辑时,会出现一个面板,其中提供了用于编辑值的控件。这些控件之一是日期选择器。此日期选择器的日历控件不会加载以允许我选择日期。相反,从和到日期控件保留为文本框。下面是我的部分代码。
@{
var grid = Html.DevExpress().GridView(settings =>
{
settings.Name = "GridViewDuration";
settings.CallbackRouteValues = new { Controller = "DurationMaster", Action = "GridViewDurationPartial" };
settings.SettingsEditing.AddNewRowRouteValues = new { Controller = "MyController", Action = "MyControllerAction1" };
settings.SettingsEditing.UpdateRowRouteValues = new { Controller = "MyController", Action = "MyControllerAction2" };
settings.SettingsEditing.DeleteRowRouteValues = new { Controller = "MyController", Action = "MyControllerAction3" };
settings.SettingsEditing.Mode = GridViewEditingMode.EditFormAndDisplayRow;
settings.SettingsBehavior.ConfirmDelete = true;
settings.CommandColumn.Visible = true;
settings.CommandColumn.ShowNewButton = true;
settings.CommandColumn.ShowDeleteButton = true;
settings.CommandColumn.ShowEditButton = true;
settings.KeyFieldName = "DurationId";
settings.SettingsPager.Visible = true;
settings.SettingsPager.PageSize = 20;
settings.Settings.ShowGroupPanel = true;
settings.Settings.ShowFilterRow = true;
settings.SettingsBehavior.AllowSelectByRowClick = false;
settings.Columns.Add(column =>
{
column.FieldName = "Column1";
column.ReadOnly = true;
column.Width = 20;
});
settings.Columns.Add(column =>
{
column.FieldName = "Column2";
column.Caption = "xyz";
column.ColumnType = MVCxGridViewColumnType.ComboBox;
column.Width = 250;
var comboBoxProperties = column.PropertiesEdit as ComboBoxProperties;
comboBoxProperties.DataSource = PMC.Web.Controllers.DurationMasterController.getSelectList("0", "MyAction4");
comboBoxProperties.TextField = "Text";
comboBoxProperties.ValueField = "Value";
comboBoxProperties.ValueType = typeof(int);
comboBoxProperties.ValidationSettings.RequiredField.IsRequired = true;
});
settings.InitNewRow = (sender, e) =>
{
e.NewValues["ColumnId"] = 0;
};
settings.Columns.Add("ColumnName");
settings.Columns.Add("Description");
//settings.Columns.Add("DisplayName");
settings.Columns.Add("FromDate");
settings.Columns.Add("ToDate");
});
if (ViewData["EditError"] != null)
{
grid.SetEditErrorText((string)ViewData["EditError"]);
}
}
@grid.Bind(Model).GetHtml()
下面是我的视图,它呈现上述部分内容,还包含加载日期选择器的日历控件的 javascript 代码
@model List<XYZ.Data.ViewModel.Admin.MyModel>
@{
ViewBag.Title = "XYZ";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src='@Url.Content("~/Scripts/UserManagementScript.js")'></script>
<script type="text/javascript">
$(document).ready(function () {
debugger
$("#GridViewDuration_DXEditor5_I").datepicker({
dateFormat: 'mm/dd/yyyy',
changeMonth: true,
changeYear: true,
gotoCurrent: true,
minDate: '01/01/2015',
maxDate: new Date(),
constrainInput: false,
selectMonths: '12',
selectYears: '30',
duration: ''
});
$("#GridViewDuration_DXEditor6_I").datepicker({
dateFormat: 'mm/dd/yyyy',
changeMonth: true,
changeYear: true,
gotoCurrent: true,
minDate: '01/01/2015',
maxDate: new Date(),
constrainInput: false,
selectMonths: '12',
selectYears: '30',
duration: ''
});
});
document.getElementById("GridViewDuration_DXCBtn0").addEventListener("click", function () {
debugger
$("#GridViewDuration_DXEditor5_I").datepicker({
dateFormat: 'mm/dd/yyyy',
changeMonth: true,
changeYear: true,
gotoCurrent: true,
minDate: '01/01/2015',
maxDate: new Date(),
constrainInput: false,
selectMonths: '12',
selectYears: '30',
duration: ''
});
$("#GridViewDuration_DXEditor6_I").datepicker({
dateFormat: 'mm/dd/yyyy',
changeMonth: true,
changeYear: true,
gotoCurrent: true,
minDate: '01/01/2015',
maxDate: new Date(),
constrainInput: false,
selectMonths: '12',
selectYears: '30',
duration: ''
});
});
//$('#GridViewDuration_DXCBtn0').click(function () {
// debugger
// $("#GridViewDuration_DXEditor5_I").datepicker({
// dateFormat: 'mm/dd/yyyy',
// changeMonth: true,
// changeYear: true,
// gotoCurrent: true,
// minDate: '01/01/2015',
// maxDate: new Date(),
// constrainInput: false,
// selectMonths: '12',
// selectYears: '30',
// duration: ''
// });
// $("#GridViewDuration_DXEditor6_I").datepicker({
// dateFormat: 'mm/dd/yyyy',
// changeMonth: true,
// changeYear: true,
// gotoCurrent: true,
// minDate: '01/01/2015',
// maxDate: new Date(),
// constrainInput: false,
// selectMonths: '12',
// selectYears: '30',
// duration: ''
// });
//});
</script>
@Html.Partial("_Common")
@Html.DevExpress().GetStyleSheets(
new StyleSheet { ExtensionSuite = ExtensionSuite.GridView }
)
@Html.DevExpress().GetScripts(
new Script { ExtensionSuite = ExtensionSuite.GridView }
)
@Html.Partial("_GridViewDurationPartial", Model)
这是编辑时