Closing radComboBox dropdowns on nested child controls when manipulating radwindow on parent page

[Zach]

Hello,

I am building a couple different user controls that nest other user controls inside of them. They are all coming together to live on a single control that is placed in a page. Without posting everything I have, a rough outline of my setup is below and a description of the problem is under that.

 

User Control name radcombo:
<table>
<tr>
<td>
<radcombobox id="radComboBox1" runat="server"/>
</td>
</tr>
</table>

UserControl2: UpdateObject2

<radButton id="OpenRadWindowToUpdate" etc.../>

<radwindow id="window1">
    <contentTemplate>
        <radlabel/>
        <radtextField/>
        <userControl:radCombo1 id="customRadCombo1"/>
    </contentTemplate>
</radWindow>

UserControl3: MultiDropDown
<radMultiColumnDropDown /> 
<userControl:UpdateObject2 id="customUpdateObject2"/>

Final destination: .aspx page

<radgrid/>
<radwindow id="controlsLiveInHere"/>
    <userControl:MultiDropDown id="multiDropDown1"/>
</radwindow>

 

I am aware that I can set up javascript on the radwindow's onClientClose/Resize/Move events and understand how to implement that. What I am looking for is how to utilize those events in a way that I can touch a dropdown control that may be 2-3 levels away from where the event is happening and I'll also have 4-7 dropdowns to close. I considered exposing client IDs through properties however that seemed like a stretch. I am working in VB.net and all of the other functionality of the controls operate as designed currently. Any input is appreciated! If more code is needed I can provide it, however its quite a few controls and I've tried to boil it down to its essence above.

After some contemplation this weekend, I considered another few options but would love to hear if anyone has implemented them and if there is a best way to do so.

Public WriteOnly Property HideDropDowns

1. Create a public property on each control that is writeonly as a boolean
2. When that control is passed in true, it actively hides the drop down boxes and then resets its status to false.
3. Any controls that implement this control will need to pass it along to be accessed further up the hierarchy
4. When the modal window is acted upon, hook the appropriate client side events and use javascript to update the value of this property.

Public readonly property DropDownsToClose

1. Create a readonly property that returns a list of clientids as a string separated by some delimiter
2. Hook the client side events that are necessary
3. Use JS to grab that property, split the string, and then run the HideDropDown() function provided to close the dropdown menus

Any parent controls would need to expose this and could even go as far as to simply build upon the string of clientIDs if necessary. I think I prefer this approach if it is feasible. Anyone else done this before? Something like the below...

Public ReadOnly Property DropDownsToClose as String
	Get
		Return String.Concat(radComboBox1.ClientID,"||",radComboBox2.ClientID)
	End Get
End Property

<telerik:RadWindow ID="Window1" runat="server" OnClientDragStart="CloseDropDowns" OnClientResize= >
	<contentTemplate>
        <radlabel/>
        <radtextField/>
        <userControl:RadCombo id="customRadCombo1"/>
    </contentTemplate>
</radWindow>

<Script>
		
	function CloseDropDowns(sender, args) {
		//find the string of clientIds in the userControl's DropDownsToClose property
		var ddls = $find("<%= customRadCombo1.ClientID %>").DropDownsToClose
		ddls.split("||").forEach(comboClientID => $find("<%= comboClientID %>").HideDropDown());
	}
</Script>

 

 

Thanks for any help!

[Zach]

While looking at this again, I realized that all of my controls are being added to an aspx page via a radWindow using content templates. Because of this, all of the controls exist on my actual page and are not stored away elsewhere to be accessed.

 

My solution was to create javascript functions on the page inside of radcodeblocks and close the comboboxes per usual. As those controls get passed further and further along, I simply called the functions that existed on the user controls in a new function that is accessed by the event.