MVC Grid, Inline Editing with DatePicker and Disabled Dates

8 posts, 0 answers
  1. Mark
    Mark avatar
    12 posts
    Member since:
    Jun 2018

    Posted 06 Aug 2019 Link to this post

    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?

  2. Mark
    Mark avatar
    12 posts
    Member since:
    Jun 2018

    Posted 06 Aug 2019 Link to this post

    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?

  3. Mark
    Mark avatar
    12 posts
    Member since:
    Jun 2018

    Posted 06 Aug 2019 in reply to Mark Link to this post

    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>))
  4. Mark
    Mark avatar
    12 posts
    Member since:
    Jun 2018

    Posted 06 Aug 2019 Link to this post

    Is there anybody, out there?
  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 08 Aug 2019 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  6. Mark
    Mark avatar
    12 posts
    Member since:
    Jun 2018

    Posted 08 Aug 2019 in reply to Boyan Dimitrov Link to this post

    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.

     

  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 09 Aug 2019 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  8. Mark
    Mark avatar
    12 posts
    Member since:
    Jun 2018

    Posted 09 Aug 2019 in reply to Boyan Dimitrov Link to this post

    Thank you, Boyan, for the additional explanation.
Back to Top