date format

[Valerio Giorgi]

Hi,
the code of a grid with template columns follows:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

        <script type="text/javascript">
            function ShowColumnHeaderMenu(ev, columnName) {
                var grid = $find("<%=RadGrid1.ClientID %>");
                var columns = grid.get_masterTableView().get_columns();

                for (var i=0; i < columns.length; i++)
                {
                    if (columns[i].get_uniqueName() == columnName)
                    {
                        columns[i].showHeaderMenu(ev, 75, 20);
                    }
                }
            }
        </script>

    </telerik:RadCodeBlock>
    <div>
        <telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="True"
            AllowPaging="True" AllowSorting="True" CellSpacing="0"
            Culture="Italian" DataSourceID="SqlDataSource1" GridLines="None"
            PageSize="20" ShowStatusBar="True" Skin="Office2007"
            Width="99%" EnableHeaderContextFilterMenu="True"
            EnableHeaderContextMenu="True" >
            <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"
                enableimagepreloading="True"></HeaderContextMenu>

            <PagerStyle FirstPageToolTip="Pagina iniziale" LastPageToolTip="Ultima pagina"
                NextPagesToolTip="Pagine successive" NextPageToolTip="Pagina successiva"
                PagerTextFormat="Cambia pagina: {4} &nbsp;Pagina <strong>{0}</strong> di <strong>{1}</strong> - Righe da <strong>{2}</strong> a <strong>{3}</strong> - Numero righe totali <strong>{5}</strong>."
                PageSizeLabelText="Numero righe:" PrevPagesToolTip="Pagine precedenti"
                PrevPageToolTip="Pagina precedente" />

            <PagerStyle AlwaysVisible="True" />
            <MasterTableView autogeneratecolumns="False" datakeynames="idContratto" IsFilterItemExpanded="false"
                datasourceid="SqlDataSource1" allowmulticolumnsorting="True">

<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>

                <Columns>
                    <telerik:GridBoundColumn DataField="idContratto" DataType="System.Int64"
                        Display="False" FilterControlAltText="Filtra per idContratto"
                        HeaderText="idContratto" ReadOnly="True" SortExpression="idContratto"
                        UniqueName="idContratto" Visible="False">
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn DataField="Cliente" SortExpression="Cliente"
                        UniqueName="Cliente" Groupable="False">
                        <HeaderTemplate>
                            <table>
                                <tr>
                                    <td>
                                        <asp:LinkButton ID="LinkButton_Cliente" runat="server" CommandArgument="Cliente" CommandName="Sort" Text="Cliente"></asp:LinkButton>
                                    </td>
                                    <td>
                                        <img src="img/menu.gif" style="margin-top: 5px; margin-left: 5px; cursor: pointer" onclick='ShowColumnHeaderMenu(event,"Cliente")' alt="Apri menu" />
                                    </td>
                                </tr>
                            </table>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:Label ID="lblCliente" runat="server" Text='<%#Eval("Cliente") %>'></asp:Label>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn DataField="Contratto" SortExpression="Contratto"
                        UniqueName="Contratto" Groupable="False">
                        <HeaderTemplate>
                            <table>
                                <tr>
                                    <td>
                                        <asp:LinkButton ID="LinkButton_Contratto" runat="server" CommandArgument="Contratto" CommandName="Sort" Text="Contratto"></asp:LinkButton>
                                    </td>
                                    <td>
                                        <img src="img/menu.gif" style="margin-top: 5px; margin-left: 5px; cursor: pointer" onclick='ShowColumnHeaderMenu(event,"Contratto")' alt="Apri menu" />
                                    </td>
                                </tr>
                            </table>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:Label ID="lblContratto" runat="server" Text='<%#Eval("Contratto") %>'></asp:Label>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn DataField="DataContratto"
                        DataType="System.DateTime" SortExpression="DataContratto"
                        UniqueName="Data Contratto" Groupable="False">
                        <HeaderTemplate>
                            <table>
                                <tr>
                                    <td>
                                        <asp:LinkButton ID="LinkButton_DataContratto" runat="server" CommandArgument="DataContratto" CommandName="Sort" Text="Data Contratto"></asp:LinkButton>
                                    </td>
                                    <td>
                                        <img src="img/menu.gif" style="margin-top: 5px; margin-left: 5px; cursor: pointer" onclick='ShowColumnHeaderMenu(event,"DataContratto")' alt="Apri menu" />
                                    </td>
                                </tr>
                            </table>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:Label ID="lblDataContratto" runat="server" Text='<%#Eval("DataContratto") %>'></asp:Label>
                        </ItemTemplate>
                        <ItemStyle HorizontalAlign="Center" />
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn DataField="StatoContratto"
                        SortExpression="StatoContratto" UniqueName="Stato Contratto" Groupable="False">
                        <HeaderTemplate>
                            <table>
                                <tr>
                                    <td>
                                        <asp:LinkButton ID="lnkSort" runat="server" CommandArgument="StatoContratto" CommandName="Sort" Text="Stato Contratto"></asp:LinkButton>
                                    </td>
                                    <td>
                                        <img src="img/menu.gif" style="margin-top: 5px; margin-left: 5px; cursor: pointer" onclick='ShowColumnHeaderMenu(event,"StatoContratto")' alt="Apri menu" />
                                    </td>
                                </tr>
                            </table>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:Label ID="lblStatoContratto" runat="server" Text='<%#Eval("StatoContratto") %>'></asp:Label>
                        </ItemTemplate>
                        <ItemStyle HorizontalAlign="Center" />
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn DataField="BC" SortExpression="BC"
                        UniqueName="Business Consultant" Groupable="False">
                        <HeaderTemplate>
                            <table>
                                <tr>
                                    <td>
                                        <asp:LinkButton ID="LinkButton_BC" runat="server" CommandArgument="BC" CommandName="Sort" Text="Business Consultant"></asp:LinkButton>
                                    </td>
                                    <td>
                                        <img src="img/menu.gif" style="margin-top: 5px; margin-left: 5px; cursor: pointer" onclick='ShowColumnHeaderMenu(event,"BC")' alt="Apri menu" />
                                    </td>
                                </tr>
                            </table>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:Label ID="lblBC" runat="server" Text='<%#Eval("BC") %>'></asp:Label>
                        </ItemTemplate>
                        <ItemStyle HorizontalAlign="Center" />
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn DataField="PM" SortExpression="PM"
                        UniqueName="Project Manager" Groupable="False">
                        <HeaderTemplate>
                            <table>
                                <tr>
                                    <td>
                                        <asp:LinkButton ID="LinkButton_PM" runat="server" CommandArgument="PM" CommandName="Sort" Text="Project Manager"></asp:LinkButton>
                                    </td>
                                    <td>
                                        <img src="img/menu.gif" style="margin-top: 5px; margin-left: 5px; cursor: pointer" onclick='ShowColumnHeaderMenu(event,"PM")' alt="Apri menu" />
                                    </td>
                                </tr>
                            </table>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:Label ID="lblPM" runat="server" Text='<%#Eval("PM") %>'></asp:Label>
                        </ItemTemplate>
                        <ItemStyle HorizontalAlign="Center" />
                    </telerik:GridTemplateColumn>
                </Columns>

