Date range filter column template

[Jocelyn]

Hi,

I reprduced the filter template for the date range in this demo:

Demo

It works, but I want to put this template in a UserControl because I have over 20 grid that will use this template.

But for some reason, the grid doesn't filter when my JS is inside my user control.

Could you please send me a sample project with an example? I am working with VS 2008 in VB,

Thanks.

[Jayesh Goyani]

Hello,

Please move this JS from Usercontrol to page.

Don't worry Its not an issue, But it is the general behavior of .net.

Note :  When we used UpdatePanel/RadAJaxManager at that time USerControl's JS is not  load in page.

Thanks,
Jayesh Goyani

[Jocelyn]

Hello,

Thanks for you response, but it still don't work.

Here is my code

GridColumn:

<telerik:GridDateTimeColumn AutoPostBackOnFilter="true" FilterControlAltText="Filter colDernierRemp column"
    HeaderText="Dernier remplissage" UniqueName="colDernierRemp" DataField="dateDrRemp" DataType="System.DateTime"
    ShowFilterIcon="false" DataFormatString="{0:yyyy-MM-dd}">
    <FilterTemplate>
        <GESPHARxLite:DateRageFilter runat="server" ID="drfDernierRemp" StartDate='<%# drStartDate %>' EndDate='<%# drEndDate %>' />
        <telerik:RadScriptBlock ID="rsbDernierRemp" runat="server">

            <script type="text/javascript">
                function FromDateSelected(sender, args)
                {
                    var tableView = $find('<%# TryCast(Container,GridItem).OwnerTableView.ClientID %>');
                    var ToPicker = $find('<%# TryCast(Container, GridItem).FindControl("drfDernierRemp").FindControl("rdpTo").ClientID %>');

                    var fromDate = FormatSelectedDate(sender);
                    var toDate = FormatSelectedDate(ToPicker);

                    tableView.filter("colDernierRemp", fromDate + " " + toDate, "Between");
                }
                function ToDateSelected(sender, args)
                {
                    var tableView = $find('<%# TryCast(Container,GridItem).OwnerTableView.ClientID %>');
                    var FromPicker = $find('<%# TryCast(Container, GridItem).FindControl("drfDernierRemp").FindControl("rdpFrom").ClientID %>');

                    var fromDate = FormatSelectedDate(FromPicker);
                    var toDate = FormatSelectedDate(sender);

                    tableView.filter("colDernierRemp", fromDate + " " + toDate, "Between");
                }
                function FormatSelectedDate(picker)
                {
                    var date = picker.get_selectedDate();
                    var dateInput = picker.get_dateInput();
                    var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat());

                    return formattedDate;
                }
            </script>

        </telerik:RadScriptBlock>
    </FilterTemplate>
</telerik:GridDateTimeColumn>

DateRangeFilter.ascx

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="DateRangeFilter.ascx.vb"
    Inherits="GESPHARxLite_2.DateRangeFilter" %>
<%@ Import Namespace="GESPHARxLite_2.GestionMessages" %>
<div>
    <div style="margin: 0px 0px 3px 0px;">
        <div class="alignLeft" style="width: 30px;">
            <%#GetMessageEx(1617).TexteHTML%>
            :
        </div>
        <div class="alignLeft">
            <telerik:RadDatePicker runat="server" ID="rdpFrom" Width="95px" DbSelectedDate='<%# StartDate %>' AutoPostBack="false">
                <ClientEvents OnDateSelected="FromDateSelected" />
            </telerik:RadDatePicker>
        </div>
        <div class="spacer">
        </div>
    </div>
    <div>
        <div class="alignLeft" style="width: 30px;">
            <%#GetMessageEx(1618).TexteHTML%>
            :
        </div>
        <div class="alignLeft">
            <telerik:RadDatePicker runat="server" ID="rdpTo" Width="95px" DbSelectedDate='<%# EndDate %>'>
                <ClientEvents OnDateSelected="ToDateSelected" />
            </telerik:RadDatePicker>
        </div>
        <div class="spacer"></div>
    </div>
