Load DropDownList OnDemand and Expand DropDown after Postback in Asp.Net

Question

Trying to Populate DropDownList when it is clicked (Asp.Net). I have a sample below but I can't get the DropDownList to stay expanded after it is loaded. Does anyone have a solution to load on demand from server other than using 3rd party controls?

JavaScript

<script type="text/javascript">
    function LoadOnDemand(ddl) {
        if (ddl != "") {
            var control = document.getElementById(ddl.id);
            __doPostBack(ddl.id, "LoadOnDemand");
        }
    }
    function AfterLoadOnDemand(ddl) {
    }

</script>

Markup

<body>
    <form id="form1" runat="server">
        <div>
            <asp:Panel ID="DynamicPanel" runat="server" Width="200">
            </asp:Panel>
        </div>
    </form>
</body>

CodeBehind

   Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Dim target As String = Page.Request.Params.Get("__EVENTTARGET")
    Dim eventarg As String = Page.Request.Params.Get("__EVENTARGUMENT")

    Call CreateDynamicControls()

    If IsPostBack Then
        If target <> "" Then
            If eventarg = "LoadOnDemand" Then
                Dim ctrl As Control = FindControl(target)

                If ctrl IsNot Nothing Then
                    If TypeOf ctrl Is DropDownList Then
                        'Note: values would be from a database or table query. 
                        '      and some other logic. Simplified here.
                        Dim ddl As DropDownList = CType(ctrl, DropDownList)
                        ddl.Items.Clear()
                        ddl.Items.Add("one")
                        ddl.Items.Add("two")
                        ddl.Items.Add("three")

                        'remove onfocus from this control so it doen't fire again 
                        'if they click it immediatly after loading
                        ddl.Attributes.Add("onfocus", "AfterLoadOnDemand(this)")
                    End If

                    'reset the LoadOnDemand for all the other DropDownList controls
                    For Each notFocusedControl As Control In DynamicPanel.Controls
                        If TypeOf notFocusedControl Is DropDownList Then
                            Dim ddl As DropDownList = CType(notFocusedControl, DropDownList)
                            If ddl.ID <> target Then
                                ddl.Attributes.Add("onfocus", "LoadOnDemand(this)")
                            End If
                        End If
                    Next
                End If

            End If
        End If
    End If

End Sub

Protected Sub CreateDynamicControls()
    For i As Integer = 0 To 2
        Dim ddl As New DropDownList
        ddl.ID = "DropDownList" & i
        ddl.Width = 150
        ddl.Items.Add("Browse me..")
        ddl.Attributes.Add("onfocus", "LoadOnDemand(this)")
        ddl.AutoPostBack = True
        ddl.EnableViewState = True
        DynamicPanel.Controls.Add(ddl)
        DynamicPanel.Controls.Add(New LiteralControl("<br/><br/>"))
    Next
End Sub

score 0 · Accepted Answer · edited May 23 '17 at 10:34

The only way I found out how to exand it is by emulation. Here is a link (ExpandSelect) that has a JavaScript function to do exactly that. And here is another reference link.

I added the following (initialWidth parameter) to the .js file. This keeps the expanded dropdown from shrinking smaller then the initial width of the dropdown.

function ExpandSelect(select, maxOptionsVisible, initialWidth) {

    //code - see file
    select.style.zIndex = "1000000";

    //Added this right after the zIndex
    if (dropWidth < initialWidth) {
        select.style.width = initialWidth + 'px';
        select2.style.width = initialWidth + 'px';
    }

    //code - see file

    }

Load DropDownList OnDemand and Expand DropDown after Postback in Asp.Net

1 Answers1