Dynamically limit date range in Kendo Grid MVC date column

Question

I'm trying to set a min and max values for datetime picker control inside a grid. The value needs to be set dynamically, based on the value of another datepicker on the form.

I had try handling the onEdit event and trying to find the datetime picker control inside the row been edited to set those values without looking.

Whats is the proper way of restricting date ranges in Kendo Grid MVC inline editing?

This is how the grid is created:

<div>
    @(Html.Kendo().Grid<CpcPrevisionUnidadesDto>()
          .Name("gridListado")
          .HtmlAttributes(new { @class = "kendo-grid-" })
          .AutoBind(false)
          .Columns(columns =>
          {
              columns.Bound(c => c.IdCpcPrevisionParadasUnidadesDto).Hidden();
              columns.Bound(c => c.IdCpcUnidadesProceso).Hidden();
              columns.Bound(c => c.CodigoUnidadProceso).Title(Html.Resource("CPC_CU_DP003_Unidad").ToString());
              columns.Bound(c => c.DescripcionUnidadProceso).Title(Html.Resource("CPC_CU_DP003_Nombre").ToString());
              columns.Bound(c => c.FechaParada).Title(Html.Resource("CPC_CU_DP003_FechaParada").ToString()).Format("{0:dd/MM/yyyy}").EditorTemplateName("Date"); // Need to set MAX and MIN values
              columns.Bound(c => c.FechaArranque).Title(Html.Resource("CPC_CU_DP003_FechaArranque").ToString()).Format("{0:dd/MM/yyyy}").EditorTemplateName("Date"); // Need to set MAX and MIN values
              columns.Bound(c => c.Observaciones).Title(Html.Resource("CPC_CU_DP003_Observaciones").ToString());
              columns.Template(c => { }).Title(" ").Width(40).ClientTemplate("#=menuRuedaTemplate([uid])#").HtmlAttributes(new { style = "overflow: visible;" });
          })
          .DataSource(datasource => datasource
              .Ajax()
              .PageSize(20)
              .Read(read => read.Action("BuscarPrevisionParadasPrevistasUnidades", "PrevisionParadasPrevistasUnidades").Data("setParametrosListado"))
              .Create(create => create.Action("CreatePrevisionParadasPrevistasUnidades", "PrevisionParadasPrevistasUnidades").Type(HttpVerbs.Post).Data("sendAntiForgery"))
              .Update(update => update.Action("UpdatePrevisionParadasPrevistasUnidades", "PrevisionParadasPrevistasUnidades").Type(HttpVerbs.Post).Data("sendAntiForgery"))
              .Sort(sort => sort.Add("CodigoUnidadProceso").Ascending())
              .Events(e => e.Error("screenErrorHandling"))
              .Model(model => model.Id(p => p.IdCpcPrevisionParadasUnidadesDto))
          )
          .Sortable()
          .Navigatable()
          .Pageable(pager => pager.Messages(messages => messages.Display(Html.Resource("Mensaje_Grid_Datos").ToString()))
          .Messages(m => m.Empty(Html.Resource("Mensaje_Grid_SinDatos").ToString())))
          .Resizable(r => r.Columns(true))
          .Events(e => e.DataBound("dataBoundGrid").Edit("onEdit"))
          .Editable(editable => editable.Mode(GridEditMode.InCell))
          .ToolBar(toolbar => toolbar.Save().SaveText(Html.Resource("MAIN_Guardar").ToString()).CancelText(Html.Resource("MAIN_Cancelar").ToString())))
</div>

This is the date editor template:

@model DateTime?

@(Html.Kendo().DatePickerFor(m => m))

@MarioGarcia Thanks for your time, I have updated my question. — Oscar

Mario Garcia Mario Garcia · Accepted Answer · 2016-07-08T10:33:57

You need to edit the HTML for your DatePicker and specify values for Min and Max. In this example, you will only be able to choose past values from this year.

@(Html.Kendo().DatePickerFor(m => m)
.Min("01/01/2016")
.Max(DateTime.Now)
)

If you need to set the value dynamically, you can try this, just get the value you need:

$("#Date").data("kendoDatePicker").min(new Date(2015, 0, 1))

same for .max()

Try that on your "onEdit" event, when the datepicker is created, and let me know if you need more help

Dynamically limit date range in Kendo Grid MVC date column

1 Answers