How to integrate the RadCalender in the RadComboBox?

[Jessie]

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.

[Simon]

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.

[Princy]

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.

[Jessie]

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.

[Simon]

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.