Bootstrap SelectPicker with Live search using Bootstrap 4 in ASP.Net

Last Reply 7 months ago By pandeyism

Posted 7 months ago

Hi All,

With reference to below link

https://www.aspforums.net/Threads/203918/Maintain-Retain-DropDownList-SelectPicker-plugin-after-Update-Panel-Partial-PostBack-using-jQuery-in-ASPNet/

I am trying to develop same with bootstrap 4 but wont works.

List does not appears and if aapears data-live-search=true does not work.

Please help.

 

 

You are viewing reply posted by: pandeyism 7 months ago.
Posted 7 months ago

Hi Waghmare,

Please refer below sample.

HTML

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://www.jqueryscript.net/demo/Bootstrap-4-Dropdown-Select-Plugin-jQuery/dist/css/bootstrap-select.css" />
    <script type="text/javascript" src="https://www.jqueryscript.net/demo/Bootstrap-4-Dropdown-Select-Plugin-jQuery/dist/js/bootstrap-select.js"></script>
</asp:Content>
<asp:Content ID="Content2" runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
    <asp:ScriptManager ID="Manager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="upPanelMain" runat="server">
        <ContentTemplate>
            <div class="form-horizontal ">
                <div class="form-group">
                    <asp:Label ID="lblCountry" runat="server" CssClass="control-label col-lg-offset-1 col-md-offset-1 col-lg-2 col-md-2"
                        Text="Country Name" />
                    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-globe"></i></span>
                            <asp:DropDownList ID="drpCountry" runat="server" class="selectpicker" OnSelectedIndexChanged="drpCountry_SelectedIndexChanged"
                                AutoPostBack="true" data-live-search="true">
                            </asp:DropDownList>
                        </div>
                    </div>
                    <asp:Label ID="lblCity" runat="server" CssClass="control-label col-lg-2 col-md-2"
                        Text="Country Name" />
                    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-globe"></i></span>
                            <asp:TextBox ID="txtCity" runat="server" MaxLength="150" placeholder="City Name"
                                AutoPostBack="true" OnTextChanged="txtCity_TextChanged" CssClass="form-control"
                                Style="text-transform: uppercase">
                            </asp:TextBox>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-lg-offset-2 col-md-2 col-lg-2 " style="margin-bottom: 12px"
                        runat="server" id="divSave">
                        <asp:LinkButton ID="btnSave" runat="server" CssClass="btn btn-success btn-block btn-md"
                            OnClick="btnSave_Click" ValidationGroup="First"><span class="fa fa-download"></span>&nbsp;Save</asp:LinkButton>
                    </div>
                    <div class="col-md-2 col-lg-2 " style="margin-bottom: 12px" runat="server" id="divUpdate">
                        <asp:LinkButton ID="btnUpdate" runat="server" CssClass="btn btn-warning btn-block btn-md"
                            OnClick="btnUpdate_Click" ValidationGroup="First"><span class="fa fa-pencil"></span>&nbsp;Update</asp:LinkButton>
                    </div>
                    <div class="col-md-2 col-lg-2 " style="margin-bottom: 12px" runat="server" id="divDelete">
                        <asp:LinkButton ID="btnDelete" runat="server" CssClass="btn btn-danger btn-block btn-md"
                            OnClick="btnDelete_Click" ValidationGroup="First"><span class="fa fa-bitbucket"></span>&nbsp;Delete</asp:LinkButton>
                    </div>
                    <div class="col-md-2 col-lg-2 ">
                        <asp:LinkButton ID="btnClear" runat="server" CssClass="btn btn-default btn-block btn-md"
                            OnClick="btnClear_Click"><span class="fa fa-repeat"></span>&nbsp;Clear</asp:LinkButton>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                $(function () {

                    ApplySelectPicker();
                });
                //On UpdatePanel Refresh
                var prm = Sys.WebForms.PageRequestManager.getInstance();
                if (prm != null) {
                    prm.add_endRequest(function (sender, e) {
                        if (sender._postBackSettings.panelsToUpdate != null) {
                            ApplySelectPicker();
                        }
                    });
                };
                function ApplySelectPicker() {
                    $('[id*=drpCountry]').selectpicker({
                        style: 'btn-info',
                        size: 5
                    });
                };
            </script>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindCountry();
    }
}
private void BindCountry()
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[2] { new DataColumn("ID"), new DataColumn("Name") });
    dt.Rows.Add("1", "India");
    dt.Rows.Add("2", "Sri Lanka");
    dt.Rows.Add("3", "Pakistan");
    dt.Rows.Add("4", "Bangladesh");
    dt.Rows.Add("5", "Australia");
    dt.Rows.Add("6", "South Africa");
    dt.Rows.Add("7", "West Africa");
    dt.Rows.Add("8", "Newzeland");
    dt.Rows.Add("9", "West Indies");
    dt.Rows.Add("10", "England");
    drpCountry.DataSource = dt;
    drpCountry.DataTextField = "Name";
    drpCountry.DataValueField = "ID";
    drpCountry.DataBind();

}
protected void btnSave_Click(object sender, EventArgs e)
{

}
protected void btnUpdate_Click(object sender, EventArgs e)
{

}
protected void btnDelete_Click(object sender, EventArgs e)
{

}
protected void btnClear_Click(object sender, EventArgs e)
{

}
protected void drpCountry_SelectedIndexChanged(object sender, EventArgs e)
{

}
protected void txtCity_TextChanged(object sender, EventArgs e)
{

}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        BindCountry()
    End If
End Sub
Private Sub BindCountry()
    Dim dt As DataTable = New DataTable()
    dt.Columns.AddRange(New DataColumn(1) {New DataColumn("ID"), New DataColumn("Name")})
    dt.Rows.Add("1", "India")
    dt.Rows.Add("2", "Sri Lanka")
    dt.Rows.Add("3", "Pakistan")
    dt.Rows.Add("4", "Bangladesh")
    dt.Rows.Add("5", "Australia")
    dt.Rows.Add("6", "South Africa")
    dt.Rows.Add("7", "West Africa")
    dt.Rows.Add("8", "Newzeland")
    dt.Rows.Add("9", "West Indies")
    dt.Rows.Add("10", "England")
    drpCountry.DataSource = dt
    drpCountry.DataTextField = "Name"
    drpCountry.DataValueField = "ID"
    drpCountry.DataBind()
End Sub
Protected Sub btnSave_Click(ByVal sender As Object, ByVal e As EventArgs)
End Sub
Protected Sub btnUpdate_Click(ByVal sender As Object, ByVal e As EventArgs)
End Sub
Protected Sub btnDelete_Click(ByVal sender As Object, ByVal e As EventArgs)
End Sub
Protected Sub btnClear_Click(ByVal sender As Object, ByVal e As EventArgs)
End Sub
Protected Sub drpCountry_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
End Sub
Protected Sub txtCity_TextChanged(ByVal sender As Object, ByVal e As EventArgs)
End Sub

Screenshot