Telerik Forums / UI for ASP.NET AJAX Forum / Grid /

Date range filter column template

Telerik UI for ASP.NET AJAX
Resources Buy Try

14 posts, 1 answers

Jocelyn

148 posts

Member since:
Jul 2012

Posted 30 Nov 2012 Link to this post

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

2733 posts

Member since:
May 2010

Posted 30 Nov 2012 Link to this post

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

148 posts

Member since:
Jul 2012

Posted 07 Dec 2012 Link to this post

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

2733 posts

Member since:
May 2010

Posted 09 Dec 2012 Link to this post

Hello,

Please move all javascript of the Usercontrol to PAGE.

Thanks,
Jayesh Goyani
Jocelyn

148 posts

Member since:
Jul 2012

Posted 12 Dec 2012 Link to this post

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
Admin

3754 posts

Posted 17 Dec 2012 Link to this post

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

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Jocelyn

148 posts

Member since:
Jul 2012

Posted 17 Dec 2012 Link to this post

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

148 posts

Member since:
Jul 2012

Posted 18 Dec 2012 Link to this post

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
Admin

3754 posts

Posted 21 Dec 2012 Link to this post

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

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Jocelyn

148 posts

Member since:
Jul 2012

Posted 07 Jan 2013 Link to this post

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
Answer
Eyup
Admin

3754 posts

Posted 10 Jan 2013 Link to this post

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

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Jocelyn

148 posts

Member since:
Jul 2012

Posted 10 Jan 2013 Link to this post

Hi Eyup,

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

Thanks for your help!
Nuno

1 posts

Member since:
Jan 2013

Posted 14 Nov 2018 in reply to Eyup Link to this post

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
Admin

3754 posts
Posted 19 Nov 2018 Link to this post

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

RadGridFilterDateTimeRangeTwoLinesVB.zip

Date range filter column template

Jocelyn

Jayesh Goyani

Jocelyn

Jayesh Goyani

Jocelyn

Eyup

Jocelyn

Jocelyn

Eyup

Jocelyn

Eyup

Jocelyn

Nuno

Eyup