MVC Grid, Inline Editing with DatePicker and Disabled Dates

[Mark]

I have a date column in my grid and an associated editor template for the date picker. I need to disable a lot of dates (every day except the last day of the month). I have created a list and set a ViewData object to that list of dates; however, the DataPicker editor template won't accept a ViewData object. How would I go about setting the disabled dates?

Grid:

@(Html.Kendo().Grid<HFITDashboard.UI.Models.SmaDataEntry.SmaPerformanceViewModel>()
          .Name("smaPerformanceGrid")
          .Columns(column =>
          {
              column.Command(cmd =>
              {
                  cmd.Edit();
              }).Width(300);
              column.Bound(s => s.SmaPerformanceId).Width(150).IncludeInMenu(false).Hidden(true);
              column.Bound(s => s.RefFund).Width(300).ClientTemplate("#=RefFund.LongName#");
              column.Bound(s => s.RefSource).Width(250).ClientTemplate("#=RefSource.LongName#");
              column.Bound(s => s.CalendarDate).Width(250).Format("{0:MM/dd/yyyy}");
              column.Bound(s => s.SsbPerformanceType).Width(250).ClientTemplate("#=SsbPerformanceType.DisplayName#");
              column.Bound(s => s.OneDay).Width(250).Format("{0:n2}");
              column.Bound(s => s.Mtd).Width(250).Format("{0:n2}");
              column.Bound(s => s.OneMonth).Width(250).Format("{0:n2}");
              column.Bound(s => s.ThreeMonths).Width(250).Format("{0:n2}");
              column.Bound(s => s.SixMonths).Width(250).Format("{0:n2}");
              column.Bound(s => s.NineMonths).Width(250).Format("{0:n2}");
              column.Bound(s => s.Qtd).Width(250).Format("{0:n2}");
              column.Bound(s => s.FiscalYtd).Width(250).Format("{0:n2}");
              column.Bound(s => s.CalendarYtd).Width(250).Format("{0:n2}");
              column.Bound(s => s.OneYear).Width(250).Format("{0:n2}");
              column.Bound(s => s.TwoYears).Width(250).Format("{0:n2}");
              column.Bound(s => s.ThreeYears).Width(250).Format("{0:n2}");
              column.Bound(s => s.FourYears).Width(250).Format("{0:n2}");
              column.Bound(s => s.FiveYears).Width(250).Format("{0:n2}");
              column.Bound(s => s.SixYears).Width(250).Format("{0:n2}");
              column.Bound(s => s.SevenYears).Width(250).Format("{0:n2}");
              column.Bound(s => s.EightYears).Width(250).Format("{0:n2}");
              column.Bound(s => s.NineYears).Width(250).Format("{0:n2}");
              column.Bound(s => s.TenYears).Width(250).Format("{0:n2}");
              column.Bound(s => s.FifteenYears).Width(250).Format("{0:n2}");
              column.Bound(s => s.TwentyYears).Width(250).Format("{0:n2}");
              column.Bound(s => s.InceptionToDate).Width(250).Format("{0:n2}");
              column.Bound(s => s.Nav).Width(250).Format("{0:n2}");
              column.Bound(s => s.MarketOfferPrice).Width(250).Format("{0:n2}");
              column.Bound(s => s.LastMaintenanceOperatorId).Width(150);
          })
          .ToolBar(tb => tb.Create().Text("Create Performance Record"))
          .Editable(editable => editable.Mode(GridEditMode.InLine))
          .ColumnMenu()
          .Filterable()
          .Pageable()
          .Sortable()
          .Scrollable(s => s.Enabled(true).Height(535))
          .DataSource(ds => ds
              .Ajax()
              .PageSize(100)
              .Model(model =>
              {
                  model.Id(s => s.SmaPerformanceId);
                  model.Field(x => x.LastMaintenanceOperatorId).Editable(false);
                  model.Field(x => x.SsbPerformanceType).DefaultValue(
                      ViewData["defaultSsbPerformanceTypes"] as HFITDashboard.UI.Models.SmaDataEntry.SsbPerformanceTypeViewModel);
                  model.Field(x => x.RefSource).DefaultValue(
                      ViewData["defaultRefSources"] as HFITDashboard.UI.Models.SmaDataEntry.RefSourceViewModel);
                  model.Field(x => x.RefFund).DefaultValue(
                      ViewData["defaultRefFunds"] as HFITDashboard.UI.Models.SmaDataEntry.RefFundViewModel);
              })
              .Create(create => create.Action("Create", "SmaDataEntry"))
              .Read(read => read.Action("Read", "SmaDataEntry"))
              .Update(update => update.Action("Update", "SmaDataEntry"))
              .Events(e => e.RequestEnd("onRequestEnd").Sync("sync_handler"))
          ))

 