</div>

DateRangeFilet.ascx.vb

Public Partial Class DateRangeFilter
    Inherits System.Web.UI.UserControl

    Public Property StartDate() As System.Nullable(Of DateTime)
        Get
            If ViewState("startD") <> Nothing Then
                Return DirectCast(ViewState("startD"), DateTime)
            Else
                Return Nothing
            End If
        End Get
        Set(ByVal value As System.Nullable(Of DateTime))
            ViewState("startD") = value
        End Set
    End Property

    Public Property EndDate() As System.Nullable(Of DateTime)
        Get
            If ViewState("endD") <> Nothing Then
                Return DirectCast(ViewState("endD"), DateTime)
            Else
                Return Nothing
            End If
        End Get
        Set(ByVal value As System.Nullable(Of DateTime))
            ViewState("endD") = value
        End Set
    End Property

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub
End Class

Grid ItemCommand:

Private Sub gridCommuns_ItemCommand(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles gridCommuns.ItemCommand
        If e.CommandName = RadGrid.FilterCommandName Then
            Dim filterPair As Pair = DirectCast(e.CommandArgument, Pair)

            Select Case filterPair.Second.ToString()
                Case "colDernierRemp"
                    Me.drStartDate = (TryCast((TryCast(e.Item, GridFilteringItem))(filterPair.Second.ToString()).FindControl("drfDernierRemp").FindControl("rdpFrom"), RadDatePicker)).SelectedDate
                    Me.drEndDate = (TryCast((TryCast(e.Item, GridFilteringItem))(filterPair.Second.ToString()).FindControl("drfDernierRemp").FindControl("rdpTo"), RadDatePicker)).SelectedDate
                    Exit Select
            End Select
        End If
    End Sub

Public Property drStartDate() As Nullable(Of DateTime)
        Get
            If ViewState("drStartDate") <> Nothing Then
                Return DirectCast(ViewState("drStartDate"), DateTime)
            Else
                Return Nothing
            End If
        End Get
        Set(ByVal value As Nullable(Of DateTime))
            ViewState("drStartDate") = value
        End Set
    End Property

    Public Property drEndDate() As Nullable(Of DateTime)
        Get
            If ViewState("drEndDate") <> Nothing Then
                Return DirectCast(ViewState("drEndDate"), DateTime)
            Else
                Return Nothing
            End If
        End Get
        Set(ByVal value As Nullable(Of DateTime))
            ViewState("drEndDate") = value
        End Set
    End Property

Is there something that I miss?

Thanks.

[Jayesh Goyani]

Hello,

Please move all javascript of the Usercontrol to PAGE.

Thanks,
Jayesh Goyani

[Jocelyn]

Hi,

That's what I did. I put the JS outside the Usercontrol and inside the GridFilterTemplate which is in my PAGE as you can see in my GridColumn. If I move the JS outside the template, it can't cast the "Container" to GridItem. If I must move my JS outside the FilterTemplate, how can I get "ToPicker" and "FromPicker" ?

Thanks.

[Eyup]

Hi Jocelyn,

Since you are using a GridDateTimeColumn, you could simply enable its range filtering to achieve the requested functionality instead of using  a filter template:

<telerik:GridDateTimeColumn ... EnableRangeFiltering="true">

I hope this will prove helpful.

Kind regards,
Eyup
the Telerik team

[Jocelyn]

Hi,

the main reason why I was using a Template, this is because I wanted to have the second DatePicker on a new line. But I guess I will use EnableDateRangeFilter and try to add a "<br />" in code-behind.

Thanks for your help.

Edit: I ended up with this solution:

Private Sub gridCommuns_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles gridCommuns.ItemDataBound
    If TypeOf e.Item Is GridFilteringItem Then
        Dim eItem As GridFilteringItem = DirectCast(e.Item, GridFilteringItem)
        Dim colDate As GridTableCell = eItem("colDernierRemp")

        SetDateRangeMessage(colDate)
    End If
End Sub

        Public Sub SetDateRangeMessage(ByVal col As GridTableCell)
            Dim fromLabel As LiteralControl = DirectCast(col.Controls(0), LiteralControl)
            Dim toLabel As LiteralControl = DirectCast(col.Controls(3), LiteralControl)

            fromLabel.Text = "<div class='alignLeft' style='width: 35px;'>" & GetMessageEx(1617).TexteHTML & ": " & "</div>"
            toLabel.Text = "<div class='spacer'></div><div class='alignLeft' style='width: 35px;'>" & GetMessageEx(1618).TexteHTML & ": " & "</div>"
        End Sub

[Jocelyn]

Hello,

I tired my solution above and I have some bugs that I am unable to find a solution with the property "EnableRangeFilter".

1) If I set a date range like "From: 2012-12-18 To: 2012-12-18" I should get all date that have 2012-12-18 in the date column, but that's not what I get. I guess it check for the Time. If so, how can I ignore Time in the filter.

