Dropdownlist passing weird dates to another datasource

3 posts, 1 answers
  1. Answer
    Gregory
    Gregory avatar
    3 posts
    Member since:
    Oct 2013

    Posted 06 Dec 2013 Link to this post

    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>
    }

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 10 Dec 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Gregory
    Gregory avatar
    3 posts
    Member since:
    Oct 2013

    Posted 11 Dec 2013 Link to this post

    Thanks this is working fine with now
Back to Top