This is a migrated thread and some comments may be shown as answers.

Date range grid filtering

1 Answer 167 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Jocelyn asked on 28 Nov 2012, 07:59 PM

Hi,

I copied the code in this demo: Demo Filter for the Date Range filter template. It works great, but I have over 20 grid in my application that will use this template so I created a UserControl containing the asp code, but it never filter the grid... I know that it call the "tableView.filter" function but nothing happen on the client.

My grid:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Intolerances.aspx.vb"

Inherits="GESPHARxLite_2.Intolerances" %>

<%@ Import Namespace="GESPHARxLite_2.GestionMessages" %>

<%@ Register TagPrefix="GESPHARxLite_2" TagName="DateRangeFilter" Src="~/DateRangeFilter.ascx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" IE=edge>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />

<title></title>

<link href="css/GESPHARxLite.css" rel="stylesheet" type="text/css" />

<style type="text/css">

html, body, form

{

height: 100%;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">

</asp:ScriptReference>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">

</asp:ScriptReference>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">

</asp:ScriptReference>

<asp:ScriptReference Path="Scripts/UtilsCGSI.js" />

<asp:ScriptReference Path="Scripts/Resizer.js" />

<asp:ScriptReference Path="Scripts/AutoEditValidation.js" />

</Scripts>

</telerik:RadScriptManager>

<telerik:RadFormDecorator EnableRoundedCorners="false" ID="RadFormDecorator1" DecoratedControls="All"

runat="server" />

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" ClientEvents-OnResponseEnd="OnResponseEnd">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="gridIntolerances">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="gridIntolerances" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div id="lediv">

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">

</telerik:RadAjaxLoadingPanel>

<telerik:RadGrid ID="gridIntolerances" runat="server" CellSpacing="0">

<MasterTableView CommandItemDisplay="Top">

<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">

</RowIndicatorColumn>

<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">

</ExpandCollapseColumn>

<Columns>

<telerik:GridEditCommandColumn FilterControlAltText="Filter EditCommandColumn column"

ButtonType="ImageButton" Resizable="False" EditImageUrl="Images/Icons/006-Write-New-Icon.png"

UniqueName="colEdit">

<HeaderStyle Width="32px"></HeaderStyle>

</telerik:GridEditCommandColumn>

<telerik:GridButtonColumn CommandName="Delete" ConfirmText="Êtez-vous sûr de vouloir supprimer?"

FilterControlAltText="Filter column column" Text="Supprimer" UniqueName="colDelete"

ButtonType="ImageButton" ImageUrl="Images/Icons/059-Close-Delete-circle-Icon.png"

ConfirmDialogType="RadWindow">

<HeaderStyle Width="32px"></HeaderStyle>

</telerik:GridButtonColumn>

<telerik:GridBoundColumn AutoPostBackOnFilter="true" DataField="pint_noauto" FilterControlAltText="Filter column1 column"

UniqueName="colNoAuto" Visible="False" ReadOnly="True">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn AutoPostBackOnFilter="true" DataField="allergie" FilterControlAltText="Filter column2 column"

UniqueName="colAllergie" CurrentFilterFunction="StartsWith" ShowFilterIcon="false"

ReadOnly="True">

</telerik:GridBoundColumn>

<telerik:GridCheckBoxColumn DataField="isGroupe" DataType="System.Boolean" FilterControlAltText="Filter column column"

ReadOnly="True" UniqueName="colIsGroupe" ShowFilterIcon="false" AllowFiltering="False">

<ItemStyle HorizontalAlign="Center" />

<HeaderStyle HorizontalAlign="Center" Width="64px" />

</telerik:GridCheckBoxColumn>

<telerik:GridDateTimeColumn AutoPostBackOnFilter="true" DataField="Date" FilterControlAltText="Filter column3 column"

UniqueName="colDate" DataType="System.DateTime">

<FilterTemplate>

<GESPHARxLite_2:DateRangeFilter runat="server" ID="drfDate" StartDate='<%# startDate %>' EndDate='<%# endDate %>' />

</FilterTemplate>

<HeaderStyle Width="140px" />

</telerik:GridDateTimeColumn>

<telerik:GridDropDownColumn FilterControlAltText="Filter column8 column" UniqueName="colGenerique"

ListValueField="gene_numero" ListTextField="gene_nom" ShowFilterIcon="False"

Visible="False" DropDownControlType="RadComboBox" DataField="gene_numero">

</telerik:GridDropDownColumn>

<telerik:GridDropDownColumn FilterControlAltText="Filter column7 column" UniqueName="colGroupeDesc"

ListValueField="gral_numero" ListTextField="gral_description" ShowFilterIcon="False"

Visible="False" DropDownControlType="RadComboBox" DataField="gral_numero">

</telerik:GridDropDownColumn>

<telerik:GridBoundColumn AutoPostBackOnFilter="true" DataField="pint_texte_1" FilterControlAltText="Filter column4 column"

UniqueName="colTexte1" CurrentFilterFunction="StartsWith" ShowFilterIcon="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn AutoPostBackOnFilter="true" DataField="pint_texte_2" FilterControlAltText="Filter column5 column"

UniqueName="colTexte2" CurrentFilterFunction="StartsWith" ShowFilterIcon="false">

</telerik:GridBoundColumn>

<telerik:GridCheckBoxColumn DataField="isImprime" FilterControlAltText="Filter colImprimer column"

UniqueName="colImprimer" Visible="False">

</telerik:GridCheckBoxColumn>

</Columns>

<SortExpressions>

<telerik:GridSortExpression FieldName="allergie" SortOrder="Ascending" />

</SortExpressions>

<EditFormSettings>

<EditColumn ButtonType="PushButton" FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

</EditFormSettings>

</MasterTableView>

<FilterMenu EnableImageSprites="False">

</FilterMenu>

<EditItemStyle BackColor="Silver" />

</telerik:RadGrid>

</div>

<telerik:RadWindowManager runat="server" ID="rwm" Modal="true" VisibleOnPageLoad="true"

VisibleStatusbar="false" IconUrl="Images/favicon.ico" MaxWidth="330px" MaxHeight="100px"

Title="GESPHARxLite">

</telerik:RadWindowManager>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

<!--

function GenSelectionChanged(sender, eventArgs)

{

var cbo = $find(GetServerElement("RCB_colGroupeDesc", "div").id);

clearGrpOrGenSelection(cbo);

}

function GrpSelectionChanged(sender, eventArgs)

{

var cbo = $find(GetServerElement("RCB_colGenerique", "div").id);

clearGrpOrGenSelection(cbo);

}

function Resize()

{

var grid = $find("<%= gridIntolerances.ClientID %>");

ResizeRadControl(grid, 2);

}

-->

</script>

</telerik:RadCodeBlock>

</form>

</body>

</html>

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 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>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript">

function FromDateSelected(sender, args)

{

var tableView = $find("<%# TryCast(NamingContainer,GridItem).OwnerTableView.ClientID %>");

var ToPicker = $find('<%# rdpTo.ClientID %>');

var fromDate = FormatSelectedDate(sender);

var toDate = FormatSelectedDate(ToPicker);

tableView.filter("colDate", fromDate + " " + toDate, Telerik.Web.UI.GridFilterFunction.Between);

console.debug(fromDate + " " + toDate);

}

function ToDateSelected(sender, args)

{

var tableView = $find("<%# TryCast(NamingContainer,GridItem).OwnerTableView.ClientID %>");

var FromPicker = $find('<%# rdpFrom.ClientID %>');

var fromDate = FormatSelectedDate(FromPicker);

var toDate = FormatSelectedDate(sender);

tableView.filter("colDate", fromDate + " " + toDate, Telerik.Web.UI.GridFilterFunction.Between);

console.debug(fromDate + " " + toDate);

}

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>

DateRangeFilter.ascx.vb

Public Partial Class DateRangeFilter

Inherits System.Web.UI.UserControl

Private _startDate As System.Nullable(Of DateTime)

Private _endDate As System.Nullable(Of DateTime)

Public Property StartDate() As System.Nullable(Of DateTime)

Get

Return ViewState("startD")

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

Private Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender

rdpFrom.SelectedDate = StartDate

rdpTo.SelectedDate = EndDate

End Sub

End Class

ItemCommand event:

Protected Sub gridIntolerances_ItemCommand(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles gridIntolerances.ItemCommand

If e.CommandName = RadGrid.FilterCommandName Then

Dim eItem As GridFilteringItem = e.Item

Dim ctrl As DateRangeFilter = eItem("colDate").FindControl("drfDate")

Dim rdpFrom As RadDatePicker = ctrl.FindControl("rdpFrom")

Dim rdpTo As RadDatePicker = ctrl.FindControl("rdpTo")

startDate = rdpFrom.SelectedDate

endDate = rdpTo.SelectedDate

End If

End Sub

Did I miss something ?

Thanks.

1 Answer, 1 is accepted

answered on 03 Dec 2012, 10:52 AM

FilteringWithUserControl.rar

Hi Jocelyn,

Have you inspected the values that you use for filtering? Have they been set properly? Based on the provided information it is hard to say what went wrong in your case because we can not run the code. Additionally I have attached a sample project with a WebUserControl in a FilterTemplate. Please review it and tell us differs in your case.

Regards,
Angel Petrov
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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Date range grid filtering

1 Answer, 1 is accepted