How to format a date in the Grid

3 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">
         <thead>
             <tr>
                 <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>
             </tr>
         </thead>
         <tbody>
         @foreach (var item in Model.CaseProgramListItems) {
             <tr>
                 <td>
                     @Html.DisplayFor(modelItem => item.ClientLastName)
                 </td>
                 <td>
                     @Html.DisplayFor(modelItem => item.ClientFirstName)
                 </td>
                 <td>
                     @Html.DisplayFor(modelItem => item.ClientIdentifier)
                 </td>
                 <td>
                     @Html.DisplayFor(modelItem => item.ClientCaseIndentifier)
                 </td>
                 <td>
                     @Html.DisplayFor(modelItem => item.ProgramType.Name)
                 </td>
                 <td>
                     @Html.DisplayFor(modelItem => item.ClientCaseStartDate)
                 </td>
                 <td>
                     @Html.DisplayFor(modelItem => item.ClientCaseEndDate)
                 </td>
                 <td>
                     @Html.DisplayFor(modelItem => item.CaseProgramStatus.Name)
                 </td>
                  
                 <td class="action">
                     <ul>
                         <li>@Html.ActionLink(@CommonLabels.ActionLink_View, "Tasks", "Client", new { area = "CasePrograms", caseProgramId = item.CaseProgramId }, null)</li>
                     </ul>
                 </td>
     
             </tr>
         }
         </tbody>
     </table>

    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
    {
     <script>
         $(document).ready(function () {
             $("#CaseProgramGrid").kendoGrid(
             
                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"}]
             });
         });
    </script>
  2. Jeremy
    Jeremy avatar
    55 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: 
    http://www.kendoui.com/blogs/teamblog/posts/12-02-20/getting_started_with_kendo_ui_and_openaccess_orm.aspx 

    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. Kendo UI is VS 2017 Ready
  4. Jonas
    Jonas avatar
    33 posts
    Member since:
    Sep 2009

    Posted 03 Jun 2012 Link to this post

Back to Top