[Solved] AjaxToolKit ComboBox items not displaying inside Bootstrap Modal Popup in ASP.Net

Last Reply one month ago By dharmendr

Posted one month ago

Combobox inside bootstrap popup right side button not showing and its dropdownlist content is not showing, i think its css issue      when i inspect and increase height and width to 26px, its shows button correctly.   when i changed its width to 120px and height to 30px or more, then dropdown content also show.   i don't understand how to apply in mywebform it correctly

dropdown button and its items not showing properly inside modal poup 

DataSet ds2 = sql.getds("select * from profile_category ");
ddlprofilecategory.DataSource = ds2;
ddlprofilecategory.DataTextField = "profile";
ddlprofilecategory.DataValueField = "profile_id";
ddlprofilecategory.DataBind();
ddlprofilecategory.Items.Insert(0, new ListItem("--Select Profile--", "0"));

 

<div id="myModaltoallinterview" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content"> <div class="modal-body" > <div class="col-md-12" >
            <div class="form-group"><label> Profile </label><br />
                <ajax:ComboBox ID="ddlprofilecategory" ForeColor="Black"   AutoCompleteMode="Append"  runat="server" AppendDataBoundItems="True"></ajax:ComboBox>
            </div>
         </div> 
    </div>
</div>
You are viewing reply posted by: dharmendr one month ago.
Posted one month ago Modified on one month ago

Hi mukesh1,

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
    media="screen" />
<style type="text/css">
    .ajax__combobox_buttoncontainer button
    {
        width: 15px !important;
        height: 20px !important;
    }
    .ajax__combobox_itemlist
    {
        position: relative !important;
        left: 0px !important;
        top: 3px !important;
        width: 175px !important;
        height: 150px !important;
    }
</style>
<script type="text/javascript">
    $(function () {
        $("#myModaltoallinterview").modal({ backdrop: 'static', keyboard: false });
    });
</script>
<ajax:ToolkitScriptManager runat="server">
</ajax:ToolkitScriptManager>
<div id="myModaltoallinterview" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    &times;</button>
                <h4 class="modal-title">
                </h4>
            </div>
            <div class="modal-body">
                <div class="col-md-12">
                    <div class="form-group">
                        <label>
                            Profile
                        </label>
                        <br />
                        <ajax:ComboBox ID="ddlCategories" runat="server" AutoCompleteMode="Append" AppendDataBoundItems="True" >
                        </ajax:ComboBox>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">
                    Close</button>
            </div>
        </div>
    </div>
</div>

Namespaces

C#

using System.Configuration;
using System.Data;
using System.Data.SqlClient;

VB.Net

Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataSet ds = this.GetData("SELECT * FROM Categories");
        ddlCategories.DataSource = ds;
        ddlCategories.DataTextField = "CategoryName";
        ddlCategories.DataValueField = "CategoryID";
        ddlCategories.DataBind();
        ddlCategories.Items.Insert(0, new ListItem("--Select Category--", "0", true));
    }
}

private DataSet GetData(string query)
{
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    SqlCommand cmd = new SqlCommand(query);
    using (SqlConnection con = new SqlConnection(conString))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataSet ds = new DataSet())
            {
                sda.Fill(ds, "Categories");
                return ds;
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        Dim ds As DataSet = Me.GetData("SELECT * FROM Categories")
        ddlCategories.DataSource = ds
        ddlCategories.DataTextField = "CategoryName"
        ddlCategories.DataValueField = "CategoryID"
        ddlCategories.DataBind()
        ddlCategories.Items.Insert(0, New ListItem("--Select Category--", "0", True))
    End If
End Sub

Private Function GetData(ByVal query As String) As DataSet
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim cmd As SqlCommand = New SqlCommand(query)
    Using con As SqlConnection = New SqlConnection(conString)
        Using sda As SqlDataAdapter = New SqlDataAdapter()
            cmd.Connection = con
            sda.SelectCommand = cmd
            Using ds As DataSet = New DataSet()
                sda.Fill(ds, "Categories")
                Return ds
            End Using
        End Using
    End Using
End Function

Screenshot