How to integrate the RadCalender in the RadComboBox?

5 posts, 0 answers
  1. Jessie
    Jessie avatar
    26 posts
    Member since:
    Mar 2009

    Posted 04 Jan 2010 Link to this post

    Hi,

    May I know is there any methods on how to integrate the RadCalender in the RadComboBox (please refer to attach file: dateRangeSelector.jpg)?

    Thanks.
  2. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 04 Jan 2010 Link to this post

    Hello Jessie,

    I think your goal can be more easily achieved by using two separate RadDatePickers. The RadComboBox in this case will be redundant.

    Please see this demo showing a RadDatePicker in action. You could even hide the popup button and implement your layout exactly (in the demo click on 'Example Configuration' and then uncheck the 'show date popup button' check box).

    Sincerely yours,
    Simon
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 04 Jan 2010 Link to this post

    Hello Jessie,

    Here is the example that I tried using DateInput in ItemTemplate of RadComboBox in order to achieve the requirement.

    ASPX:
     
    <telerik:RadComboBox ID="RadComboBox1" runat="server" Width="410" OnClientDropDownClosing="OnClientDropDownClosing"
        <ItemTemplate> 
            <table> 
                <tr> 
                    <td> 
                        <telerik:RadDateInput ID="RadDateInput1" runat="server"
                            <ClientEvents OnValueChanged="OnValueChanged1" /> 
                        </telerik:RadDateInput> 
                    </td> 
                    <td> 
                        <telerik:RadDateInput ID="RadDateInput2" runat="server"
                            <ClientEvents OnValueChanged="OnValueChanged2" /> 
                        </telerik:RadDateInput> 
                    </td> 
                    <td> 
                        <input id="Button1" type="button" value="go" onclick="go();" /> 
                    </td> 
                </tr> 
            </table> 
        </ItemTemplate> 
        <Items> 
            <telerik:RadComboBoxItem Text="" /> 
        </Items> 
    </telerik:RadComboBox> 

    JavaScript:
     
    <script type="text/javascript"
        var check = false
        var dt1; 
        var dt2; 
        function go() { 
            var comboBox = $find("<%= RadComboBox1.ClientID %>"); 
            check = true
            comboBox.hideDropDown(); 
        } 
        function OnClientDropDownClosing(sender, args) { 
            if (!check) { 
                args.set_cancel(true); 
            } 
            if (dt1 != null && dt2 != null) { 
                sender.set_text(dt1 + " - " + dt2); 
            } 
        } 
        function OnValueChanged1(sender, args) { 
     
            dt1 = sender.get_value(); 
        } 
        function OnValueChanged2(sender, args) { 
            dt2 = sender.get_value(); 
        } 
    </script> 

    Thanks,
    Princy.
  4. Jessie
    Jessie avatar
    26 posts
    Member since:
    Mar 2009

    Posted 04 Jan 2010 Link to this post

    Hello Princy & Simon,

    Thanks for replied.

    The functionality that I needed are refer to the Google AdWords (please refer to the attached file).

    I not sure whether this functionality can be implemented using RadComboBox and RadCalender?

    Can anyone give me some guidelines?

    Thanks.
  5. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 05 Jan 2010 Link to this post

    Hi Jessie,

    Thank you for providing the screenshot.

    The control you are referring to is a custom one, built from scratch. RadComboBox does not provide means of achieving the same result (the RCB input itself does not allow anything but text to be placed inside it).

    Sincerely yours,
    Simon
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top