[Solved] Grid and Between DateFilter

[Mike]

I have this in an aspx file:

<telerik:RadGrid ID="radFinalMinutes" runat="server" AllowPaging="true" OnNeedDataSource="radFinalMinutes_NeedDataSource" PageSize="20" AllowSorting="true" ShowHeader="true"
                CellSpacing="0" EnableTheming="false" ShowStatusBar="true" EnableHeaderContextMenu="true" BorderStyle="None" OnItemCommand="radFinalMinutes_ItemCommand">
                <PagerStyle Mode="NextPrevAndNumeric" />
                <GroupingSettings CaseSensitive="false" />
                <MasterTableView CommandItemDisplay="Top" AutoGenerateColumns="false" DataKeyNames="MinuteId" AllowSorting="true" AllowMultiColumnSorting="true" AllowFilteringByColumn="true"
                    TableLayout="Auto" GridLines="Vertical">
                    <CommandItemTemplate>
                        <div class="control_heading">
                            <div style="float:left">
                                Finalized Documents <img src="help.png" alt="Help!"  />
                            </div>
                        </div>
                    </CommandItemTemplate>
                    <Columns>
                        <telerik:GridBoundColumn DataField="DivisionDescription" HeaderText="Division" UniqueName="Division" ItemStyle-HorizontalAlign="Left" />
                        <telerik:GridBoundColumn DataField="CategoryDescription" HeaderText="Category" UniqueName="Category" ItemStyle-HorizontalAlign="Left" />
                        <telerik:GridBoundColumn DataField="MeetingDescription" HeaderText="Meeting Type" UniqueName="MeetingType" ItemStyle-HorizontalAlign="Left"  />
                        <telerik:GridBoundColumn DataField="Facilitator" HeaderText="Facilitator" UniqueName="Facilitator" ItemStyle-HorizontalAlign="Left"  />
                        <telerik:GridDateTimeColumn DataField="MeetingDate" DataFormatString="{0:MMM dd, yyyy}" HeaderText="Date" UniqueName="Date" ItemStyle-Wrap="true" ItemStyle-HorizontalAlign="Left"
                             AutoPostBackOnFilter="true" PickerType="DatePicker" EnableRangeFiltering="true" EnableTimeIndependentFiltering="false" CurrentFilterFunction="Between">
                            <FilterTemplate>
                                <table cellpadding="0" cellspacing="0" border="0">
                                    <tr>
                                        <td align="left">From:</td>
                                        <td align="left"><telerik:RadDatePicker ID="radFromDate" runat="server" Width="100px" ClientEvents-OnDateSelected="FromDateSelected"
                                            FocusedDate='<%# this.startDate %>' SelectedDate='<%# this.startDate %>'></telerik:RadDatePicker></td>
                                    </tr>
                                    <tr>
                                        <td align="left">To:</td>
                                        <td align="left"><telerik:RadDatePicker ID="radToDate" runat="server" Width="100px" ClientEvents-OnDateSelected="ToDateSelected"
                                            FocusedDate='<%# this.endDate %>' SelectedDate='<%# this.endDate %>'></telerik:RadDatePicker></td>
                                    </tr>
                                </table>
                                <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                                    <script type="text/javascript">
                                        function FromDateSelected(sender, args) {
                                            var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                            var ToPicker = $find('<%# ((GridItem)Container).FindControl("radToDate").ClientID %>');

                                            var fromDate = FormatSelectedDate(sender);
                                            var toDate = FormatSelectedDate(ToPicker);

                                            tableView.filter("MeetingDate", fromDate + " " + toDate, "Between");
                                        }
                                        function ToDateSelected(sender, args) {
                                            var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                            var FromPicker = $find('<%# ((GridItem)Container).FindControl("radFromDate").ClientID %>');

                                            var fromDate = FormatSelectedDate(FromPicker);
                                            var toDate = FormatSelectedDate(sender);

                                            tableView.filter("MeetingDate", 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>
                        </Columns>
                </MasterTableView>
            </telerik:RadGrid>

And the code behind:

protected DateTime DefaultFromDate { get { return DateTime.Now.AddDays( -60 ).Date; } }
protected DateTime DefaultThruDate { get { return DateTime.Now.AddDays( 30 ); } }
protected DateTime? startDate
{
  set
  {
    ViewState["strD"] = value;
  }
  get
  {
    if ( ViewState["strD"] != null )
      return (DateTime)ViewState["strD"];
    else
      return DefaultFromDate;
  }
}
protected DateTime? endDate
{
  set
  {
    ViewState["endD"] = value;
  }
  get
  {
    if ( ViewState["endD"] != null )
      return (DateTime)ViewState["endD"];
    else
      return DefaultThruDate;
  }
}

  protected void Page_Load( object sender, EventArgs e )
{
  if ( !IsPostBack )
  {
    LoadInfo();
    this.startDate = DefaultFromDate;
    this.endDate = DefaultThruDate;
  }
}

protected void LoadInfo()
{
  //loading data here into variable "list"
  var list = Database.SetupFinalMinutes();
  list.Load();

  radFinalMinutes.DataSource = list.ToList();
}

protected void radFinalMinutes_NeedDataSource( object sender, GridNeedDataSourceEventArgs e )
{
  LoadInfo();
}

protected void radFinalMinutes_ItemCommand( object sender, GridCommandEventArgs e )
{
  if ( e.CommandName == RadGrid.FilterCommandName )
  {
    Pair filterPair = (Pair)e.CommandArgument;

    switch ( filterPair.Second.ToString() )
    {
      case "Date":
        this.startDate = ((e.Item as GridFilteringItem)[filterPair.Second.ToString()].FindControl( "radFromDate" ) as RadDatePicker).SelectedDate;
        this.endDate = ((e.Item as GridFilteringItem)[filterPair.Second.ToString()].FindControl( "radToDate" ) as RadDatePicker).SelectedDate;
        break;
      default:
        break;
    }
  }
}

Now the problem I'm having is the radFinalMinutes_ItemCommand event doesn't fire when I change the dates in my date filter.  Any ideas?  The javascript in the RadScriptBlock1 does fire, and returns the correct dates [and formatting] - but the filtering on the between dates does not happen.  All other columns do fire the ItemCommand.

Edit: should note, I followed http://demos.telerik.com/aspnet-ajax/grid/examples/programming/filtertemplate/defaultcs.aspx

[Martin]

Hello Mike,

Please note that the MasterTableView.filter method requires the column UniqueName as a first parameter. I have reviewed your code and noted that you supply the column DataField instead. Once you change the code as highlighted bellow, your application should run as expected:

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">
        function FromDateSelected(sender, args)
        {
            var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
            var ToPicker = $find('<%# ((GridItem)Container).FindControl("radToDate").ClientID %>');

            var fromDate = FormatSelectedDate(sender);
            var toDate = FormatSelectedDate(ToPicker);

            tableView.filter("Date", fromDate + " " + toDate, "Between");
        }
        function ToDateSelected(sender, args)
        {
            var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
            var FromPicker = $find('<%# ((GridItem)Container).FindControl("radFromDate").ClientID %>');

            var fromDate = FormatSelectedDate(FromPicker);
            var toDate = FormatSelectedDate(sender);

            tableView.filter("Date", fromDate + " " + toDate, "Between");
        }
    </script>
</telerik:RadScriptBlock>

I hope this helps.

Greetings,
Martin
the Telerik team

[Mike]

Thanks for clarifying about the UniqueNames.  Left over artifacts after copying from the demo.

Thanks, everything seems to be working now!