Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.
Date range filter column template
13 Answers 133 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jocelyn
Top achievements
Rank 1
Jocelyn asked on 30 Nov 2012, 01:25 PM
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.

13 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 01 Dec 2012, 04:35 AM
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
0
Jocelyn
Top achievements
Rank 1
answered on 07 Dec 2012, 04:05 PM
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.
0
Jayesh Goyani
Top achievements
Rank 2
answered on 10 Dec 2012, 04:29 AM
Hello,

Please move all javascript of the Usercontrol to PAGE.

Thanks,
Jayesh Goyani
0
Jocelyn
Top achievements
Rank 1
answered on 12 Dec 2012, 01:56 PM
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.
0
Eyup
Telerik team
answered on 17 Dec 2012, 07:51 AM
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.
0
Jocelyn
Top achievements
Rank 1
answered on 17 Dec 2012, 02:24 PM
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
0
Jocelyn
Top achievements
Rank 1
answered on 18 Dec 2012, 03:22 PM
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.
0
Eyup
Telerik team
answered on 21 Dec 2012, 11:40 AM
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.
0
Jocelyn
Top achievements
Rank 1
answered on 07 Jan 2013, 02:56 PM
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
0
Accepted
Eyup
Telerik team
answered on 10 Jan 2013, 08:01 AM
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.
0
Jocelyn
Top achievements
Rank 1
answered on 10 Jan 2013, 01:33 PM
Hi Eyup,

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

Thanks for your help!
0
Nuno
Top achievements
Rank 1
answered on 14 Nov 2018, 03:14 PM

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

 

0
Eyup
Telerik team
answered on 19 Nov 2018, 02:33 PM
RadGridFilterDateTimeRangeTwoLinesVB.zip
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.
Tags
Grid
Asked by
Jocelyn
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Jocelyn
Top achievements
Rank 1
Eyup
Telerik team
Nuno
Top achievements
Rank 1
Share this question
or