GridTemplateColumn Filtering of type DateTime

[Hemika]

Hello, 
I have a need to use filtering functionality for GridTemplateColumn which actually stored a datetime value. When I use the filter features, I get either of those 2 errors.

SCRIPT5022: Sys.WebForms.
PageRequestManagerServerErrorException: The string was not recognized as a valid DateTime. There is a unknown word starting at index 0. 

SCRIPT5022: Sys.WebForms.PageRequestManagerServerErrorException: String was not recognized as a valid DateTime. 

My MarkUp : 

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript" src="/JS/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="/JS/jquery-ui-1.9.2.custom.js"></script>
    <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>
        <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="true" AllowSorting="true"
            OnDeleteCommand="RadGrid1_DeleteCommand" OnInsertCommand="RadGrid1_InsertCommand"
            OnUpdateCommand="RadGrid1_UpdateCommand" OnNeedDataSource="RadGrid1_NeedDataSource"
            OnItemDataBound="RadGrid1_OnItemDataBound" Skin="Office2010Silver" EnableHeaderContextMenu="true"
            EnableHeaderContextFilterMenu="true">
            <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
            <MasterTableView Width="100%" EditMode="InPlace" CommandItemDisplay="Bottom" DataKeyNames="ID, Status, Description"
                HorizontalAlign="NotSet" AutoGenerateColumns="False" NoMasterRecordsText="<%$Resources:Resources, NoItems%>"
                InsertItemDisplay="Bottom" EditItemStyle-VerticalAlign="Top"
                AllowFilteringByColumn="True" IsFilterItemExpanded="false">
                <CommandItemSettings AddNewRecordText="<%$Resources:Resources, NewItem%>"
                    ShowRefreshButton="false" />
                <Columns>
                    <telerik:GridBoundColumn DataField="ID" UniqueName="ID" Visible="false">
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn DataField="DueDateTime" SortExpression="DueDateTime" UniqueName="DueDateTime"
                        ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" GroupByExpression="DueDateTime Group By DueDateTime">
                        <HeaderTemplate>
                            <asp:LinkButton runat="server" CommandArgument="DueDateTime" CommandName="Sort"
                                Text="<%$Resources:Resources, Date%>"></asp:LinkButton>
                            <img src="/Images/funnel-icon.png" style="margin-top: 5px; margin-left: 5px;
                                cursor: pointer" onclick='ShowColumnHeaderMenu(event,"DueDateTime")'
                                alt="Filter" />
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:Label runat="server" ID="lblDate"></asp:Label>
                        </ItemTemplate>
                        <InsertItemTemplate>
                                <telerik:RadDateTimePicker ID="dtpDate" runat="server" Width="195">
                                    <Calendar ID="ddCalendar" runat="server" EnableKeyboardNavigation="true">
                                    </Calendar>
                                    <DateInput ID="ddDate" runat="server" DateFormat="dd/MM/yyyy hh:mm tt">
                                    </DateInput>
                                    <TimeView ID="TimeView1" runat="server" Interval="00:30:00">
                                    </TimeView>
                                </telerik:RadDateTimePicker>
                        </InsertItemTemplate>
                        <EditItemTemplate>
                                <telerik:RadDateTimePicker ID="dtpDate" runat="server"
                                    Width="195">
                                    <Calendar ID="ddCalendar" runat="server" EnableKeyboardNavigation="true">
                                    </Calendar>
                                    <DateInput ID="ddDate" runat="server" DateFormat="dd/MM/yyyy hh:mm tt">
                                    </DateInput>
                                    <TimeView runat="server" Interval="00:30:00">
                                    </TimeView>
                                </telerik:RadDateTimePicker>
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>

*Note : I also added this tag "DataType="System.DateTime" " though its not in the markup.

[Eyup]

Hi Hemika,

Can you please verify that your DataField is of System.DateTime type. Does filtering works as expected when you use this field with a GridDateTimeColumn?

Looking forward to your reply.

Regards,
Eyup
Telerik

[Hemika]

Hi Eyup. 
The data type I am binding is of System.DateTime. I also added the tag, "DataType="System.DateTime". But it didnt do any change.
The filter that I am getting when using GridTemplateColumn is attached. It doesnt have a date time picker to select the date and time.

I also used the GridDateTimeColumn as you said. The filter is coming with RadDateTimePickers. Though the DateTimeFormat on the filter is wrong. It filters to the correct datetime. 

I have to use the GridTemplateColumn because of the header template.

Regards, 
Hemika

[Eyup]

Hello Hemika,

Please note that the GridTemplateColumn does not generate a specific input control for filtering depending on the DataField type. Instead, you need to use FilterTemplate to achieve the requested functionality. Please refer to the ShippedDate column in the following example for an actual implementation:
http://demos.telerik.com/aspnet-ajax/grid/examples/programming/filtertemplate/defaultcs.aspx

Hope this helps.

Regards,
Eyup
Telerik

[Hemika]

Is it possible to show the default the filter(attachment) to the header click? 

[Eyup]

Hi Hemika,

You can place a RadMenu on the page and an ImageButton in the FilterTemplate and using the click event of the button to show the menu:
http://demos.telerik.com/aspnet-ajax/menu/examples/programming/clientsideapi/defaultcs.aspx

Hope this helps.

Regards,
Eyup
Telerik

[Fahad]

Hi,

I want to convert GridTemplateColumn  to GridDateTimeColumn. but i need ItemTemplete in that.

<telerik:GridTemplateColumn  UniqueName="FollowUpDate" HeaderText="Follow-Up Date"
                        DataField="FollowUpDate" SortExpression="FollowUpDate" ItemStyle-HorizontalAlign="Center"
                        DataType="System.DateTime" HeaderStyle-Width="130px" ItemStyle-Width="130px" FooterStyle-Width="130px"
                        FilterControlWidth="70px" FooterText="Tasks:" FilterControlToolTip="MM/DD/YYYY">                       
                        <ItemTemplate>
                            <asp:HyperLink runat="server" ForeColor="#0000FF" ID="hlkFollowUpdate" Text='<%# DisplayDate( Eval( "FollowUpDate" ).ToString() ) %>'
                                NavigateUrl='<%# string.Format("TaskNotes.aspx?LenderID={0}&LoanID={1}&ScreenMode=LoanListing&ID={2}&FollowupDate={3}", Eval("LenderID").ToString().Trim(),Eval("LoanID").ToString().Trim(),Eval("ID").ToString(), Eval("FollowUpDate").ToString() == "" ? "ADD" : "VIEW" ) %>'></asp:HyperLink>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>