Using RadConfirm to confirm item change in RadComboBox
Environment
| Product | RadComboBox for ASP.NET AJAX |
HOW-TO
Use RadConfirm to confirm item change in RadComboBox. The example will fire the server side "SelectedIndexChanged" event also.
SOLUTION
Hook on the OnClientSelectedIndexChanging event of the ComboBox and invoke the radconfirm. Since radconfirm is a non-blocking control we cancel the OnClientSelectedIndexChanging event. Then in the callback function of the radconfirm we select the item if the user has clicked on the OK button.
<telerik:RadComboBox ID="RadComboBox1"
runat="server"
OnClientSelectedIndexChanging="onClientSelectedIndexChanging"
OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">
<Items>
<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem1" />
<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem2" />
<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem3" />
<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem4" />
</Items>
</telerik:RadComboBox>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server">
</telerik:RadWindowManager>
<script>
var showConfirm = 1;
function onClientSelectedIndexChanging(combo, eventArgs)
{
var callBackFn = function (arg)
{
if (arg == true && showConfirm == 1)
{
combo.clearSelection();
var item = eventArgs.get_item();
//prevent entering the same part after calling the select() method
showConfirm = 0;
combo.findItemByText(item.get_text()).select();
combo.set_text(item.get_text());
//fire the server-side SelectedIndexChanged event
__doPostBack("RadComboBox1" , '{\"Command\":\"Select\"}');
//now we can show the confirm again
showConfirm = 1;
}
}
if (showConfirm == 1)
{
radconfirm('Are you sure you want to change the item?', callBackFn);
}
//do not change the combo item until clicked on OK button of radconfirm
eventArgs.set_cancel(true);
}
</script>