[CLOSED] Grid Group: Show full datetime but group by month day year

**cwolcott** · Feb 04, 2015, 3:50 PM

I saw this thread Group by DateTime, but I don't think it is exactly what I would like.

Is there a way to show the full DateTime in the column but if the column is group do it by just the date and not the time.

I have the ext:DateColumn defined as

   <ext:DateColumn runat="server" Text="Date Added" Format="Y-MM-dd hh:mm:ss a" Width="170" DataIndex="DateOrdered" />

Also when the grid is displayed I am grouping on a different column by default, PageNm.

<ext:Store runat="server" GroupField="PageNm" >
   <Model>
 ...

**Daniil** · Feb 04, 2015, 3:54 PM

Hi Chris,

The thread that you mentioned appears to be the same request as yours. I would recommend to try it.

**cwolcott** · Feb 04, 2015, 4:08 PM

I did and I received the following results.

<Groupers>
   <ext:DataSorter Property="DateOrdered">
      <Transform Handler="return Ext.Date.clearTime(item);" />
   </ext:DataSorter>
</Groupers>

So the code above did remove the time portion of the field DateOrdered, but the column now also displays the field without time "2015-02-04 00:00:00". I would still like to see the full DateTime in the column.

Also what is the best way to format the group Tpl header?

My default definition was:

GroupHeaderTplString="Page: {name} [{rows.length} Item{[values.rows.length > 1 ? 's' : '']}]"

but when I select a different column to group by the Tpl doesn't make sense. For DateOrdered I would want it to show:

GroupHeaderTplString="Date: {name} [{rows.length} Item{[values.rows.length > 1 ? 's' : '']}]"

The {name} should be formatted to only show the date portion of the field and not "Wed Feb 04 2015 00:00:00 GMT-0500 (Eastern Standard Time)".

**cwolcott** · Feb 04, 2015, 4:26 PM

Thread 2.1 Column .GroupRenderer helped show how to define various GroupHeader strings based on the field being grouped.

But I am still trying to have the field DateOrdered shown in the column as a full DateTime, but group only on the date portion of the field.

**Daniil** · Feb 05, 2015, 3:10 PM

So the code above did remove the time portion of the field DateOrdered, but the column now also displays the field without time "2015-02-04 00:00:00". I would still like to see the full DateTime in the column.

I found out that the clearTime method has the clone parameter that is false by default.
http://docs.sencha.com/extjs/4.2.1/#...thod-clearTime

Though, I tried

<Transform Handler="return Ext.Date.clearTime(item, true);" />

but it still doesn't work. It still groups according the time part as well.

I am investigating.

**cwolcott** · Feb 05, 2015, 5:21 PM

Here is an example with some questions:

I would like to be able to select the Date Created column to group on. It should group by Month and Year and not the full date time, but I still want the Date Created column to show the full date. (YOU ARE WORKING ON THIS, previous post)
Is it OK to have hyperlinks in the group tpl string? It appears that it is, except that seperator1 below " » " causes the group not to be able to expand after collapsing just a single group. If I use seperator2 " | " every thing works fine.
Does it make sense for the Show In Groups checkbox in the column dropdown to be disabled after unchecking it and coming off the dropdown, then looking at the dropdown again. You are able to uncheck and check the box as long as the dropdown doesn't disappear. I assume in the background it knows the last grouped column because when you uncheck it the column is not added back to the grid.

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (X.IsAjaxRequest)
            return;

        BuildStore();

    }

    private void BuildStore()
    {
        string seperator1 = " &raquo; ";
        string seperator2 = " | ";

        string premiumHelp2x = "<a href='http://forums.ext.net/forum.php' Target='_blank'>Ext.Net Forums</a>" + seperator1 +
                               "<a href='http://forums.ext.net/forumdisplay.php?13'>Premium</a>" + seperator1 +
                               "<a href='http://forums.ext.net/forumdisplay.php?17-2'>2.x Premium Help</a>";

        List<object> data = new List<object> 
            { 
                new { Id = 53271, DateCreated = DateTime.Parse("2/5/2015 11:50"), Forum = premiumHelp2x, UrlTitle ="<a href='http://forums.ext.net/showthread.php?53271'>Grid Group: Show full datetime but group by month day year</a>", User="cwolcott", Status="Open"},
                new { Id = 40901, DateCreated = DateTime.Parse("8/5/2014 14:20"), Forum = premiumHelp2x,  UrlTitle="<a href='http://forums.ext.net/showthread.php?40901'>[CLOSED] Field focus problem</a>", User="matrixwebtech", Status="Closed" },
            };

        this.GridStore.DataSource = data;
        this.GridStore.DataBind();
    }
