[Solved] Bootstrap SelectPicker not working inside ASP.Net AJAX UpdatePanel Partial PostBack

Hi hetalmodh,

After Update Panel refresh you need to reapply the selectpicker plugin.

Refer below sample.

HTML

<div id="simpleModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Record</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <asp:ScriptManager runat="server" />
            <asp:UpdatePanel ID="upAdd" runat="server">
                <ContentTemplate>
                    <div class="modal-body">
                        <asp:DropDownList ID="ddlCustomers" runat="server" data-live-search="true" class="selectpicker">
                            <asp:ListItem Text="--Select Customer--" Value="0" />
                            <asp:ListItem Text="John Hammond" Value="1" />
                            <asp:ListItem Text="Mudassar Khan" Value="2" />
                            <asp:ListItem Text="Suzanne Mathews" Value="3" />
                            <asp:ListItem Text="Robert Schidner" Value="4" />
                        </asp:DropDownList>
                        <br />
                        <br />
                        <asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClick="Submit" />
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
<script type="text/javascript">
    $(function () {
        $("#simpleModal").modal('show');
        $("[id*=ddlCustomers]").selectpicker();
    });

    //On UpdatePanel Refresh
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
            if (sender._postBackSettings.panelsToUpdate != null) {
                $("[id*=ddlCustomers]").selectpicker();
            }
        });
    };
</script>

Code

protected void Submit(object sender, EventArgs e)
{
    string message = "Name: " + ddlCustomers.SelectedItem.Text;
    message += "\\nID: " + ddlCustomers.SelectedItem.Value;
    ScriptManager.RegisterStartupScript((sender as Control), this.GetType(), "alert", "alert('" + message + "')", true);
}

Screenshot