A very common scenario in C# programming for web controls we come across is the topic of description in this article.
How do I dynamically adjust the size of a dropdown list using Javascript ?
There are many possible ways to visualie a working solution for the same but let us go through the one I prefer the most.
First we will try the use of “oncontextmenu”, this event gets fired when the we click on the control. Once we click the control, we invoke a Javascript function to increase the width of the drop-down list. If the width is initially less, then we increase it to the maximum. If the width is currently maximum, then or right-click we need to again resize the control .
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Dynamic Size of ddl</title>
<script type="text/javascript">
function fnSize(ddlobj)
{
if(ddlobj.style.width != "100px")
{
ddlobj .style.width = "100";
}
else
{
ddlobj.style.width = "50";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:DropDownList id="ddlSize" runat="server" oncontextmenu="fnSize(this);"></asp:DropDownList>
</form>
</body>
</html>
Above mentioned function will increase or decrease the width of ddl but size will be static, means not dependent on the listitem while binding dynamically from datatable or any other datasource.
So, we will replace the above mentioned method as follows:
The select object has many events. we will use onmouseover,onblur and onchange.
onchange event is fired when the contents are committed(object or selection have changed.) and not while the value is changing. This event is executed before the code specified by onblur when the control is also losing the focus.The onchange event does not fire when the selected option of the select object is changed programmatically.
onmouseover event fires only if the mouse pointer is outside the boundaries of the object and the user moves the mouse pointer inside the boundaries of the object. If the mouse pointer is currently inside the boundaries of the object, for the event to fire, the user must move the mouse pointer outside the boundaries of the object and then back inside the boundaries of the object.
The onblur event fires on the original object before the onfocus or onclick event fires on the object that is receiving focus.
on these three events we will call our function to manipulate the size of dropdownlist dynamically.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Dynamic Size of ddl</title>
<script type="text/javascript">
var spacer = null;
var curObj = null;
function openSize(obj) {
if (spacer) return;
spacer = document.createElement("span");
spacer.style.width = obj.offsetWidth;
spacer.style.height = obj.offsetHeight;
spacer.style.display = "none";
obj.parentNode.insertBefore(spacer, obj);
obj.style.left = getSize(obj, "Left");
obj.style.top = getSize(obj, "Top");
obj.style.position = "absolute";
obj.style.width = obj.scrollWidth;
obj.focus();
spacer.style.display = "inline";
curObj = obj;
}
function close() {
if (spacer) {
spacer.parentNode.removeChild(spacer);
spacer = null;
}
if (curObj) {
curObj.style.width = "100px";
curObj.style.position = "static";
}
}
function getSize(o, p) {
var i = 0; while (o != null)
{ i += o["offset" + p]; o = o.offsetParent; }
return (i + 4);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:DropDownList ID="ddlSize" runat="server" onmouseenter="openSize(this)"
onchange="close()" onblur="close()"> </asp:DropDownList>
</form>
</body>
</html>
Using above code, we can adjust size of drop down list at the time of selection dynamically.
Enjoy learning !!!
Post a Comment