[CLOSED] DateColumn format in GridPanel

  1. #1

    [CLOSED] DateColumn format in GridPanel

    Hi!
    I have a problem with modelField date type in gridPanel.
    I would like show my date in this format:

    dd/MM/YYYY hh:mm:ss (for example 01/12/2014 10:36:44)

    My implementation is:

    Code behind

    public class cEventiLOC
        {
            public string ID { get; set; }
            public DateTime DATA_EVENTO { get; set; }
        }
    
    
    ItemsList.Add(new cEventiLOC
                        {
                            ID = oDR["IDStoricoEventi"].ToString(),
                            DATA_EVENTO = DateTime.ParseExact(oDR["DataEvento"].ToString(), "dd/MM/yyyy HH:mm:ss", new CultureInfo(HttpContext.Current.Session["CurrentLanguage"].ToString())),
    }
    Aspx code

    <Store>                          
        <ext:Store ID="StoreEventiLOC" runat="server" PageSize="23" OnSubmitData="exportGridPanelStore_Submit" OnReadData="StoreEventiLOC_RefreshData">
            <Model>
                      <ext:Model ID="ModelEventiLOC" runat="server" IDProperty="ID">
                               <Fields>
                                       <ext:ModelField Name="ID"/>
                                        <ext:ModelField Name="DATA_EVENTO" Type="Date"/>
                               </Fields>
                       </ext:Model>
             </Model>
         </ext:Store>
     </Store>
    The result is:

    Click image for larger version. 

Name:	problem1.png 
Views:	163 
Size:	12.8 KB 
ID:	24513

    I tried to insert:

    DataFormat="dd/MM/yyyy HH:mm:ss"
    but the field is blank...

    Can anyone help me?
    Thank you!

    Stefano
    Last edited by fabricio.murta; Mar 24, 2016 at 4:36 PM. Reason: [CLOSED]
  2. #2
    Hello @metatronix!

    I believe you may have made a typo! The correct would be:
    DateFormat="dd/MM/yyyy HH:mm:ss"
    Notice it is "datE" not "datA". :)

    Well, but if the typo was just here in the post, maybe we'd have to fall back to a runnable example. Your code snippets look right.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi Fabricio,
    the typo was just here in the post :)
    I create a runnable example:


    Aspx:

    <%@ Page Title="" Language="C#" AutoEventWireup="true" CodeBehind="EventiTest.aspx.cs"
        Inherits="FormsAuth.EventiTest" MasterPageFile="~/Site.Master" %>
    
    
    
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    
        <ext:XScript ID="XScript1" runat="server">
            <script type="text/javascript">
     
            </script>
        </ext:XScript>
    
    
        <script type="text/javascript">
    
        </script>
    
    <style type="text/css">
            .x-grid3-col-clmSequence, .x-grid3-td-clmSequence {
                display:block;
                color: #000;
                margin:0px;
                padding:0px;
            }  
        </style>
    
    
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
        <ext:ResourceManager ID="ResourceManagerMain" runat="server" StateProvider="Cookie" />
        
        <div class="main">
            <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout" StyleSpec="background-color: transparent;">
                <Items>
    
                    <ext:Panel ID="panelEventiLOC" runat="server" Region="Center" Layout="Fit" Split="false"
                        Collapsible="false" Border="false" Hidden="false" AutoScroll="false" MarginSpec="84 0 0 0">
                        <Items>
                               <ext:GridPanel ID="GridPanelEventiLOC" runat="server" Title="Eventi" Stateful="true"
                                    BodyPadding="0"
                                    Resizable = "false"
                                    >    
                                    <Store>                          
                                        <ext:Store ID="StoreEventiLOC" runat="server" PageSize="23">
                                            <Model>
                                                <ext:Model ID="ModelEventiLOC" runat="server" IDProperty="ID">
                                                    <Fields>
                                                        <ext:ModelField Name="ID"/>
                                                        <ext:ModelField Name="DATA_EVENTO" Type="Date" DateFormat="yyyy-MM-dd HH:mm:ss.fff"/>     
                                                        <ext:ModelField Name="DATA_EVENTO_STRING"/>                                                                                   
                                                      </Fields>
                                                </ext:Model>
                                            </Model>
                                        </ext:Store>
                                    </Store>
                            <ColumnModel ID="ColumnModelEventiLOC" runat="server">
                                <Columns>
                                        <ext:Column ID="ColumnID" runat="server" Text="ID" DataIndex="ID" Width="100" Hidden = "true">
                                            <Filter>
                                                <ext:StringFilter />
                                            </Filter>
                                        </ext:Column>
      
                                        <ext:Column ID="ColumnDATA_EVENTO" runat="server" Text="DATA_EVENTO" DataIndex="DATA_EVENTO" Width="130" Hidden = "false">
                                            <Filter>
                                                <ext:DateFilter>
                                                    <DatePickerOptions runat="server" TodayText="Now" />
                                                </ext:DateFilter>
                                            </Filter>
                                        </ext:Column>
    
                                        <ext:Column ID="ColumnDATA_EVENTO_STRING" runat="server" Text="DATA_EVENTO_STRING" DataIndex="DATA_EVENTO_STRING" Width="100" Hidden = "false">
                                            <Filter>
                                                <ext:StringFilter />
                                            </Filter>
                                        </ext:Column>
                                        
                                </Columns> 
                            </ColumnModel>
                            
    
                            <Plugins>
                                <ext:GridFilters ID="GridFiltersEventiLOC" runat="server">
                                </ext:GridFilters>
    
                            </Plugins>
    
                        <BottomBar>
                            <ext:PagingToolbar ID="PagingToolbar2" 
                                runat="server" 
                                DisplayInfo="true"
                                DisplayMsg="Numero di record {0} - {1} of {2}">                           
    
                                <Items>
    	                          
                                </Items>
                                
                            </ext:PagingToolbar>
                        </BottomBar>
    
                                </ext:GridPanel>
                               
                        </Items>
                </ext:Panel>
    
    
                <ext:Panel ID="PanelCenterSouth" runat="server" Region="South" Layout="FitLayout" Split="false"
                        Collapsible="false" MarginSpec="0 0 0 0" Border="false" AutoScroll="false" Cls="panel-items-center-south">
                        <Items>
    
                        </Items>
    
                </ext:Panel>
    
    
                <ext:Panel ID="PanelSouth" runat="server" Region="South" Layout="FitLayout" MarginSpec="0 0 0 0"
                    Cls="panel-items-south" Border="false">
                        <items>
                            
                             <ext:Image ID="Image2" ImageUrl="~/resources/images/HomePage-BottomBar.jpg" Height="18" runat="server" Margins="0 0 0 0" />
                        </items>
                </ext:Panel>
                </Items>
            </ext:Viewport>
        </div>
    
    
    
    </asp:Content>

    Code behind:

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Data.SqlClient;
    using Ext.Net;
    using System.Configuration;
    using System.Xml;
    using System.Xml.Xsl;
    using System.Web;
    using System.Globalization;
    using Newtonsoft.Json;
    using Newtonsoft.Json.Linq;
    using System.ComponentModel;
    
    
    namespace FormsAuth
    {
        public class cEventiTest
        {
            public string ID { get; set; }
            public DateTime DATA_EVENTO { get; set; }
            public string DATA_EVENTO_STRING { get; set; }
        }
    
        public partial class EventiTest : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                try
                {
                    if (!X.IsAjaxRequest)
                    {
                        this.ResourceManagerMain.Theme = Ext.Net.Theme.Default;
    
                        this.BindEventiLOC();
                    }
                }
                catch (Exception ex)
                {
    
                }
            }
    
            #region POPULATE GRIDPANEL
            private void BindEventiLOC()
            {
                try
                {
                    this.GridPanelEventiLOC.Store.Primary.DataSource = this.GetDataEventiLOC();
                    this.GridPanelEventiLOC.Store.Primary.DataBind();
    
                    HttpContext.Current.Session["EventiLOC_DataSource"] = this.GridPanelEventiLOC.Store.Primary.DataSource;
                }
                catch (Exception ex)
                {
                   
                }
            }
            private List<cEventiTest> GetDataEventiLOC()
            {
                List<cEventiTest> ItemsList = new List<cEventiTest>();
                try
                {
                        ItemsList.Add(new cEventiTest
                        {
                            ID = "1",
                            DATA_EVENTO = DateTime.ParseExact("2006-02-07 06:28:15.100", "yyyy-MM-dd HH:mm:ss.fff", new CultureInfo("IT")),
                            DATA_EVENTO_STRING = "2006-02-07 06:28:15.100"
                        });
    
                        ItemsList.Add(new cEventiTest
                        {
                            ID = "2",
                            DATA_EVENTO = DateTime.ParseExact("2006-02-07 06:28:15.100", "yyyy-MM-dd HH:mm:ss.fff", new CultureInfo("IT")),
                            DATA_EVENTO_STRING = "2006-02-07 06:28:15.100"
                        });
                }
                catch (Exception ex)
                {
                   
                }
                return ItemsList;
            }
            #endregion
           
    
        }
    }

    The result is:

    Click image for larger version. 

