Basic Filtering Datetime range

[berto]

I did the same as on demo example. But I have no more place in header to display all filters. How I can put Date ranges one below the other?

[Eyup]

Hi Berto,

Could you please try to use </br> and let me know about the result?

I have attached a sample RadGrid web site with a filter template for a GridDateTime column to demonstrate that the suggested approach works as expected. Please check out the attached application and try to make best avail out of it.

Regards,
Eyup
the Telerik team

[berto]

I am using following code:

<telerik:GridDateTimeColumn FilterControlWidth="150px" DataField="Datum" HeaderText="Datum"
        SortExpression="Datum" UniqueName="Datum" PickerType="DateTimePicker"
        EnableRangeFiltering="true">
        <HeaderStyle Width="390px" />
    </telerik:GridDateTimeColumn>

How can I add there br ?

[berto]

I tried your solution but filtering does not work. 

<telerik:GridBoundColumn UniqueName="Datum" DataField="Datum" HeaderText="Datum">
            <FilterTemplate>
                Von:
                <telerik:RadDateTimePicker ID="FromOrderDatePicker" runat="server"
                ClientEvents-OnDateSelected="FromDateSelected"
                Width="150px" DbSelectedDate='<%# startDate %>'/>
                <br />
                Bis:
                <telerik:RadDateTimePicker ID="ToOrderDatePicker" runat="server" Width="150px"
                    ClientEvents-OnDateSelected="ToDateSelected" DbSelectedDate='<%# endDate %>'/>
                <telerik:RadScriptBlock ID="rsb_Datum" runat="server">
                    <script type="text/javascript">
                        function FromDateSelected(sender, args) {
                            var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                            var ToPicker = $find('<%# ((GridItem)Container).FindControl("ToOrderDatePicker").ClientID %>');

                            if (ToPicker.get_selectedDate() == null || sender.get_selectedDate() == null) {
                                return;
                            }
                            var difference = ToPicker.get_selectedDate() - sender.get_selectedDate();

                            if (difference < 0) {
                                alert("Startdate can not be greater than end date");
                                sender.set_selectedDate(args.get_oldDate());
                                return;
                            }
                            else if ((difference / (1000 * 60 * 60 * 24)) > 360) {
                                alert("Startdate and EndDate should be within 360 days");
                                sender.clear();
                                ToPicker.clear();
                                return;
                            }

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

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

                            if (sender.get_selectedDate() == null || FromPicker.get_selectedDate() == null) {
                                return;
                            }
                            var difference = sender.get_selectedDate() - FromPicker.get_selectedDate();

                            if (difference < 0) {
                                alert("Startdate can not be greater than end date");
                                sender.set_selectedDate(args.get_oldDate());
                                return;
                            }
                            else if ((difference / (1000 * 60 * 60 * 24)) > 360) {
                                alert("Startdate and EndDate should be within 360 days");
                                sender.clear();
                                FromPicker.clear();
                                return;
                            }

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

                            tableView.filter("Datum", 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:GridBoundColumn>

CS

protected DateTime? startDate
  {
      set
      {
          ViewState["strD"] = value;
      }
      get
      {
          if (ViewState["strD"] != null)
              return (DateTime)ViewState["strD"];
          else
              return new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day);
      }
  }
  protected DateTime? endDate
  {
      set
      {
          ViewState["endD"] = value;
      }
      get
      {
          if (ViewState["endD"] != null)
              return (DateTime)ViewState["endD"];
          else
              return new  DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day);
      }
  }

  protected void rgLLeistungen_ItemCommand(object sender, GridCommandEventArgs e)
  {
      if (e.CommandName == RadGrid.FilterCommandName)
      {
          Pair filterPair = (Pair)e.CommandArgument;
          if (filterPair.Second.ToString() == "Datum")
          {
              this.startDate = ((e.Item as GridFilteringItem)[filterPair.Second.ToString()].FindControl("FromOrderDatePicker") as RadDateTimePicker).SelectedDate;
              this.endDate = ((e.Item as GridFilteringItem)[filterPair.Second.ToString()].FindControl("ToOrderDatePicker") as RadDateTimePicker).SelectedDate;
          }
      }
  }

Any idea what can be wrong in above code or how I can add line break to firast one?

[berto]

I just noticed that if I change from RadDateTimePicker to RadDatePicker it works fine. So there is on ly some issue with time 

[Eyup]

Hi Berto,

I am sorry I missed to say that in my first reply, but you could also achieve this appearance with the first approach:
  mark-up:

<telerik:GridDateTimeColumn FilterControlWidth="150px" DataField="Datum" HeaderText="Datum"
      SortExpression="Datum" UniqueName="Datum" PickerType="DateTimePicker" EnableRangeFiltering="true">
      <HeaderStyle Width="390px"  />
  </telerik:GridDateTimeColumn>

  C#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridFilteringItem)
    {
        GridFilteringItem filterItem = e.Item as GridFilteringItem;
        Label brLabel = new Label();
        brLabel.Text = "<br/>";
        filterItem["Datum"].Controls.AddAt(2, brLabel);
    }
}

I hope this will prove helpful.

I have already replied in your support ticket, but I repeat the suggested solution here too so that others with similar issues could make avail.

If you have different requirements or further instructions, could you please provide us some screenshots of the desired appearance in your support ticket?

Sorry once again for misleading you, but the provided suggestion in my first post should work too.

Greetings,
Eyup
the Telerik team

[Joan]

Adding the <br /> label causes a viewstate control tree error. 
But this:
CType(filterItem("invoiced_date").Controls(3), LiteralControl).Text = "<br />To: "
solves the problem.

[berto]

How I can add this to the code ?
I tried following:

protected void rgLLeistungen_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridFilteringItem)
    {
        GridFilteringItem filterItem = e.Item as GridFilteringItem;
        CType(filterItem("Datum").Controls(3), LiteralControl).Text = "<br />    To: ";
    }
}

But I got 3 errors ....

[Joan]

I'm not surprised.  My code is in VB, yours is C#, you might want to change the CType to a valid C# cast.

[berto]

    protected void rgLLeistungen_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridFilteringItem)
    {
        GridFilteringItem filterItem = e.Item as GridFilteringItem;
        (LiteralControl)(filterItem("Datum").Controls(3)).Text = "<br />To:    ";
    }
}

I got now error that variable filterItem  is used as method...

[Eyup]

Hi Andrzej,

Please try the following:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridFilteringItem)
    {
        GridFilteringItem filterItem = e.Item as GridFilteringItem;
        (filterItem["Datum"].Controls[3] as LiteralControl).Text = "<br />To: ";
    }
}

I have also included a sample web site application in your support ticket about the same issue.

Joan, thank you for your valuable feedback.

Regards,
Eyup
the Telerik team

[berto]

It works ! Thanks a lot for help...

Just small tip if you want to change From to different language you can use following:

protected void rgLLeistungen_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridFilteringItem)
    {
        GridFilteringItem filterItem = e.Item as GridFilteringItem;
        (filterItem["Datum"].Controls[0] as LiteralControl).Text = "Von: ";
        (filterItem["Datum"].Controls[3] as LiteralControl).Text = "<br />Bis:   ";
    }
}