Wednesday, March 21, 2012

DropDownExtender: reusing DropDownControl - is it possible?

Hello Developers,

I have a form with several input textboxes and associated drop down extenders.
Is there any way I can use one drop down control (panel with link buttons) for all of my drop down extenders?
I just hate to render drop down control multiple times when each drop down should have exactly the same selection items.

Thanks for any pointers.

Tomasz

Hi Tomasz,

My understanding of your issue is that you want to use one DropDownExtender instead of several DropDownExtenders in your situation. If I have misunderstood, please feel free to let me know.

tdjastrzebski:

Is there any way I can use one drop down control (panel with link buttons) for all of my drop down extenders?

Do you want to set its TargetControl manually? I think it is a little complex unless we modify its source code. However I found a way . We only put one DropDownExtender on the page. When click (or a mouse event) the Control, DropDownExtender will conver it and act like one another DropDownExtender works on it. Here is the sample.

<%@. Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server"
</script
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<asp:LinkButton ID="LinkButton1" runat="server" style="display:none">LinkButton</asp:LinkButton>
<br />
<br />

<asp:Panel ID="Panel1" runat="server" style="display:none">
123123123<br>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</asp:Panel>
<ajaxToolkit:DropDownExtender ID="DropDownExtender1" BehaviorID="myDDEBID" runat="server" TargetControlID="LinkButton1" DropDownControlID="Panel1">
</ajaxToolkit:DropDownExtender>

<asp:LinkButton ID="LinkButton2" runat="server" OnClientClick="return false;" onmouseover="showDDE('LinkButton2','LinkButton2');">LinkButton2</asp:LinkButton>
<asp:LinkButton ID="LinkButton3" runat="server" OnClientClick="return false;" onmouseover="showDDE('LinkButton3','LinkButton3');">LinkButton3</asp:LinkButton>
<%=DateTime.Now.ToString()%>
<script type="text/javascript" language="javascript">
function showDDE(lbName,lbText){
//If you want to change the Panel's content when switch from different LinkButtons , the easiest way is to add an UpdatePanel inside the Panel.
//When onhover event is fire, first refresh the UpdatePanel by sending an asynchronous postback.
var newLocation = $common.getLocation($get(lbName));
$get("LinkButton1").innerText = lbText; //if Firefox , $get("LinkButton1").textContent = lbText;
$common.setLocation($find("myDDEBID").get_element(),new Sys.UI.Point(newLocation.x ,newLocation.y));
$get("LinkButton1").style.display='';
$find("myDDEBID").hide(); //enhance the compatible
$find("myDDEBID").hover();
}
</script>
</form>
</body>
</html>
I hope this help.

Best regards,

Jonathan


Thanks!

This solution seems to work.

Tomasz

No comments:

Post a Comment