Group Header : Date format

[Joe]

When using the MVC Grid, and I group by a date, it shows: "Receipt Date: Tue Jan 24 2017 00:00:00 GMT-0700 (US Mountain Standard Time)", when all I want is the field name, followed by the date, formatted as a date.  "Receipt Date: 01/24/2017"  How can I get this?

 

[Viktor Tachev]

Hello Joe,

Please ensure that you have specified the format for the column correctly. Then the date should be displayed as expected. Check out the following video as reference.

• https://www.screencast.com/t/C4hAdyVCj

Regards,
Viktor Tachev
Telerik by Progress

[Joe]

I do have the dates formatted correctly in the grid.  But the group header still does it's own thing...  See the two screen shots, and here is my grid code:

@(Html.Kendo().Grid<UploadedDocument>()
      .Name("docResults")
      .TableHtmlAttributes(new { @class = "table-condensed" })
      .Columns(cols =>
      {
          cols.Bound(c => c.Id)
            .Width(65)
            .ClientTemplate("<input type=\"checkbox\" />")
            .HeaderTemplate("<input id=\"checkAll\" type=\"checkbox\" />")
            .Filterable(false)
            .IncludeInMenu(false)
            .Sortable(false);
          cols.Bound(c => c.DocketNumber);
          cols.Bound(c => c.CaseId);
          cols.Bound(c => c.Type);
          cols.Bound(c => c.ClientId);
          cols.Bound(c => c.EmployeeId);
          cols.Bound(c => c.SSN);
          cols.Bound(c => c.LastName);
          cols.Bound(c => c.FirstName);
          cols.Bound(c => c.ReceiptDate)
              .ClientTemplate("#= data.ReceiptDate ? kendo.format('{0:d}', kendo.parseDate(ReceiptDate)) : '' #");
          cols.Bound(c => c.Notes);
          cols.Bound(c => c.Name)
            .Title("Document")
            .ClientTemplate("<a href=\"" + @Url.Content("~/GarnishDocs/") + "#:Name#\" target=\"_blank\">Document</a>")
            .Width(115)
            .Filterable(false)
            .Sortable(false);
          cols.Command(c => c.Edit()).Width(90);
      })
      .Resizable(r => r.Columns(true))
      .Reorderable(r => r.Columns(true))
      .Scrollable(s => s.Height("auto"))
      .Sortable()
      .Pageable(p => p
          .PageSizes(new List<object> { 10, 20, 30, 40, 50, "all" })
          .ButtonCount(10))
      .Filterable(f => f.Enabled(true))
      .Events(ev =>
      {
          ev.DataBound("gridBound");
          ev.Edit("checkDocket");
      })
      .AutoBind(true)
      .DataSource(ds => ds
          .Ajax()
          .PageSize(25)
          .ServerOperation(true)
          .Model(m =>
          {
              m.Id(d => d.Id);
              m.Field(d => d.DocketNumber);
              m.Field(d => d.CaseId);
              m.Field(d => d.Type);
              m.Field(d => d.ClientId);
              m.Field(d => d.EmployeeId);
              m.Field(d => d.SSN);
              m.Field(d => d.LastName);
              m.Field(d => d.FirstName);
              m.Field(d => d.ReceiptDate);
              m.Field(d => d.Notes);
              m.Field(d => d.Name);
          })
          .Update(u => u.Action("EditInline", "Document"))
          .Read(r => r.Action("DocumentSearchResults", "Document", new
          {
              unMatchedOnly = @Model.UnMatchedOnly,
              docketNumber = @Model.DocketNumber,
              employeeId = @Model.EmployeeId,
              ssnNumber = @Model.SSNNumber,
              lastName = @Model.LastName,
              firstName = @Model.FirstName,
              caseID = @Model.CaseId,
              garnishType = @Model.GarnishType,
              clientId = @Model.ClientId,
              miscNotes = @Model.Notes,
              startDate = @Model.StartDate,
              endDate = @Model.EndDate
          }))
      )
      .ToolBar(tb =>
      {
        tb.Custom().Text("Clear Filter").HtmlAttributes(new { id = "gridFilterReset", style = "float:right;" });
        tb.Custom().Text("ZIP Download").HtmlAttributes(new { id = "downloadButton", style = "float:right;" });
        tb.Custom().Text("New Search").HtmlAttributes(new { id = "newSearch", style = "float:left" });
        tb.Custom().Text("Match Dockets").HtmlAttributes(new { id = "refreshDockets", style = "float:left" });
    })
      .Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("GarnishDoc"))
      .ColumnMenu()
      .Groupable()
)

 

[Joe]

Dammit, forgot to include the screenshots...

[Viktor Tachev]

Hello Joe,

I have examined the code and noticed the you have ClientTemplate specified for the column. Note that this would only customize the way values appear in the Grid cells. Please set Format() for the column and see how the behavior changes.

columns.Bound(p => p.ReceiptDate).Format("{0:d}")

Regards,
Viktor Tachev
Telerik by Progress

[Joe]

Thank you... I searched for how to actually display a datetime value as a date, and the ClientTemplate approach was one of the answers I found...Of course these components have many different approaches to doing things, some complimentary, some conflicting. It seems like every time I want to use a Telerik component, I spend 9/10's of my time searching for how to do things, and it never covers all of it.  I really wish Telerik would work on their documentation and demos, make them a little more precise, and more verbose.

[Viktor Tachev]

Hello Joe,

I am glad that the suggestion was helpful.

Also, thank you for the feedback. We are updating the documentation with relevant info about the components and common use cases. Moreover, we are adding content to the How-to section for the components.

With that said, we will definitely take your input into account when adding content to the documentation and how-to resources.

Regards,
Viktor Tachev
Telerik by Progress