How to assign onfocusout JS handler to RadComboBox's list items?

[Matthew]

I have the following tag which includes a handler for onfocusout.  The handler is executed when the user clicks away from the control when the down arrow button or the text area has focus but doesn't execute when the user has selected an item (or item check box) in the item list and then navigates away from the RadComboBox control.  How is it possible to have checkNeedToSaveOpportunity(event) executed if the user focuses on a list item and then navigates to some other part of the page?

<telerik:RadComboBox RenderMode="Lightweight" ID="cmbReportTool" filter="Contains" runat="server"
EmptyMessage="Select" oWrap="false"
onfocusout="checkNeedToSaveOpportunity(event)"
OnClientItemChecking="OnCMBClientItemChecking"
class="cmb-report-tool"
CheckBoxes="true"
width="100%">
</telerik:RadComboBox>

[Marin Bratanov]

Hello Matthew,

The OnClientBlur event fires when the control loses focus: https://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/client-side-programming/events/onclientblur

Perhaps the following article that shows how to re-focus the combo if there is no selection will also be helpful for you: https://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/how-to/ensure-the-selection-of-existing-items-with-allowcustomtext-.

Generally, to know when the user has chosen an option there are events exposed by the control and they guarantee the user did choose something, as opposed to OnClientBlur that only tells you that focus was lost:

• for regular items: https://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/client-side-programming/events/onclientselectedindexchanged
• for checkboxes: https://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/client-side-programming/events/onclientitemchecked and https://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/client-side-programming/events/onclientcheckallchecked

 

Regards,
Marin Bratanov
Progress Telerik

[Matthew]

Thank you Marin.  Good information but it doesn't lead to a solution to my problem.  I'm already using OnClientItemChecking client-side event to set a 'dirty' flag that indicates that the user has selected an item in the list.  The user can select multiple items so setting the flag to TRUE multiple times does no harm.  If the user navigates away from the RadComboBox code needs to check the flag and if it's TRUE then a 'save data' confirmation dialog box needs to be presented to the user and only if she clicks 'OK' then the changed data needs to be saved to the DB.  I implemented a JavaScript function for the onClientBlur event but it isn't firing when the user checks a check box in the drop down list and then clicks on some other part of the web page.  The event fires when focus is in the controls text entry field or the down arrow button.  Any other ideas that you have is greatyly appreciated.  Here is the updated code that I'm using:

<telerik:RadComboBox RenderMode="Lightweight" ID="cmbReportTool" filter="Contains" runat="server"
EmptyMessage="Select" oWrap="false"
onfocusout="checkNeedToSaveOpportunity(event)"
OnClientItemChecking="OnCMBClientItemChecking"
onclientblur="OnClientBlur"
class="cmb-report-tool"
CheckBoxes="true"
width="100%">
</telerik:RadComboBox>

 

<telerik:RadCodeBlock ID="UtilizationSliderRadCodeBlock" runat="server">
<script>

function OnClientBlur(sender, args) {
    alert("blur");
}
</script>
</telerik:RadCodeBlock>

 

[Marin Bratanov]

Hello Matthew,

If the current events are not sufficient for you, I suggest you add a click (or mousedown) handler to the document in the OnClientDropDownOpened event: .https://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/client-side-programming/events/onclientdropdownopened. This can let you know when the user clicks outside of it. You can also detach it in the OnClientDropDownClosed event: https://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/client-side-programming/events/onclientdropdownclosed.

Regards,
Marin Bratanov
Progress Telerik