Group Header : Date format

7 posts, 0 answers
  1. Joe
    Joe avatar
    159 posts
    Member since:
    May 2012

    Posted 03 Feb Link to this post

    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?

     

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1715 posts

    Posted 07 Feb Link to this post

    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.




    Regards,
    Viktor Tachev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Joe
    Joe avatar
    159 posts
    Member since:
    May 2012

    Posted 07 Feb Link to this post

    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()
    )

     

  4. Joe
    Joe avatar
    159 posts
    Member since:
    May 2012

    Posted 07 Feb in reply to Joe Link to this post

    Dammit, forgot to include the screenshots...
  5. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1715 posts

    Posted 09 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Joe
    Joe avatar
    159 posts
    Member since:
    May 2012

    Posted 09 Feb Link to this post

    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.
  7. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1715 posts

    Posted 13 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top