locked
How to add a top editable row in DropDownList? RRS feed

  • Question

  • User2142845853 posted

    In asp.net web forms, have a DropDownList In a GridView Footer,  Its connected to a datasource, then linked to one column.  Works great.  All the items are lumped in there.  But 2 questions, 

    1.  How to add a new blank line at the top so the user can ADD text?

    On the Template I did an Edit and added one entry,

    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="False" DataSourceID="ObjectDataSource1" DataTextField="Astr B26" DataValueField="Astr B26">
                            <asp:ListItem> *--Enter a Value--*</asp:ListItem>
                        </asp:DropDownList>

    But it only shows the values its linked to.  The goal is that the top item is blank and whatever goes in there gets inserted to the DB

    2.  Is there a Method to display only unique items?  Currently it lists every occurence of a value, some repeat some dont.  

    Sunday, January 26, 2020 6:38 PM

Answers

  • User-719153870 posted

    Hi rogersbr,

    1.  How to add a new blank line at the top so the user can ADD text?

    The goal is that the top item is blank and whatever goes in there gets inserted to the DB

    This can be done by the Ajax Control Tookit ComboBox Control. For more information, you can refer to below demo:

    aspx:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-3.3.1.min.js"></script>
        <script>
            function add() {
                var name = $('#ComboBox1_ComboBox1_TextBox').val();
                //use ajax to do the db job here.
                alert(name);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <ajaxToolkit:ComboBox ID="ComboBox1" runat="server">
                </ajaxToolkit:ComboBox>
                <input type="button" id="btn1" value="Add" onclick="add()" />
            </div>
        </form>
    </body>
    </html>

    cs:

            protected void Page_Load(object sender, EventArgs e)
            {
                Bindata();
            }
    
            private void Bindata()
            {
                using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["dbConString"].ConnectionString))
                {
                    using (SqlCommand cmd = new SqlCommand("select UID,UName from Users"))
                    {
                        cmd.CommandType = CommandType.Text;
                        cmd.Connection = con;
                        con.Open();
                        ComboBox1.DataSource = cmd.ExecuteReader();
                        ComboBox1.DataTextField = "UName";
                        ComboBox1.DataValueField = "UID";
                        ComboBox1.DataBind();
                        con.Close();
                    }
                }
            }

    Below is the result of this demo:

    2.  Is there a Method to display only unique items?  Currently it lists every occurence of a value, some repeat some dont.  

    As mgebhard mentioned, do this when you bind the data, select distinct or group by to make your records unique.

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 27, 2020 6:07 AM
  • User-719153870 posted

    Hi rogersbr,

    But how can I bind it to GridView1 Column[2], then the next to 3, 4, 5 etc

    You can bind controls to whichever column in your gridview, in your first post, you mentioned it's in the footer, then a <FooterTemplate> would work.

    Please check below demo:

    aspx:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-3.3.1.min.js"></script>
        <script>
            function add() {
                var id=$('#GridView1_ComboBox1_ComboBox1_TextBox').val();
                var name = $('#GridView1_ComboBox2_ComboBox2_TextBox').val();
                //use ajax to do the db job here.
                alert("id = "+id+",name = "+name);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=.;Initial Catalog=TestDB;Integrated Security=True" SelectCommand="select UID,UName from Users"></asp:SqlDataSource>
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ShowFooter="true">
                    <Columns>
                        <asp:TemplateField HeaderText="ID">
                            <ItemTemplate>
                                <asp:Label ID="Label1" runat="server" Text='<%#Eval("UID") %>'></asp:Label>
                            </ItemTemplate>
                            <FooterTemplate>
                                <ajaxToolkit:ComboBox ID="ComboBox1" Width="75px" runat="server" DataSourceID="SqlDataSource1" DataTextField="UID" DataValueField="UID">
                                </ajaxToolkit:ComboBox>
                            </FooterTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Name">
                            <ItemTemplate>
                                <asp:Label ID="Label1" runat="server" Text='<%#Eval("UName") %>'></asp:Label>
                            </ItemTemplate>
                            <FooterTemplate>
                                <ajaxToolkit:ComboBox ID="ComboBox2" Width="95px" runat="server" DataSourceID="SqlDataSource1" DataTextField="UName" DataValueField="UID">
                                </ajaxToolkit:ComboBox>
                            </FooterTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
                <input type="button" id="btn1" value="Add" onclick="add()" />
            </div>
        </form>
    </body>
    </html>

    cs:

            protected void Page_Load(object sender, EventArgs e)
            {
                BindData4Grid();
            }
    
            private void BindData4Grid()
            {
                using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["dbConString"].ConnectionString))
                {
                    conn.Open();
                    string sql = "select UID,UName,UDate,USalary,UAge from Users";
                    SqlDataAdapter ad = new SqlDataAdapter(sql, conn);
                    DataSet ds = new DataSet();
                    ad.Fill(ds, "Users");
                    GridView1.DataSource = ds;
                    GridView1.DataBind();
                }
            }

    Below is the result of this demo:

    Hope this could help.

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, January 28, 2020 2:28 AM