</script>
<head runat="server">
    <title>Grid Grouping Example</title>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:GridPanel ID="GridPanel" runat="server" ClientIDMode="Static" >
        <Store>
            <ext:Store ID="GridStore" runat="server" GroupField="Forum">
                <Model>
                    <ext:Model runat="server" IDProperty="Id">
                        <Fields>
                            <ext:ModelField Name="Id" />
                            <ext:ModelField Name="DateCreated" Type="Date" />
                            <ext:ModelField Name="Forum" Type="String" />
                            <ext:ModelField Name="UrlTitle" Type="String" />
                            <ext:ModelField Name="User" Type="String" />
                            <ext:ModelField Name="Status" Type="String" />
                        </Fields>
                    </ext:Model>
                </Model>
                <Groupers>
                </Groupers>
                <Listeners>
                    <GroupChange Handler="var isGrouped = this.isGrouped(); #{CartEcBtn}.setDisabled(!isGrouped);" />
                </Listeners>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column runat="server" Text="Id" DataIndex="Id" Width="50" Groupable="false" />
                <ext:DateColumn runat="server" Text="Created" DataIndex="DateCreated" Format="Y-MM-dd hh:mm:ss a"
                    Width="170" />
                <ext:Column runat="server" Text="User" DataIndex="User" Width="90" />
                <ext:Column runat="server" Text="Status" DataIndex="Status" Width="60" />
                <ext:Column runat="server" Text="Forum" DataIndex="Forum" Flex="1" />
                <ext:Column runat="server" Text="Thread Title" DataIndex="UrlTitle" Flex="2" Groupable="false" />
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:CheckboxSelectionModel runat="server" Mode="Multi" />
        </SelectionModel>
        <Features>
            <ext:Grouping ID="GridGrouping" runat="server" StartCollapsed="false" HideGroupedHeader="true">
                <GroupHeaderTpl runat="server">
                    <Html>
                        <tpl if="groupField === 'DateCreated'">
                                    {name} [{rows.length} Item{[values.rows.length > 1 ? 's' : '']}]
                                </tpl>
                        <tpl if="groupField === 'Forum'">
                                    Forum: {name} [{rows.length} Item{[values.rows.length > 1 ? 's' : '']}]
                                </tpl>
                        <tpl if="groupField === 'User'">
                                    Creator: {name} [{rows.length} Item{[values.rows.length > 1 ? 's' : '']}]
                                </tpl>
                        <tpl if="groupField === 'Title'">
                                     Month Created: {name} [{rows.length} Item{[values.rows.length > 1 ? 's' : '']}]
                                </tpl>
                        <tpl if="groupField === 'Status'">
                                     Status: {name} [{rows.length} Item{[values.rows.length > 1 ? 's' : '']}]
                                </tpl>
                    </Html>
                </GroupHeaderTpl>
            </ext:Grouping>
        </Features>
        <Listeners>
            <AfterRender Handler="#{GridGrouping}.expanded = true;" />
        </Listeners>
        <TopBar>
            <ext:Toolbar runat="server">
                <Items>
                    <ext:Button ID="CartEcBtn" runat="server" Text="Expand/Collapse Groups" Icon="TableSort">
                        <Listeners>
                            <Click Handler="#{GridGrouping} [ #{GridGrouping}.expanded ? 'collapseAll' : 'expandAll'](); #{GridGrouping}.expanded = !#{GridGrouping}.expanded;" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
    </ext:GridPanel>
</body>
</html>

**Daniil** · Feb 06, 2015, 12:32 PM

1. Answered in the original thread.
http://forums.ext.net/showthread.php...l=1#post245741

2-3. Please start a new forum thread for, probably, each question. Having a few issues discussed in one threads complicates things a bit to maintain a thread.

**cwolcott** · Feb 06, 2015, 1:29 PM

Go ahead an close the thread.

I have submitted two additional threads for the last two questions:

(53471) Grid Group Header Tpl
(53481) Grid Group dropdown "Show In Groups" implementation

Thread: [CLOSED] Grid Group: Show full datetime but group by month day year

Thread Tools

Search Thread

Display

[CLOSED] Grid Group: Show full datetime but group by month day year

Similar Threads

[CLOSED] Grouping grids - how to get rendered group value in the group header text

[CLOSED] Group by DateTime

[CLOSED] Group Grid by month and Year

[CLOSED] show only month and year in datepicker

Group grid rows by Month+Year, Sort group items by Date

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Grid Group: Show full datetime but group by month day year

[CLOSED] Grid Group: Show full datetime but group by month day year

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us