Name:	problem2.png 
Views:	96 
Size:	2.8 KB 
ID:	24519
  4. #4
    Hello @metatronix!

    Oh my, it is so much easier to see what's up when we can run the code! :)

    Sorry I think I really would have had hard times figuring it out if you didn't provide the example!

    You have two possible ways to handle it:
    1. With the example as is it now, just send the date column as an actual string instead of DateTime. That would require -- given you have from your database the DateTime date -- that you both convert it to string and also to the format you define in the model's DateFormat.

    But by your example I believe you don't want to convert the date to string from code behind. So let's move to option 2:

    2. Define your model just as Type="Date":
    <ext:ModelField Name="DATA_EVENTO" Type="Date" />
    Define your column as a DateColumn with the Format= property the way you want the date to be displayed:
    <ext:DateColumn
        ID="ColumnDATA_EVENTO"
        runat="server"
        Text="DATA_EVENTO"
        DataIndex="DATA_EVENTO"
        Width="200"
        Format="dd/MM/yyyy HH:mm:ss"
        Hidden="false">
        <Filter>
            <ext:DateFilter>
                <DatePickerOptions runat="server" TodayText="Now" />
            </ext:DateFilter>
        </Filter>
    </ext:DateColumn>
    Voila, it should work just fine!.. One example using this approach in our examples explorer is this: GridPanel with Summary Plugin

    Now, on a second topic, your running example was very helpful to identify the issue. But as it had some things that wouldn't just allow it to work on-paste (like depending on a mysterious master page), there was a risk I could remove essential data to reproduce the issue in the process. And then we'd be bouncing messages over for much longer time.

    So I'll provide you here the single-file resulting test sample (also with indentation reviewed -- just used VS's indentation shortcut!).

    Notice:
    1. It does not have the code behind tag on first line.
    2. The actual C# code goes inside a <script runat="server" /> tag
    3. The necessary includes are added via <% Import Namespace="..." %>
    4. You can paste this code on a fresh Ext.NET project and it will work just fine (actually, having a handy "ExtNetPlayground" project to write your test cases may prove extremely useful -- you can sort out questions before even needing to ask them!)

    So, to the resulting code:
    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Globalization" %>
    <!DOCTYPE html>
    
    <script runat="server">
        public class cEventiTest
        {
            public string ID { get; set; }
            public DateTime DATA_EVENTO { get; set; }
            public string DATA_EVENTO_STRING { get; set; }
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
            try
            {
                if (!X.IsAjaxRequest)
                {
                    this.ResourceManagerMain.Theme = Ext.Net.Theme.Default;
    
                    this.BindEventiLOC();
                }
            }
            catch (Exception ex)
            {
    
            }
        }
    
        #region POPULATE GRIDPANEL
        private void BindEventiLOC()
        {
            try
            {
                this.GridPanelEventiLOC.Store.Primary.DataSource = this.GetDataEventiLOC();
                this.GridPanelEventiLOC.Store.Primary.DataBind();
    
                HttpContext.Current.Session["EventiLOC_DataSource"] = this.GridPanelEventiLOC.Store.Primary.DataSource;
            }
            catch (Exception ex)
            {
    
            }
        }
        private List<cEventiTest> GetDataEventiLOC()
        {
            List<cEventiTest> ItemsList = new List<cEventiTest>();
            try
            {
                ItemsList.Add(new cEventiTest
                {
                    ID = "1",
                    DATA_EVENTO = DateTime.ParseExact("2006-02-07 06:28:15.100", "yyyy-MM-dd HH:mm:ss.fff", new CultureInfo("IT")),
                    DATA_EVENTO_STRING = "2006-02-07 06:28:15.100"
                });
    
                ItemsList.Add(new cEventiTest
                {
                    ID = "2",
                    DATA_EVENTO = DateTime.ParseExact("2006-02-07 06:28:15.100", "yyyy-MM-dd HH:mm:ss.fff", new CultureInfo("IT")),
                    DATA_EVENTO_STRING = "2006-02-07 06:28:15.100"
                });
            }
            catch (Exception ex)
            {
    
            }
            return ItemsList;
        }
        #endregion
    </script>
    
    <html>
    <head runat="server">
        <title></title>
        <ext:XScript ID="XScript1" runat="server">
            <script type="text/javascript">
            </script>
        </ext:XScript>
    
        <script type="text/javascript">
        </script>
    
        <style type="text/css">
            .x-grid3-col-clmSequence, .x-grid3-td-clmSequence {
                display: block;
                color: #000;
                margin: 0px;
                padding: 0px;
            }
        </style>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManagerMain" runat="server" StateProvider="Cookie" />
    
        <div class="main">
            <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout" StyleSpec="background-color: transparent;">
                <Items>
                    <ext:Panel ID="panelEventiLOC" runat="server" Region="Center" Layout="Fit" Split="false"
                        Collapsible="false" Border="false" Hidden="false" AutoScroll="false" MarginSpec="84 0 0 0">
                        <Items>
                            <ext:GridPanel ID="GridPanelEventiLOC" runat="server" Title="Eventi" Stateful="true"
                                BodyPadding="0"
                                Resizable="false">
                                <Store>
                                    <ext:Store ID="StoreEventiLOC" runat="server" PageSize="23">
                                        <Model>
                                            <ext:Model ID="ModelEventiLOC" runat="server" IDProperty="ID">
                                                <Fields>
                                                    <ext:ModelField Name="ID" />
                                                    <ext:ModelField Name="DATA_EVENTO" Type="Date" />
                                                    <ext:ModelField Name="DATA_EVENTO_STRING" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                    </ext:Store>
                                </Store>
                                <ColumnModel ID="ColumnModelEventiLOC" runat="server">
                                    <Columns>
                                        <ext:Column ID="ColumnID" runat="server" Text="ID" DataIndex="ID" Width="200" Hidden="true">
                                            <Filter>
                                                <ext:StringFilter />
                                            </Filter>
                                        </ext:Column>
    
                                        <ext:DateColumn
                                            ID="ColumnDATA_EVENTO"
                                            runat="server"
                                            Text="DATA_EVENTO"
                                            DataIndex="DATA_EVENTO"
                                            Width="200"
                                            Format="dd/MM/yyyy HH:mm:ss"
                                            Hidden="false">
                                            <Filter>
                                                <ext:DateFilter>
                                                    <DatePickerOptions runat="server" TodayText="Now" />
                                                </ext:DateFilter>
                                            </Filter>
                                        </ext:DateColumn>
    
                                        <ext:Column ID="ColumnDATA_EVENTO_STRING" runat="server" Text="DATA_EVENTO_STRING" DataIndex="DATA_EVENTO_STRING" Width="100" Hidden="false">
                                            <Filter>
                                                <ext:StringFilter />
                                            </Filter>
                                        </ext:Column>
                                    </Columns>
                                </ColumnModel>
                                <Plugins>
                                    <ext:GridFilters ID="GridFiltersEventiLOC" runat="server">
                                    </ext:GridFilters>
                                </Plugins>
                                <BottomBar>
                                    <ext:PagingToolbar ID="PagingToolbar2"
                                        runat="server"
                                        DisplayInfo="true"
                                        DisplayMsg="Numero di record {0} - {1} of {2}">
                                        <Items>
                                        </Items>
                                    </ext:PagingToolbar>
                                </BottomBar>
                            </ext:GridPanel>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="PanelCenterSouth" runat="server" Region="South" Layout="FitLayout" Split="false"
                        Collapsible="false" MarginSpec="0 0 0 0" Border="false" AutoScroll="false" Cls="panel-items-center-south">
                        <Items>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="PanelSouth" runat="server" Region="South" Layout="FitLayout" MarginSpec="0 0 0 0"
                        Cls="panel-items-south" Border="false">
                        <Items>
                            <ext:Image ID="Image2" ImageUrl="~/resources/images/HomePage-BottomBar.jpg" Height="18" runat="server" Margins="0 0 0 0" />
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Viewport>
        </div>
    </body>
    </html>
    Please don't take it bad, it is just a custom many other users in the site have that usually helps us help them in a much faster fashion! :) Your actual effort on making the simple test case was amazing already!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hi Fabricio,
    thank you for your solution and the example.
    It work perfectly for me!!
    Sorry if I have forgotten the master.page in my example!!
    You can mark the thread as closed.

    Stefano
  6. #6
    Hello again, Stefano! Glad the solutions above worked for you!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Ext.Net.DateColumn Format issue
    By lmueller in forum 1.x Help
    Replies: 4
    Last Post: Sep 17, 2018, 4:05 AM
  2. [CLOSED] Grid's DateColumn Format not working in IE8
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 07, 2014, 1:54 PM
  3. Replies: 1
    Last Post: Sep 19, 2013, 2:10 PM
  4. [CLOSED] Date Format in DateColumn Elements
    By ljcorreia in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 28, 2011, 8:12 AM
  5. [CLOSED] DateColumn, Format
    By jeybonnet in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 03, 2010, 1:57 PM

Tags for this Thread

Posting Permissions