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

Last Reply 7 months ago By dharmendr

Posted 7 months 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 7 months ago.
Posted 7 months ago Modified on 7 months 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