2) If I filter and after that I clear the two DatePicker and press enter, I want it to clear the filter, but nothing happens.

Thanks.

[Eyup]

Hello Jocelyn,

1. Define the picker type:

<telerik:GridDateTimeColumn ... PickerType="DatePicker">

2. You can use the following approach:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridFilteringItem)
    {
        GridFilteringItem filterItem = e.Item as GridFilteringItem;
        RadDatePicker startPicker = filterItem["OrderDate"].Controls[1] as RadDatePicker;
        RadDatePicker endPicker = filterItem["OrderDate"].Controls[4] as RadDatePicker;

        string arguments = "dateInputKeyPressed(event,'" + startPicker.ClientID + "','" + endPicker.ClientID + "');";
        startPicker.DateInput.Attributes.Add("onkeypress", arguments);
        endPicker.DateInput.Attributes.Add("onkeypress", arguments);
    }
}

JavaScript:

function dateInputKeyPressed(event, startPickerID, endPickerID) {
    if (event.keyCode == 13) {
        if ($find(startPickerID).get_dateInput().get_textBoxValue() == "" &&
            $find(endPickerID).get_dateInput().get_textBoxValue() == "") {
            $find("<%=RadGrid1.ClientID%>").get_masterTableView().filter("OrderDate", "", "NoFilter");
        }
    }
}

I hope this helps. Please give it a try and let me know about the result.

All the best,
Eyup
the Telerik team

[Jocelyn]

Hi Eyup,

Yes it works, but I have a last issue that I can't solve. My column is bound to a field as a Date which contains a time like "#2012-04-21 05:24:32# but I have a "DateFormatString='{0:yyyy-MM-dd}' so it only shows the date without time. If i try to filter "From 2012-04-21 to 2012-04-21" it will not show the row with the date above because I guess it filter like this "From 2012-04-21 00:00:00 to 2012-04-21 00:00:00". How can I ignore the time in the filter?

Thanks.

Jocelyn

[Eyup]

Hello Jocelyn,

Please try enabling the following property:

<telerik:GridDateTimeColumn ... EnableTimeIndependentFiltering="true">

And let me know if it works for you.

Regards,
Eyup
the Telerik team

[Jocelyn]

Hi Eyup,

that's a simple solution. I don't know why I didn't see this property.

Thanks for your help!

[Nuno]

Hi,

I am using the EnableRangeFiltering="true" but, for some strange reasons, I can't see the From: To: labels for either Datepicker. Any idea?

 

Many thanks

 

[Eyup]

Hello Nuno,

This is strange, indeed. I am sending a sample RadGrid web site you can run to verify that they should be displayed as expected. 

Regards,
Eyup
Progress Telerik