How to format a date in the Grid

5 posts, 0 answers
  1. Bill
    Bill avatar
    1 posts
    Member since:
    Feb 2012

    Posted 08 Feb 2012 Link to this post

    What is required to display a date in format mm/dd/yyyy
    I have defined the grid table as shown below.

    <table id="CaseProgramGrid">
                 <th data-field="clientLastName">@CaseProgramLabels.ListHeader_LastName</th>
                 <th data-field="clientLastName">@CaseProgramLabels.ListHeader_FirstName</th>
                 <th data-field="clientIdentifier">@CaseProgramLabels.ListHeader_ClientId</th>
                 <th data-field="clientCaseIdentifier">@CaseProgramLabels.ListHeader_ClientCaseId</th>
                 <th data-field="programType">@CaseProgramLabels.ListHeader_ProgramType</th>
                 <th data-field="clientCaseStartDate">@CaseProgramLabels.ListHeader_StartDate</th>
                 <th data-field="clientCaseStartDate">@CaseProgramLabels.ListHeader_EndDate</th>
                 <th data-field="caseProgramStatus">@CaseProgramLabels.ListHeader_CaseProgramStatus</th>
                 <th class="action">Actions</th>
         @foreach (var item in Model.CaseProgramListItems) {
                     @Html.DisplayFor(modelItem => item.ClientLastName)
                     @Html.DisplayFor(modelItem => item.ClientFirstName)
                     @Html.DisplayFor(modelItem => item.ClientIdentifier)
                     @Html.DisplayFor(modelItem => item.ClientCaseIndentifier)
                     @Html.DisplayFor(modelItem => item.ProgramType.Name)
                     @Html.DisplayFor(modelItem => item.ClientCaseStartDate)
                     @Html.DisplayFor(modelItem => item.ClientCaseEndDate)
                     @Html.DisplayFor(modelItem => item.CaseProgramStatus.Name)
                 <td class="action">
                         <li>@Html.ActionLink(@CommonLabels.ActionLink_View, "Tasks", "Client", new { area = "CasePrograms", caseProgramId = item.CaseProgramId }, null)</li>

    And the kendo grid initialize as below. Question1 :  But receive a jscript error. 'Unable to get value of the property 'sortable': object is null or undefined' What is wrong? Question 2: Do need to specify every column in the columns: collection just to format 2 of the columns in the grid?

    @section Script
         $(document).ready(function () {
                dataSource: {
                    group: {
                        field: "LastName",
                        dir: "asc"
                height: 360,
                groupable: true,
                scrollable: true,
                sortable: true,
                pageable: true,
                columns: [{ field: "LastName" }, { field: "FirstName" }, { field: "ClientIdentifier" }, { field: "ClientCaseIndentifier" }, { field: "ProgramType" }, { field: "ClientCaseStartDate", template: '#= kendo.toString(ClientCaseStartDate,"MM/dd/yyyy") #' }, { field: "ClientCaseEndDate", template: '#= kendo.toString(ClientCaseEndDate,"MM/dd/yyyy") #' }, { field: "CaseProgramStatus"}]
  2. Jeremy
    Jeremy avatar
    56 posts
    Member since:
    Nov 2011

    Posted 24 Feb 2012 Link to this post

    I also need to format dates in a grid.  I want to remove the time stamp and just show the date.

    I tried this:
                { field: "DueDate", title: "Due Date", template: '#= kendo.toString(toDate(DueDate), "MM/dd/yyyy")#' },

    Which I found on the Kendo Demo: 

    But I get a javascript error "toDate not found"

    The Webservices Crud example has

                        { field: "UnitPrice", format: "{0:c}", width: "150px" },

    So I tried 
    • format: "{0:d}" 
    • format: "{d}"
    • format: "MM/DD/YYYY"
    but nothing works.
    The date renders like "Feb 20 2012 12:00 AM"

    Note: I am having the webservice return the date in type string because if I return it of type date I get epoch style: "/Date(13315645000000)/"
  3. Jonas
    Jonas avatar
    33 posts
    Member since:
    Sep 2009
  4. Lincoln
    Lincoln avatar
    1 posts
    Member since:
    Jul 2016

    Posted 26 Jul 2017 in reply to Jeremy Link to this post

    This is a late response, but there is still not a good answer:

    Jeremy, you were so close. Try this:

     { field: "DueDate", title: "Due Date", template: '#= kendo.toString(kendo.parseDate(DueDate), "MM/dd/yyyy")#' },

  5. Peraiah
    Peraiah avatar
    2 posts
    Member since:
    May 2017

    Posted 18 Aug 2017 Link to this post

    This might helpful,
    columns.Bound(date=> date.START_DATE).Title("Start Date").Format("{0:MM dd, yyyy}");
Back to Top