formatting Time in Kendo Grid Column...

[mark baer]

I am using the client side controls.  I am unable to get the time portion of a datetime field in SQL to show up correctly in the grid.  Code is listed below.

<section id="dateSection">
    <input id="datepicker" onchange="fetchAvailability" />
</section>
<section id="gridSection">

</section>
<script type="text/javascript">
    function fetchAvailability(value) {
        //get Date and Fetch Availability...
        //var date = $('datepicker').val();
        debugger;
        //alert(value);
        var dateToFetch = kendo.toString(value, 'd');
        dateToFetch = dateToFetch.replace('/', '-');
        dateToFetch = dateToFetch.replace('/', '-');

        var url = "/Availability/GetByDate/" + dateToFetch;
        //alert(url);
        $("#gridSection").kendoGrid({
            dataSource: {
                type: "json",
                transport: {
                    read: url
                },
                pageSize: 100
            },
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "FirstName",
                title: "FirstName",
                width: 140
            }, {
                field: "LastName",
                title: "LastName",
                width: 190
            }, {
                field: "StartDateTime",
                title: "Start",
                format: "{0:yyyy-MM-dd HH:mm}",
                //template: '#= kendo.toString(new Date(parseInt(StartDateTime.replace(/[A-Za-z$--/]/g, ""))),"MM-dd-yyyy mm:ss tt") #',
                width: 200
            }, {
                field: "EndDateTime",
                title: "End",
                template: '#= kendo.toString(new Date(parseInt(EndDateTime.replace(/[A-Za-z$--/]/g, ""))),"MM-dd-yyyy mm:ss tt") #',
                width: 200
            }, {
                field: "Subject",
                title: "Comments"
            }]
        });
    }
    $(document).ready(function () {
        // create DateTimePicker from input HTML element
        $("#datepicker").kendoDatePicker({
            change: function () {
                var value = this.value();
                fetchAvailability(value);
                //console.log(value); //value is the selected date in the datepicker
            },
            value: new Date()
        });
    });
   
</script>

/////CONTROLLER CODE>>>
 public ActionResult GetByDate(string id)
        {
            DateTime fetchDate = DateTime.Now;
            if (!string.IsNullOrEmpty(id))
            {
                fetchDate = DateTime.Parse(id.Replace("-", "/"));
            }
            //DateTime fetchDate = DateTime.Parse(id);
            return Json(getAvailability(fetchDate), JsonRequestBehavior.AllowGet);
        }
        private IEnumerable<ViewModel.Availability> getAvailability(DateTime date)
        {
            var dc = new baddDBData();
            DateTime startDate = date.Date;
            DateTime endDate = startDate.AddDays(1).AddTicks(-1);
            //var baddDB = from m in dc.Availabilities.Where(m => m.StartDateTime.Equals(date.Date))
            var baddDB = from m in dc.vwAvailableUsers.Where(e => e.StartDateTime >= startDate && e.StartDateTime <= endDate)
                         select new ViewModel.Availability
                         {
                             Id = m.Id,
                             StartDateTime = m.StartDateTime,
                             //StartTime = m.StartDateTime.ToShortTimeString(),
                             EndDateTime = m.EndDateTime,
                             //EndTime = m.EndDateTime.ToShortTimeString(),
                             FirstName = m.FirstName,
                             LastName = m.LastName,
                             Subject = m.Subject
                             //Devotion = m.Devotion,
                             //Subject = "Badd Meeting"

                         };
            return baddDB;
        }



//////MODEL>>>>
class Availability
    {
        public int Id { get; set; }
        public int MemberId { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public DateTime StartDateTime { get; set; }
        public string StartTime { get; set; }
        public string EndTime { get; set; }
        public DateTime EndDateTime { get; set; }
        public string Subject { get; set; }
    }

[Lienys]

instead of
format: "{0:yyyy-MM-dd HH:mm}",

do:
format: "{0:yyyy/MM/dd}" and then you don't need to "fetchDate = DateTime.Parse(id.Replace("-", "/"));"

with the "/" works for me.

hope this help.

[mark baer]

Even if that works, it doesn't help because whether I have the date or not, what I really need is the time.  This is for a scheduling system.  In the database, the time is stored with the Date.  When I get out to the UI, I would like to just show the Time in the Kendo Grid, not the date(although I can live with Date and time if that is the best I can get).

Thanks for responding.

Mark

[mark baer]

Okay, I am able to get the time(see code below)...but it is in military time and the am/pm for the End Time is not displaying correctly.  What else am I missing?(See attachment)...

thanks

[mark baer]

Oops, forgot the new code:

 $("#gridSection").kendoGrid({
            dataSource: {
                type: "json",
                transport: {
                    read: url
                },
                pageSize: 100
            },
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "FirstName",
                title: "FirstName",
                width: 140
            }, {
                field: "LastName",
                title: "LastName",
                width: 190
            }, {
                field: "StartDateTime",
                title: "Start",
                type: "date",
                format: "{0:mm:00 tt}",
                width: 200
            }, {
                field: "EndDateTime",
                title: "End",
                type: "date",
                format      : "{0:mm:ss tt}",
                width: 200
            }, {
                field: "Subject",
                title: "Comments"
            }]
        });

[Lienys]

that's great! thank you for sharing!

I need to get the grid data without the edit and destroy column that is added by me in the views, do you know how can I get that?

when I do 
$("#grid").data("kendoGrid").dataSource.data() ==> I get the whole data including the edit and destroy column.

[Nathan]

i'm using a server side grid...anyway to do this on the server side?

[Vladimir Iliev]

Hi Nathan,

If you need to apply custom format to DateTime column in Telerik UI Grid for ASP.NET MVC than you can use the "Format" method as demonstrated below:

columns.Bound(p => p.OrderDate).Format("{0:mm:ss tt}");

Regards,
Vladimir Iliev
Telerik