locked
Ajax ComboBox rendering ListItems correctly but not displaying RRS feed

  • Question

  • User2059416818 posted

    Here ddlSchool is the ajax Combo box

    <code>
    ddlSchool.DataSource = dt;
                                 ddlSchool.DataTextField = "SchoolName";
                                 ddlSchool.DataValueField = "Id";
                                 ddlSchool.DataBind();
                                 ddlSchool.Items.Insert(0, new System.Web.UI.WebControls.ListItem(" --Select-- ", "0"));
                                 ddlSchool.SelectedValue = "0";
    </code>

    when I inspect it renders the value but not displaying ,below code is only available during inspect

    <code>
    <ul id="ContentPlaceHolder1_ddlSchool_ddlSchool_OptionList" class="ajax__combobox_itemlist" style="visibility: hidden; z-index: 1000; overflow-x: hidden; overflow-y: auto; width: 416px; ; height: 425px; left: 293px; top: 1458px; display: none;">
    <li>Maharishi Vidhyala</li>
    <li>Little Kindom</li>
    <li>Malaiar Manram</li>
    <li>Sparkle dots</li>
    <li>KTC nursery school</li>
    </
    ul> </code>

    Please help me to get the ListItems

    Thursday, February 23, 2017 3:59 AM

Answers

  • User2059416818 posted

    Thanks kaushal.

    It all happened because of bootstrap settings.I found the reason why my listbox is not displaying at the exact place.This is because of bootstrap while splitting the columns into 3, the space is not enough to display list items. So it is displaying at some other place. Need to change the bootstrap column setting to overcome this problem.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 27, 2017 8:00 AM
  • User-1509636757 posted

    Need to change the bootstrap column setting to overcome this problem.

    In that case you can write the same Bootstrap class in your stylesheet file by overriding styles with !important that should resolve the issue.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 27, 2017 8:00 AM

