Date range filter column template

14 posts, 1 answers
  1. Jocelyn
    Jocelyn avatar
    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.
  2. Jayesh Goyani
    Jayesh Goyani avatar
    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
  3. Jocelyn
    Jocelyn avatar
    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.
  4. Jayesh Goyani
    Jayesh Goyani avatar
    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
  5. Jocelyn
    Jocelyn avatar
    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.
  6. Eyup
    Admin
    Eyup avatar
    3644 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.
  7. Jocelyn
    Jocelyn avatar
    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
  8. Jocelyn
    Jocelyn avatar
    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.
  9. Eyup
    Admin
    Eyup avatar
    3644 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.
  10. Jocelyn
    Jocelyn avatar
    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
  11. Answer
    Eyup
    Admin
    Eyup avatar
    3644 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.
  12. Jocelyn
    Jocelyn avatar
    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!
  13. Nuno
    Nuno avatar
    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

     

  14. Eyup
    Admin
    Eyup avatar
    3644 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.
Back to Top