Using RadConfirm to confirm item change in RadComboBox

Article information
Article relates to	RadComboBox  2.84 & RadWindowManager 1.94 RadComboBox AJAX & RadWindowManager AJAX (Prometheus) Telerik.Web.UI 2007.3.1425
Created by	Veskoni, Telerik
Last modified	10/03/2008
Last modified by	Veskoni, Telerik

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.



ASPX:

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

Javascript:

<script type="text/javascript">

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>

ASPX:

<rad:RadComboBox ID="RadComboBox1"

runat="server"

Width="150px"

OnClientSelectedIndexChanging="onClientSelectedIndexChanging"

OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">

<Items>

<rad:RadComboBoxItem runat="server" Text="RadComboBoxItem1" />

<rad:RadComboBoxItem runat="server" Text="RadComboBoxItem2" />

<rad:RadComboBoxItem runat="server" Text="RadComboBoxItem3" />

<rad:RadComboBoxItem runat="server" Text="RadComboBoxItem4" />

</Items>

</rad:RadComboBox>

<rad:RadWindowManager ID="RadWindowManager1" runat="server">

</rad:RadWindowManager>

Javascript:

<script type="text/javascript">

var showConfirm = 1;

function onClientSelectedIndexChanging(item)

{

var callBackFn = function (arg)

{

if (arg == true && showConfirm == 1)

{

var combo = item.ComboBox;

combo.ClearSelection();

//prevent entering the same part after calling the Select() method

showConfirm = 0;

//fires server side selected index changed

combo.FindItemByText(item.Text).Select();

combo.SetText(item.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

return false;

}

</script>

Comments

• shafi , Jun 24, 2008

  Are you sure the code works for ASP.NET AJAX? Should the keyword 'function()' be 'Function()' and its parameter 'eventArgs'? The code as is has a compile error and has problem knowing what 'arg' is: Also the keyword 'function' defines a JavaScript function (not what is desired here) but, the keyword 'Function(eventArgs)' creates a new object for the eventArgs! Am I totally of my rockers and reading this totaly wrong? please clearify. Regards Shafi Jourabchi sjourabchi@fetterlogic.com

• Telerik Admin , Jun 26, 2008

  Hi,
  Yes, the code is working fine in ASP.NET AJAX environment. If you still experience problems, please open a support ticket and send us a sample project where we can observe the reported behavior. Just make sure that the project can be run locally and attach it to the ticket - we will check it right away.

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!