All replies

  • User-1509636757 posted

    style="visibility: hidden; z-index: 1000; overflow-x: hidden; overflow-y: auto; width: 416px; ; height: 425px; left: 293px; top: 1458px; display: none;"

    You need to check the design code of this control, since if you notice it is not displaying because Style property has Visibility: hidden as well as display: none

    Thursday, February 23, 2017 6:12 AM
  • User2059416818 posted

    Hi,

    The style is dynamically appearing,we are not used any style in the source file

    Thursday, February 23, 2017 8:48 AM
  • User-1509636757 posted

    there must be some CSS file from where these styles are being applied on this control, you can check in Chrome Developer console, to notice what is the source of these styles.

    Thursday, February 23, 2017 8:59 AM
  • User2059416818 posted

    Hi Kaushalparik..,

    The style seems to be like this,

    <pre>

    .element.style{

     z-index: 1000;
     overflow-x: hidden;
     overflow-y: auto;
     width: 416px;
     ;
     height: 400px;
     left: 217px;
     top: 961px;
     visibility: hidden;
     display: none;

    1. }
    2. After I remove visibility:hidden and display:none.
    3. Only one time it seems to be appear but not at the correct position.
    4. Please tell me the suggestion

    </pre>

    Thursday, February 23, 2017 9:58 AM
  • User-1509636757 posted

    Check out the source of this style in style tab like I have posted in this thread, what .css file is being shown there? You may check in that file:

    https://forums.asp.net/t/2114379.aspx?When+Using+the+f+12+view+in+chrome+and+you+mod+values+in+the+style+tab+is+there+a+way+to+easily+find+that+bootstap+item+in+the+actual+CSS+file+to+change+

    Thursday, February 23, 2017 10:48 AM
  • User-707554951 posted

    Hi poornima82

    From your description, I make a sample. it work well without any problem.

    See the following code:

    SchoolTable in database as below:

    Code as below:

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
    
       <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div>
            <ajaxToolkit:ComboBox ID="ddlSchool" runat="server"></ajaxToolkit:ComboBox>
        </div>

    CodeBehind:

    using System.Configuration;
    using System.Data;
    using System.Data.SqlClient;
    
     protected void Page_Load(object sender, EventArgs e)
            {
                DataTable dt = retrieveAll();
                ddlSchool.DataSource = dt;
                ddlSchool.DataTextField = "SchoolName";
                ddlSchool.DataValueField = "Id";
                ddlSchool.DataBind();
                ddlSchool.Items.Insert(0, new System.Web.UI.WebControls.ListItem(" --Select-- ", "0"));
                ddlSchool.SelectedValue = "0";
    
            }
            public DataTable retrieveAll()
            {
                string constr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
                using (SqlConnection con = new SqlConnection(constr))
                {
                    using (SqlCommand cmd = new SqlCommand("select Id,SchoolName from SchoolTable"))
                    {
                        using (SqlDataAdapter sda = new SqlDataAdapter())
                        {
                            cmd.Connection = con;
                            cmd.CommandType = CommandType.Text;
    
                            sda.SelectCommand = cmd;
                            using (DataSet ds = new DataSet())
                            {
                                sda.Fill(ds);
                                return ds.Tables[0];
                            }
                        }
                    }
                }
            }

    Output screenshot as below:

    <ul id="ContentPlaceHolder1_ddlSchool_ddlSchool_OptionList" class="ajax__combobox_itemlist" style="visibility: hidden; z-index: 1000; overflow-x: hidden; overflow-y: auto; width: 416px; ; height: 425px; left: 293px; top: 1458px; display: none;">
    <li>Maharishi Vidhyala</li>
    <li>Little Kindom</li>
    <li>Malaiar Manram</li>
    <li>Sparkle dots</li>
    <li>KTC nursery school</li>
    </ul>

    From your code above. it seems that you use master page, I supposed that it perhaps because there is some ccs style in your master page.

    So, I suggest you could create a new page with no master page and then test your code:

    Best regards

    Cathy

    Friday, February 24, 2017 2:49 AM
  • User2059416818 posted

    Thanks Kaushal.

    The css appearing is not from any .css file.It showing some file like bootstrap-lumen.min.css.. but this is not related to that.

    I have no idea on how to proceed further

    Friday, February 24, 2017 8:46 AM
  • User-1509636757 posted

    The css appearing is not from any .css file.It showing some file like bootstrap-lumen.min.css..

    That means those CSS styles are being applied from this file » bootstrap-lumen.min.css.

    What you need to do is, override those classes with your version, to make ddlSchool work correctly.  For that, create a css class in application style sheet file or in webpage itself, for example; .ddlSchool and override styles which are causing problem to ddlSchool.

            .ddlSchool {
                visibility: visible !important;
                display: block !important;
                z-index: 1000;
                overflow-x: hidden;
                overflow-y: auto;
                width: 416px;
                ;
                height: 425px;
                left: 293px;
                top: 1458px;
            }

    and use this css class with ddlSchool

            <asp:DropDownList runat="server" ID="ddlSchool" CssClass="ddlSchool">
                <asp:ListItem Text="text1" />
                <asp:ListItem Text="text2" />
            </asp:DropDownList>
    Friday, February 24, 2017 9:04 AM
  • User2059416818 posted

    Hi Kaushal,

    Thanks for your reply and your efforts.

    I tried all things you mentioned in a separate webform, there is no problem,

    Only probs with me project only .

    In my project,

       .ddlSchool {
                visibility: visible !important;
                display: block !important;
                z-index: 1000;
                overflow-x: hidden;
                overflow-y: auto;
                width: 416px;
                ;
                height: 425px;
                left: 293px;
                top: 1458px;
            }

    the only problem is left and top position.I think it may be due to dynamically binding ListItems from code-behind.

    Still never get the expected result.Don't know what makes it to appear the Listbox at someother place.

    Monday, February 27, 2017 4:38 AM
  • User-1509636757 posted

    I suggest, Try removing styles one by one from .ddlSchool and see which style is causing the issue.

    Monday, February 27, 2017 5:47 AM
  • User2059416818 posted

    Thank you very much for the suggestion.

    Monday, February 27, 2017 6:19 AM
  • User-1509636757 posted

    You should set Top and Left based on your requirement for example, setting both to 0 will show dropdown to top left corner:

    left: 0px;
    top: 0px;

    If you do not wish to use positioning with top and left then you may remove Position, Top and Left from .ddlSchool css class. However, above this all you should also check that .ddlSchool class is really being applied to DropDown.

    Monday, February 27, 2017 6:24 AM
  • User2059416818 posted

    Thanks kaushal.

    It all happened because of bootstrap settings.I found the reason why my listbox is not displaying at the exact place.This is because of bootstrap while splitting the columns into 3, the space is not enough to display list items. So it is displaying at some other place. Need to change the bootstrap column setting to overcome this problem.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 27, 2017 8:00 AM
  • User-1509636757 posted

    Need to change the bootstrap column setting to overcome this problem.

    In that case you can write the same Bootstrap class in your stylesheet file by overriding styles with !important that should resolve the issue.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 27, 2017 8:00 AM