<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
</EditFormSettings>

            </MasterTableView>

            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />

            <clientsettings allowcolumnsreorder="True" reordercolumnsonclient="True">
                <selecting allowrowselect="True" />
                <scrolling allowscroll="True" usestaticheaders="True" />
            </clientsettings>

            <FilterMenu EnableImageSprites="False"></FilterMenu>
                <sortingsettings sortedasctooltip="Ordinamento crescente"
                    sorteddesctooltip="Ordinamento decrescente" sorttooltip="Clicca per ordinare" />
        </telerik:RadGrid>

I have two problem:
1) One of the columns is a date. How can I set the its format in dd/MM/yyyy?
2) How can I set EnableVirtualScrollingPaging to "True"? I tried to type such property but nothing happened

Please help me

Thanks

[Princy]

Hello Valerio,

Straight to your questions.

1.RadGrid supports in built DateTime column.When in browser mode, GridDateTimeColumn looks and behaves like a standard GridBoundColumn. When in edit mode, however, it displays a RadDateInput, RadDatePicker, RadTimePicker, or RadDateTimePicker control depends on the picker type. One suggestion is to use GridDateTimeColumn. There you can set the DataFormatString accordingly.
aspx:

<telerik:GridDateTimeColumn SortExpression="TimeKlar_Neu" DataType="System.DateTime" PickerType="DatePicker" ItemStyle-Width="100" HeaderStyle-Width="100" EditDataFormatString="dd/mm/yyyy"  HeaderText="DateTimeCol"  DataFormatString="{0:dd/mm/yyyy}"  DataField="BirthDate" UniqueName="DateTimeCol">
</telerik:GridDateTimeColumn>

Also take a look at the following documentation.
Column types.

2.Virtual scrolling for RadGrid can be attained by ajaxifying the control via RadAjaxManager or RadAjaxPanel. Virtual scrolling/paging functionality allows you to change the grid pages just like in Microsoft Word.
Take a look at the following  documentation and demo for more on this.
Virtual scrolling/paging
Virtual scrolling and paging:

Thanks,
Princy.

[Valerio Giorgi]

1) I set every column as a "GridTemplateColumn" in order to implement a menu for each one. How can I modify che code of the datetime column in order to customize the format of the date, but maintaing the header menu?

2) Is it the code of the grid I implemented in line with the implementation of the virtual scrolling and paging or the code must be modified?

[Veli]

Hi Valerio,

1. To format the date value in the ItemTemplate of your date column, you can use a binding expression of the form:

<%# DateTime.Parse(Eval("DataContratto").ToString()).ToString("[format}") %>

Alternatively, you can use RadGrid's ItemDataBound event to retrieve the cell text containing your original date value and modify it:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if(e.Item is GridDataItem)
    {
        GridDataItem dataItem = (GridDataItem)e.Item;
        string dateStr = dataItem["Data Contratto"].Text;
        //format your dateStr here
        dataItem["Data Contratto"].Text = dateStr; //set the formatted date value back
    }
}

2. To use VirtualScrollPaging you may refer to the RadGrid virtual scroll paging demo that Princy also referred you to. Let us know what particular difficulties  you have with that setup.

Veli
the Telerik team

[Valerio Giorgi]

If I convert the dates in strings, then the date ordering doesn't work. Is it right?

I'll try to implement the VirtualScrollPaging and then I'll inform you...

Thank you so much

[Valerio Giorgi]

What I need is a Grid with the following features:

• Menu for each Header, that allow user to order columns and use filters
• Virtual scroll paging
• A column must be in datetime format (not as a string, otherwise the ordering by date doesn't work)

Is there a unique demo that help me to implement such grid?

Thanks

[Veli]

If you format the cell text in RadGrid's data items, the original data value is not changed and you still get DateTime sorting if your database field is of type DateTime. You are only changing the text in the table cell, not the actual data value the item has bound to.

As for your requirements, we do not have a demo specific to your particular scenario, but we have a demo with RadGrid's header context menu and another one on the sorting features in RadGrid.

Veli
the Telerik team