Editor Template:

@model DateTime?
@(Html.Kendo().DatePickerFor(m => m))

 

Method that gets disabled dates:

private void GetNonMonthEndDates()
        {
            DateTime StartDate = new DateTime(2000, 1, 1);
            DateTime EndDate = new DateTime(2030, 12, 31);
            int DayInterval = 1;

            List<DateTime> dateList = new List<DateTime>();
            while (StartDate.AddDays(DayInterval) <= EndDate)
            {
                StartDate = StartDate.AddDays(DayInterval);
                var daysInMonth = DateTime.DaysInMonth(StartDate.Year, StartDate.Month);

                if (!StartDate.Day.Equals(daysInMonth))
                {
                    dateList.Add(StartDate);
                }

                ViewData["disabledDates"] = dateList;
            }
        }

 

How do I associate the ViewData object to the DataPicker DisabledDates, or is there another way to do it?

[Mark]

When I inspect the CalendarDate element in Chrome, here's what I see:

<script>
    kendo.syncReady(function(){jQuery("#CalendarDate").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0),"disableDates":["1/2/2000","1/3/2000","1/4/2000","1/5/2000","1/6/2000","1/7/2000","1/8/2000","1/9/2000","1/10/2000","1/11/2000","1/12/2000","1/13/2000","1/14/2000","1/15/2000","1/16/2000","1/17/2000","1/18/2000","1/19/2000","1/20/2000","1/21/2000","1/22/2000","1/23/2000","1/24/2000","1/25/2000","1/26/2000","1/27/2000","1/28/2000","1/29/2000","1/30/2000","2/1/2000","2/2/2000","2/3/2000","2/4/2000","2/5/2000"...

 

All the dates I want disabled are listed; however, none of them are disabled in the control? Any ideas?

[Mark]

for reference, here's the editor template I'm using that produces the output above:

@model DateTime?

@(Html.Kendo().DatePickerFor(m => m)
      .DisableDates(ViewData["disabledDates"] as List<string>))

[Mark]

Is there anybody, out there?

[Boyan Dimitrov]

Hello,

The problem here is that when the disableDates property of the Kendo UI DatePicker is an array the array should contain JavaScript Date objects, not strings. My suggestion is to define the disabledDates as a function and store the disabled dates in ViewBag. The solution will be very similar to the one in our https://demos.telerik.com/aspnet-mvc/datepicker/disable-dates demo - the dates from the ViewBag will be parsed to dates. When the array containing the JavaScript array will be iterated and if the date matches the current date false should be returned so the current date will be disabled. 

Regards,
Boyan Dimitrov
Progress Telerik

[Mark]

I hear you in that I should do this through a JS function, and that's fine. However, the documentation for disabled dates shows that an IEnumerable<string> is acceptable, unless I'm reading that incorrectly. See attached image.

 

[Boyan Dimitrov]

Hello,

Indeed I think that I mislead you with my last response and I would like to apologize. IEnumerable<string> is acceptable yes, but it is intended to contain days of the week (presented as strings - "we", "mo" and so on) that need to be disabled. It is not intended to contain string representation of specific dates - for example "1/1/2018". Based on your requirement ( to disable specific dates) the  IEnumerable<string> option of disabledDates property should not work for you. 


Regards,
Boyan Dimitrov
Progress Telerik

[Mark]

Thank you, Boyan, for the additional explanation.