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.
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
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
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:
DateRangeFilter.ascx
DateRangeFilet.ascx.vb
Grid ItemCommand:
Is there something that I miss?
Thanks.
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
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.
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
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:
I hope this will prove helpful.
Kind regards,
Eyup
the Telerik team
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:
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.
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
Hello Jocelyn,
1. Define the picker type:
2. You can use the following approach:
JavaScript:
I hope this helps. Please give it a try and let me know about the result.
All the best,
Eyup
the Telerik team
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);
}
}
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
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
Hello Jocelyn,
Please try enabling the following property:
And let me know if it works for you.
Regards,
Eyup
the Telerik team
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!
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
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
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.