デプレックスグリッド内のDatePickerコントロールがロードされていません（作業中）

Question

私は、デエクスプレッショングリッドからなる部分的なビューを持っています。グリッドのそれぞれの行の編集をクリックすると、値を編集するためのコントロールが提供されるパネルが表示されます。 これらのコントロールの1つは、日付ピッカーです。この日付ピッカーのカレンダーコントロールは、日付を選択できるように読み込まれません。代わりに、日付と時刻のコントロールはテキストボックスのままです。 以下は私の部分的なコードです。

@{ 

    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() 

そして以下は上記の部分をレンダリング私の見解であり、また

@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) 

そしてここで日付ピッカーのカレンダーコントロールをロードするためのJavaScriptコードで構成され、それがどのように見えるかで、

そして、編集時ここ

Answer 1

あなたはこの回避策を試みることができる：

はあなたの列

settings.Columns.Add(column => 
{ 
    column.FieldName = "FromDate"; 
    column.Caption = "FromDate"; 
    column.CellStyle.CssClass = "datepicker"; 
}); 
settings.Columns.Add(column => 
{ 
    column.FieldName = "ToDate"; 
    column.Caption = "ToDate"; 
    column.CellStyle.CssClass = "datepicker"; 
}); 

をcssクラスを追加し、これはテストされていませんが、それは動作するはずそのCSSクラスに

$(".datepicker").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: '' 

    }); 

をあなたの日付ピッカーをバインドします。