Basic Filtering Datetime range

12 posts, 2 answers
  1. berto
    berto avatar
    40 posts
    Member since:
    Jul 2012

    Posted 05 Aug 2012 Link to this post

    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?
  2. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 07 Aug 2012 Link to this post

    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
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. berto
    berto avatar
    40 posts
    Member since:
    Jul 2012

    Posted 10 Aug 2012 Link to this post

    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 ?
  5. berto
    berto avatar
    40 posts
    Member since:
    Jul 2012

    Posted 11 Aug 2012 Link to this post

    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?
  6. berto
    berto avatar
    40 posts
    Member since:
    Jul 2012

    Posted 11 Aug 2012 Link to this post

    I just noticed that if I change from RadDateTimePicker to RadDatePicker it works fine. So there is on ly some issue with time 
  7. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 14 Aug 2012 Link to this post

    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
    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.
  8. Answer
    Joan
    Joan avatar
    44 posts
    Member since:
    Dec 2011

    Posted 14 Aug 2012 Link to this post

    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.
  9. berto
    berto avatar
    40 posts
    Member since:
    Jul 2012

    Posted 15 Aug 2012 Link to this post

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

  10. Joan
    Joan avatar
    44 posts
    Member since:
    Dec 2011

    Posted 15 Aug 2012 Link to this post

    I'm not surprised.  My code is in VB, yours is C#, you might want to change the CType to a valid C# cast.
  11. berto
    berto avatar
    40 posts
    Member since:
    Jul 2012

    Posted 15 Aug 2012 Link to this post


        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...
  12. Answer
    Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 15 Aug 2012 Link to this post

    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
    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.
  13. berto
    berto avatar
    40 posts
    Member since:
    Jul 2012

    Posted 15 Aug 2012 Link to this post

    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:   ";
        }
    }  
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017