Confirm selection of RadComboBox

Description

How to use a RadConfirm Dialog to prompt the user to confirm before proceeding with a change in a RadCombobox

Solution

Confirmation of RadComboBox selection change can be done in the ClientSelectedIndexChanging event handler. The event should be canceled so that the following confirmation logic can be executed (calling the radconfirm() method). To finalize the process you need to manualy set the properties of the RadComboBox and trigger the SelectedIndexChanged event.

        <telerik:RadComboBox
            ID="RadComboBox1"
            runat="server"
            AutoPostBack="true"
            Width="325px"
            OnClientSelectedIndexChanging="ClientSelectedIndexChanging"
            OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">
            <Items>
                <telerik:RadComboBoxItem Text="Item1" />
                <telerik:RadComboBoxItem Text="Item2" />
                <telerik:RadComboBoxItem Text="Item3" />
            </Items>
        </telerik:RadComboBox>

        <script>
            function ClientSelectedIndexChanging(sender, args) {
                args.set_cancel(true);

                var domEvent = args.get_domEvent();
                var item = args.get_item();

                radconfirm("Are you sure you want to postback?", function (arg) {
                    theCallback(arg, item, domEvent)
                }, 330, 180, null, "Confirm");

            }

            function theCallback(selection, item, domEvent) {
                if (selection) {
                    var combo = item.get_parent();

                    var text = combo.get_text();
                    var lastSeparatorIndex = combo._getLastSeparatorIndex(text);

                    var textToSet = text.substring(0, lastSeparatorIndex + 1) + item.get_text();

                    combo.set_text(textToSet);
                    combo.set_originalText(textToSet);
                    combo.set_value(item.get_value());

                    combo.set_selectedItem(item);
                    combo.set_selectedIndex(item.get_index());

                    item.set_selected(true);
                    item.highlight();

                    combo.raise_selectedIndexChanged(null, domEvent);

                    var command = {
                        Command: "Select",
                        Index: item.get_index()
                    };

                    combo.postback(command);
                }
            }
        </script>