Dropdownlist passing weird dates to another datasource

[Gregory]

Hi , 

In one of my project I have to let the user pickup on item from a dropdown list and then Add the corresponding Item from my model to a Grid datasource.
The Dropdown list is bind to a property of my ViewModel which is filled by the controller. The grid datasource is also bind to another ViewModel property which is empty and should be passed to controller upon From submit. Both properties are of the same type (TempPp)

My viewmodel contains 2 DateTime properties and after calling the values of those two properties are not displayed properly in the grid

The value sent by the controller is {01/11/2012 00:00:00} and the displayed value is /Date(1351724400000)/
or  {31/12/2013 00:00:00} and /Date(1388444400000)/

Here is myViewmodel

01.using System;
02.using System.Collections.Generic;
03.using System.Linq;
04.using System.Web;
05.using Airbus.Asam.Contracts;
06.using Airbus.Asam.BusinessObjects;
07.
08.namespace Customer.Asam.Presentation.Supplier.ViewModels
09.{
10.    public class TempPP
11.    {
12.        public Boolean isInDB { get; set; }
13.        public string ID { get; set; }
14.        public string PPSRCAPPLICATION { get; set; }
15.        public string PPREF { get; set; }
16.        public string PPSITE { get; set; }
17.        public string DESCRIPTION { get; set; }
18.        public System.DateTime DATEFROM { get; set; }
19.        public System.DateTime DATETO { get; set; }
20.        public string PPLEVEL { get; set; }
21.        public Nullable<decimal> QUOTA { get; set; }
22.    }
23.}

Here is a simplified version of my Razor view:

@model Customer.Asam.Presentation.Supplier.ViewModels.ARRViewmodel
@using Customer.Asam.Resources
@using Customer.Asam.Presentation.Supplier.Common

@using (Html.BeginForm("Create_Step3", "", FormMethod.Get, new { @id = "FORM_ARR_3" }))
{
    <div>
        <h2>@Asam_Strings.TITLE_CREATE_ARR_STEP 3 @Asam_Strings.TITLE_CREATE_ARR_PREVENTION_PLAN</h2>

        @Asam_Strings.LABEL_PP_REFERENCE

        @(Html.Kendo().DropDownList()
            .HtmlAttributes(new { style = "width: 250px" })
            .BindTo(Model.tempPP)
            .Name("tempPP") //The name of the combobox is mandatory. It specifies the "id" attribute of the widget.
            .DataTextField("PPREF") //Specifies which property of the Product to be used by the combobox as a text.
            .DataValueField("ID") //Specifies which property of the Product to be used by the combobox as a value.
            .Events(e => e
            .Select(@<text>
                function(e) {
                    e.preventDefault();
                    var dataItem = this.dataItem(e.item.index());

                    if (e.item.index() > 0)
                    {
                        var grid = $("#RefPP").data("kendoGrid");
                        grid.dataSource.add(dataItem);
                    }
                }  </text>))
         )

        <script>
            function indexPP(dataItem) {
                var data = $("#RefPP").data("kendoGrid").dataSource.data();
                return data.indexOf(dataItem);
            }
        </script>

        @(Html.Kendo().Grid(Model.RefPP)
            .Name("RefPP")
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(1)
                .ServerOperation(false)
             )

            .Columns(column =>
                {
                    column.Bound(c => c.PPREF)
                        .ClientTemplate("#= PPREF # " +
                        "<input type='hidden' name='RefPP[#= indexPP(data)#].PPREF' value='#= PPREF #' />" +
                        "<input type='hidden' name='RefPP[#= indexPP(data)#].PPSRCAPPLICATION' value='#= PPSRCAPPLICATION #' />" +
                        "<input type='hidden' name='RefPP[#= indexPP(data)#].PPSITE' value='#= PPSITE #' />" +
                        "<input type='hidden' name='RefPP[#= indexPP(data)#].DESCRIPTION' value='#= DESCRIPTION #' />" +
                        "<input type='hidden' name='RefPP[#= indexPP(data)#].DATEFROM' value='#= DATEFROM #' />" +
                        "<input type='hidden' name='RefPP[#= indexPP(data)#].DATEFROM' value='#= DATEFROM #' />" +
                        "<input type='hidden' name='RefPP[#= indexPP(data)#].DATETO' value='#= DATETO #' />" +
                        "<input type='hidden' name='RefPP[#= indexPP(data)#].QUOTA' value='#= QUOTA #' />");

                    column.Bound(c => c.PPSITE);
                    column.Bound(c => c.DESCRIPTION);
                    column.Bound(c => c.DATEFROM)
                        .Format("{0:dd/MM/yyyy}");
                    column.Bound(c => c.DATETO)
                        .Format("{0:dd/MM/yyyy}");
                    column.Bound(c => c.QUOTA);
                }
            )
        )

    </div>
}

[Vladimir Iliev]

Hi Gregory,

Basically in the DropDownList DataSource the date fields are not parsed which is the reason for current behavior. You should parse the date fields in current dataItem before add it to the DataSource of the Grid. Please check the example below which demonstrates how to parse the dates in the "Select" event of the DropDownList:

function(e) {
    e.preventDefault();
    var dataItem = this.dataItem(e.item.index());
    dataItem.DATETO = kendo.parseDate(dataItem.DATETO);
    dataItem.DATEFROM = kendo.parseDate(dataItem.DATEFROM);
    //dataItem

Kind Regards,
Vladimir Iliev
Telerik

[Gregory]

Thanks this is working fine with now