Kendo UI Grid Read Action Parameters not Work

Question

Work

.Read(read => read.Action("Evento_Read", "Eventos", new { dataInicial = new DateTime(2014, 10, 13), dataFinal = new DateTime(2015, 10, 13) })

Not Work

.Read(read => read.Action("Evento_Read", "Eventos").Data("additionalParam")   

<script type="text/javascript">
function additionalParam() {

    return {
        dataInicial: new Date(2014,10,13),
        dataFinal: new Date(2015, 10, 13)
    }
}

Grid Code

@(Html.Kendo().Grid<Evento>()
  .Name("eventoGrid")
  .Columns(columns =>
  {
      columns.Bound(c => c.EventoID).Visible(false);
      columns.Bound(c => c.Cliente).Width(150);
      columns.Bound(c => c.Projeto).Width(100);
      columns.Bound(c => c.Atividade).Width(200);
      columns.Bound(c => c.DataOcorrencia).Width(180);
      columns.Bound(c => c.HorasDecimal).Title("Horas").Width(100);
      columns.Template(x => { }).ClientTemplate("<a class='k-button' href='" + Url.Action("Edit", "Eventos") + "?id=#= EventoID #'" + ">Editar</a>").Width(80);
      columns.Bound(c => c.DescricaoCurta).Width(220);
  })
  .HtmlAttributes(new { style = "height:1000px;" })
  .ToolBar(toolbar =>
  {
      toolbar.Excel();
      toolbar.Pdf();
  })
  .Resizable(resize => resize.Columns(true))
  .Pageable(pager => pager
      .Input(true)
      .Numeric(true)
      .Info(true)
      .PreviousNext(true)
      .Refresh(true)
      .PageSizes(true).ButtonCount(5)
  )
  .Selectable(selectable =>
  {
      selectable.Mode(GridSelectionMode.Single);
      selectable.Type(GridSelectionType.Row);
  })
  .Sortable(sortable => { sortable.SortMode(GridSortMode.SingleColumn); })
  .Filterable()
  .Scrollable()
  .AutoBind(true)
  .Selectable(s => s.Mode(GridSelectionMode.Multiple))
  .DataSource(dataSource => dataSource
      .Ajax()
                     .Read(read => read.Action("Evento_Read", "Eventos", new { dataInicial = new DateTime(2014, 10, 13), dataFinal = new DateTime(2015, 10, 13) })
                     //.Read(read => read.Action("Evento_Read", "Eventos").Data("additionalParam")   
    ).PageSize(100)))

Answer 1

Try passing the Date arguments as strings. jQuery (which Kendo UI uses under the hood) won't send JavaScript dates.

function additionalParam() {
    return {
        dataInicial: "2014-10-13", // new Date(2014,10,13),
        dataFinal: "2015-10-13" //new Date(2015, 10, 13)
    };
}

Answer 2

Final Code

  @(Html.Kendo().DatePicker()
      .Name("start")
      .Value(DateTime.Today.AddMonths(-1))
      .ParseFormats(new[] {"dd/MM/yyyy"})
      )

<label>Fim:</label>
@(Html.Kendo().DatePicker()
      .Name("end")
      .Value(DateTime.Today)
      .ParseFormats(new[] {"dd/MM/yyyy"})
      )

@(Html.Kendo().Button()
      .Name("primaryTextButton")
      .HtmlAttributes(new {type = "button", @class = "k-primary"})
      .Content("Pesquisar"))


<script>
$("#primaryTextButton").click(function() {

    $("#eventoGrid").data("kendoGrid").dataSource.read();
    $("#eventoGrid").css("display", "block");
});


function additionalParam() {

    var startDate = $("#start").kendoDatePicker({
        parseFormats: ["dd/MM/yyyy"],
        format: "dd/MM/yyyy"
    }).data("kendoDatePicker");

    var endDate = $("#end").kendoDatePicker({
        parseFormats: ["dd/MM/yyyy"],
        format: "dd/MM/yyyy"
    }).data("kendoDatePicker");


    return {
        dataInicial: startDate.value(),
        dataFinal: endDate.value()
    }
}

@(Html.Kendo().Grid<Evento>()
  .Name("eventoGrid")
  .Columns(columns =>
  {
      columns.Bound(c => c.EventoID).Visible(false);
      columns.Bound(c => c.Cliente).Width(150);
      columns.Bound(c => c.Projeto).Width(100);
      columns.Bound(c => c.Atividade).Width(200);
      columns.Bound(c => c.DataOcorrencia).Width(180);
      columns.Bound(c => c.HorasDecimal).Title("Horas").Width(100);
      columns.Template(x => { }).ClientTemplate("<a class='k-button' href='" + Url.Action("Edit", "Eventos") + "?id=#= EventoID #'" + ">Editar</a>").Width(80);
      columns.Bound(c => c.DescricaoCurta).Width(220);
  })
  .HtmlAttributes(new {style = "height:1000px;"})
  .ToolBar(toolbar =>
  {
      toolbar.Excel();
      toolbar.Pdf();
  })
  .Resizable(resize => resize.Columns(true))
  .Pageable(pager => pager
      .Input(true)
      .Numeric(true)
      .Info(true)
      .PreviousNext(true)
      .Refresh(true)
      .PageSizes(true).ButtonCount(5)
  )
  .Selectable(selectable =>
  {
      selectable.Mode(GridSelectionMode.Single);
      selectable.Type(GridSelectionType.Row);
  })
  .Sortable(sortable => { sortable.SortMode(GridSortMode.SingleColumn); })
  .Filterable()
  .Scrollable()
  .AutoBind(false)
  .Selectable(s => s.Mode(GridSelectionMode.Multiple))
  .DataSource(dataSource => dataSource
      .Ajax()
      .Read(read => read.Action("Evento_Read", "Eventos").Data("additionalParam")
      ).PageSize(100)))