All replies

  • User409696431 posted

    Users' can't add text in a dropdownlist.  It only displays its listitems.  You can't enter text.  If you want users to be able to add something to the database, that's a separate textbox, a separate submission to update the database, and then reload the page to show the new addition in the dropdown list.  (This means, of course, that anything any user adds will show up for all users.  Is that your intent?)

    " Is there a Method to display only unique items? Currently it lists every occurence of a value, some repeat some dont. "

    Yes.  Have only unique items.  Dropdownlist items should not have repeating values.  Both the text and the value should be unique, so that the combination of the text and value is also unique.  What are you doing with this data and why is the value not unique?  You may need to rethink things.

    Sunday, January 26, 2020 7:01 PM
  • User475983607 posted

    rogersbr

    1.  How to add a new blank line at the top so the user can ADD text?

    Use an HTML 5 datalist rather than an ASP.NET DropDownList.

    https://www.w3schools.com/tags/tag_datalist.asp

    rogersbr

    2.  Is there a Method to display only unique items?  Currently it lists every occurence of a value, some repeat some dont.  

    Use "DISTINCT" or "GROUP BY"  in the SELECT that populates the list.

    https://www.w3schools.com/sql/sql_distinct.asp

    https://www.w3schools.com/sql/sql_groupby.asp

    Sunday, January 26, 2020 7:13 PM
  • User2142845853 posted

    a datalist doesnt work for a dropdown list.  

    will look for a functional dropdown like bootstrap if there is one

    Sunday, January 26, 2020 10:42 PM
  • User-719153870 posted

    Hi rogersbr,

    1.  How to add a new blank line at the top so the user can ADD text?

    The goal is that the top item is blank and whatever goes in there gets inserted to the DB

    This can be done by the Ajax Control Tookit ComboBox Control. For more information, you can refer to below demo:

    aspx:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-3.3.1.min.js"></script>
        <script>
            function add() {
                var name = $('#ComboBox1_ComboBox1_TextBox').val();
                //use ajax to do the db job here.
                alert(name);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <ajaxToolkit:ComboBox ID="ComboBox1" runat="server">
                </ajaxToolkit:ComboBox>
                <input type="button" id="btn1" value="Add" onclick="add()" />
            </div>
        </form>
    </body>
    </html>

    cs:

            protected void Page_Load(object sender, EventArgs e)
            {
                Bindata();
            }
    
            private void Bindata()
            {
                using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["dbConString"].ConnectionString))
                {
                    using (SqlCommand cmd = new SqlCommand("select UID,UName from Users"))
                    {
                        cmd.CommandType = CommandType.Text;
                        cmd.Connection = con;
                        con.Open();
                        ComboBox1.DataSource = cmd.ExecuteReader();
                        ComboBox1.DataTextField = "UName";
                        ComboBox1.DataValueField = "UID";
                        ComboBox1.DataBind();
                        con.Close();
                    }
                }
            }

    Below is the result of this demo:

    2.  Is there a Method to display only unique items?  Currently it lists every occurence of a value, some repeat some dont.  

    As mgebhard mentioned, do this when you bind the data, select distinct or group by to make your records unique.

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 27, 2020 6:07 AM
  • User2142845853 posted

    Hi rogersbr,

    rogersbr

    1.  How to add a new blank line at the top so the user can ADD text?

    rogersbr

    The goal is that the top item is blank and whatever goes in there gets inserted to the DB

    This can be done by the Ajax Control Tookit ComboBox Control. For more information, you can refer to below demo:

    aspx:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-3.3.1.min.js"></script>
        <script>
            function add() {
                var name = $('#ComboBox1_ComboBox1_TextBox').val();
                //use ajax to do the db job here.
                alert(name);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <ajaxToolkit:ComboBox ID="ComboBox1" runat="server">
                </ajaxToolkit:ComboBox>
                <input type="button" id="btn1" value="Add" onclick="add()" />
            </div>
        </form>
    </body>
    </html>

    cs:

            protected void Page_Load(object sender, EventArgs e)
            {
                Bindata();
            }
    
            private void Bindata()
            {
                using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["dbConString"].ConnectionString))
                {
                    using (SqlCommand cmd = new SqlCommand("select UID,UName from Users"))
                    {
                        cmd.CommandType = CommandType.Text;
                        cmd.Connection = con;
                        con.Open();
                        ComboBox1.DataSource = cmd.ExecuteReader();
                        ComboBox1.DataTextField = "UName";
                        ComboBox1.DataValueField = "UID";
                        ComboBox1.DataBind();
                        con.Close();
                    }
                }
            }

    Below is the result of this demo:

    rogersbr

    2.  Is there a Method to display only unique items?  Currently it lists every occurence of a value, some repeat some dont.  

    As mgebhard mentioned, do this when you bind the data, select distinct or group by to make your records unique.

    Best Regard,

    Yang Shen

    EXCELLENT!  But how can I bind it to GridView1 Column[2], then the next to 3, 4, 5 etc   if the GridView has 10 columns I need 10 of these and their contents ARE what is in that column in that gridview control.  

    Monday, January 27, 2020 7:51 PM
  • User-719153870 posted

    Hi rogersbr,

    But how can I bind it to GridView1 Column[2], then the next to 3, 4, 5 etc

    You can bind controls to whichever column in your gridview, in your first post, you mentioned it's in the footer, then a <FooterTemplate> would work.

    Please check below demo:

    aspx:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-3.3.1.min.js"></script>
        <script>
            function add() {
                var id=$('#GridView1_ComboBox1_ComboBox1_TextBox').val();
                var name = $('#GridView1_ComboBox2_ComboBox2_TextBox').val();
                //use ajax to do the db job here.
                alert("id = "+id+",name = "+name);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=.;Initial Catalog=TestDB;Integrated Security=True" SelectCommand="select UID,UName from Users"></asp:SqlDataSource>
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ShowFooter="true">
                    <Columns>
                        <asp:TemplateField HeaderText="ID">
                            <ItemTemplate>
                                <asp:Label ID="Label1" runat="server" Text='<%#Eval("UID") %>'></asp:Label>
                            </ItemTemplate>
                            <FooterTemplate>
                                <ajaxToolkit:ComboBox ID="ComboBox1" Width="75px" runat="server" DataSourceID="SqlDataSource1" DataTextField="UID" DataValueField="UID">
                                </ajaxToolkit:ComboBox>
                            </FooterTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Name">
                            <ItemTemplate>
                                <asp:Label ID="Label1" runat="server" Text='<%#Eval("UName") %>'></asp:Label>
                            </ItemTemplate>
                            <FooterTemplate>
                                <ajaxToolkit:ComboBox ID="ComboBox2" Width="95px" runat="server" DataSourceID="SqlDataSource1" DataTextField="UName" DataValueField="UID">
                                </ajaxToolkit:ComboBox>
                            </FooterTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
                <input type="button" id="btn1" value="Add" onclick="add()" />
            </div>
        </form>
    </body>
    </html>

    cs:

            protected void Page_Load(object sender, EventArgs e)
            {
                BindData4Grid();
            }
    
            private void BindData4Grid()
            {
                using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["dbConString"].ConnectionString))
                {
                    conn.Open();
                    string sql = "select UID,UName,UDate,USalary,UAge from Users";
                    SqlDataAdapter ad = new SqlDataAdapter(sql, conn);
                    DataSet ds = new DataSet();
                    ad.Fill(ds, "Users");
                    GridView1.DataSource = ds;
                    GridView1.DataBind();
                }
            }

    Below is the result of this demo:

    Hope this could help.

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, January 28, 2020 2:28 AM