This is a migrated thread and some comments may be shown as answers.

formatting Time in Kendo Grid Column...

7 Answers 1924 Views
Grid
This is a migrated thread and some comments may be shown as answers.
mark baer
Top achievements
Rank 1
mark baer asked on 14 Mar 2014, 04:24 PM
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; }
    }




7 Answers, 1 is accepted

Sort by
0
Lienys
Top achievements
Rank 2
answered on 14 Mar 2014, 07:36 PM
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.
0
mark baer
Top achievements
Rank 1
answered on 14 Mar 2014, 08:06 PM
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
0
mark baer
Top achievements
Rank 1
answered on 14 Mar 2014, 08:41 PM
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
0
mark baer
Top achievements
Rank 1
answered on 14 Mar 2014, 08:42 PM
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"
            }]
        });
0
Lienys
Top achievements
Rank 2
answered on 14 Mar 2014, 08:47 PM
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.
0
Nathan
Top achievements
Rank 1
answered on 19 Mar 2014, 02:29 PM
i'm using a server side grid...anyway to do this on the server side?
0
Vladimir Iliev
Telerik team
answered on 21 Mar 2014, 09:54 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
mark baer
Top achievements
Rank 1
Answers by
Lienys
Top achievements
Rank 2
mark baer
Top achievements
Rank 1
Nathan
Top achievements
Rank 1
Vladimir Iliev
Telerik team
Share this question
or