locked
get text of dropdownlist inside the gridview in asp.net jquery RRS feed

  • Question

  • User102588659 posted

    i'm using master page and gridview. there are two dropdownlist inside the gridview. my code is like below.

    <Code>

    <asp:GridView runat="server" ID="GridExpanses" AutoGenerateColumns="false" ShowFooter="true" ShowHeaderWhenEmpty="true">
                                <HeaderStyle CssClass="headerstyle" />
                                <Columns>
                                    <asp:TemplateField HeaderText="DrCr">
                                                        <ItemTemplate>
                                                            <asp:DropDownList ID="DdlDrCr"  CssClass="ddlDrCr" runat="server"></asp:DropDownList>
                                                        </ItemTemplate>
                                        </asp:TemplateField>
                                     <asp:TemplateField HeaderText="Expanses">
                                            <ItemTemplate>
                                                <asp:DropDownList ID="DdlExpanses" CssClass="" runat="server"></asp:DropDownList>
                                            </ItemTemplate>
                                            <FooterTemplate>
                                                <asp:Button ID="btnAddGridExpanses" runat="server" CssClass="Cnumeric Dnumeric" Text="Add" OnClick="btnAddGridExpanses_Click" OnClientClick="EventRise();" />
                                            </FooterTemplate>
                                        </asp:TemplateField>
                                      <asp:TemplateField HeaderText="Value">
                                        <ItemTemplate>
                                            <asp:TextBox ID="txtExpansesValue" Width="150" CssClass="ExpVal numeric" runat="server"></asp:TextBox>
                                        </ItemTemplate>
                                          <FooterTemplate>
                                            <asp:TextBox ID="txtExpansesSum" Width="150" Enabled="false" Text="0" CssClass="ExpValSum" runat="server"></asp:TextBox>
                                        </FooterTemplate>
                                    </asp:TemplateField>
                                       <asp:CommandField ShowDeleteButton="True"  ControlStyle-CssClass="Delete" ButtonType="Button" />
                                </Columns>
                            </asp:GridView>

    <Code>

    now i need to get text of ist dropdoen and 2nd dropdown

    i used the below jquery code

    var DrCr = $(this).closest("tr").find(".ddlDrCr").val();
                          alert(DDlClientText)

    i'm getting concatnated text of both.

    Please help me

    Wednesday, October 5, 2016 6:58 AM

Answers

  • User-1838255255 posted

    Hi  asmasm,

    As far as I know , use OnSelectedIndexChanged is easier and clearer than use jQuery , you can get two ddl values by OnSelectedIndexChanged event in Code behind , then calculate result and show in textbox . I make a sample for your reference:

    Sample code:

    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="MigrationId,ContextKey" DataSourceID="SqlDataSource1" OnRowDataBound="GridView1_RowDataBound">
                <Columns>
                    <asp:TemplateField HeaderText="First Number">
                        <ItemTemplate>
                            <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                                <asp:ListItem>21</asp:ListItem>
                                <asp:ListItem>22</asp:ListItem>
                                <asp:ListItem>23</asp:ListItem>
                                <asp:ListItem>24</asp:ListItem>
                                <asp:ListItem>25</asp:ListItem>
                            </asp:DropDownList>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Second Number">
                        <ItemTemplate>
                            <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged" >
                                <asp:ListItem>26</asp:ListItem>
                                <asp:ListItem>27</asp:ListItem>
                                <asp:ListItem>29</asp:ListItem>
                                <asp:ListItem>20</asp:ListItem>
                                <asp:ListItem>27</asp:ListItem>
                            </asp:DropDownList>
                        </ItemTemplate>
                    </asp:TemplateField>
                     <asp:TemplateField HeaderText="Result">
                        <ItemTemplate>
                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:CommandField ShowDeleteButton="True" HeaderText="Command" />
                </Columns>
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MoviesConnectionString5 %>" DeleteCommand="DELETE FROM [__MigrationHistory] WHERE [MigrationId] = @MigrationId AND [ContextKey] = @ContextKey" InsertCommand="INSERT INTO [__MigrationHistory] ([MigrationId], [ContextKey], [Model], [ProductVersion]) VALUES (@MigrationId, @ContextKey, @Model, @ProductVersion)" SelectCommand="SELECT * FROM [__MigrationHistory]" UpdateCommand="UPDATE [__MigrationHistory] SET [Model] = @Model, [ProductVersion] = @ProductVersion WHERE [MigrationId] = @MigrationId AND [ContextKey] = @ContextKey">
                <DeleteParameters>
                    <asp:Parameter Name="MigrationId" Type="String" />
                    <asp:Parameter Name="ContextKey" Type="String" />
                </DeleteParameters>
            </asp:SqlDataSource>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
        </form>
    </body>
    

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) { DropDownList DDL = (DropDownList)sender; int s =Convert.ToInt32(DDL.SelectedItem.Value); GridViewRow gr = (GridViewRow)((sender) as Control).NamingContainer; DropDownList ddl2 =(DropDownList)gr.FindControl("DropDownList2"); int s1 = Convert.ToInt32(ddl2.SelectedItem.Value); TextBox tx = (TextBox)gr.FindControl("TextBox1"); tx.Text = (s + s1).ToString(); } protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { DropDownList ddl = (DropDownList)e.Row.FindControl("DropDownList1"); int s1 = Convert.ToInt32(ddl.SelectedItem.Value); DropDownList ddl2 = (DropDownList)e.Row.FindControl("DropDownList2"); int s2 = Convert.ToInt32(ddl.SelectedItem.Value); TextBox tx = (TextBox)e.Row.FindControl("TextBox1"); tx.Text = (s1 + s2).ToString(); } } protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e) { DropDownList DDL = (DropDownList)sender; int s = Convert.ToInt32(DDL.SelectedItem.Value); GridViewRow gr = (GridViewRow)((sender) as Control).NamingContainer; DropDownList ddl2 = (DropDownList)gr.FindControl("DropDownList1"); int s1 = Convert.ToInt32(ddl2.SelectedItem.Value); TextBox tx = (TextBox)gr.FindControl("TextBox1"); tx.Text = (s + s1).ToString(); }


    Best Regards,

    Eric Du

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 10, 2016 2:36 AM

All replies

  • User-1838255255 posted

    Hi  asmasm,  

    According to your description and code , I made an sample for your reference , this sample use value change event then get two values and show in textbox ;

    Sample Code :

    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-1.10.2.js"></script>
        <script>
            $(function () {
                $("Select").change(function () {
                    var text1 = parseInt($("#GridView1_DropDownList1_0").val());
                    var text2 = parseInt($("#GridView1_DropDownList2_0").val());
                    var text3 =parseInt(text1 + text2);
                    $("#GridView1_TextBox1_0").val(text3);
    
                    var text4 = parseInt($("#GridView1_DropDownList1_1").val());
                    var text5 = parseInt($("#GridView1_DropDownList2_1").val());
                    var text6 = parseInt(text4 + text5);
                    $("#GridView1_TextBox1_1").val(text6);
                });
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="MigrationId,ContextKey" DataSourceID="SqlDataSource1">
                <Columns>
                    <asp:TemplateField HeaderText="First Number">
                        <ItemTemplate>
                            <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="false">
                                <asp:ListItem>21</asp:ListItem>
                                <asp:ListItem>22</asp:ListItem>
                                <asp:ListItem>23</asp:ListItem>
                                <asp:ListItem>24</asp:ListItem>
                                <asp:ListItem>25</asp:ListItem>
                            </asp:DropDownList>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Second Number">
                        <ItemTemplate>
                            <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="false">
                                <asp:ListItem>26</asp:ListItem>
                                <asp:ListItem>27</asp:ListItem>
                                <asp:ListItem>29</asp:ListItem>
                                <asp:ListItem>20</asp:ListItem>
                                <asp:ListItem>27</asp:ListItem>
                            </asp:DropDownList>
                        </ItemTemplate>
                    </asp:TemplateField>
                     <asp:TemplateField HeaderText="Result">
                        <ItemTemplate>
                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:CommandField ShowDeleteButton="True" HeaderText="Command" />
                </Columns>
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MoviesConnectionString5 %>" DeleteCommand="DELETE FROM [__MigrationHistory] WHERE [MigrationId] = @MigrationId AND [ContextKey] = @ContextKey" InsertCommand="INSERT INTO [__MigrationHistory] ([MigrationId], [ContextKey], [Model], [ProductVersion]) VALUES (@MigrationId, @ContextKey, @Model, @ProductVersion)" SelectCommand="SELECT * FROM [__MigrationHistory]" UpdateCommand="UPDATE [__MigrationHistory] SET [Model] = @Model, [ProductVersion] = @ProductVersion WHERE [MigrationId] = @MigrationId AND [ContextKey] = @ContextKey">
                <DeleteParameters>
                    <asp:Parameter Name="MigrationId" Type="String" />
                    <asp:Parameter Name="ContextKey" Type="String" />
                </DeleteParameters>
            </asp:SqlDataSource>
        </div>
        </form>
    </body>

    ScreenShot:

    Best Regards,

    Eric Du

    Thursday, October 6, 2016 9:17 AM
  • User102588659 posted

    Dear  Eric Du,

    but if we have n number of rows then how can we handle it. please let me know

    Sunday, October 9, 2016 5:55 AM
  • User-1838255255 posted

    Hi  asmasm,

    As far as I know , use OnSelectedIndexChanged is easier and clearer than use jQuery , you can get two ddl values by OnSelectedIndexChanged event in Code behind , then calculate result and show in textbox . I make a sample for your reference:

    Sample code:

    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="MigrationId,ContextKey" DataSourceID="SqlDataSource1" OnRowDataBound="GridView1_RowDataBound">
                <Columns>
                    <asp:TemplateField HeaderText="First Number">
                        <ItemTemplate>
                            <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                                <asp:ListItem>21</asp:ListItem>
                                <asp:ListItem>22</asp:ListItem>
                                <asp:ListItem>23</asp:ListItem>
                                <asp:ListItem>24</asp:ListItem>
                                <asp:ListItem>25</asp:ListItem>
                            </asp:DropDownList>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Second Number">
                        <ItemTemplate>
                            <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged" >
                                <asp:ListItem>26</asp:ListItem>
                                <asp:ListItem>27</asp:ListItem>
                                <asp:ListItem>29</asp:ListItem>
                                <asp:ListItem>20</asp:ListItem>
                                <asp:ListItem>27</asp:ListItem>
                            </asp:DropDownList>
                        </ItemTemplate>
                    </asp:TemplateField>
                     <asp:TemplateField HeaderText="Result">
                        <ItemTemplate>
                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:CommandField ShowDeleteButton="True" HeaderText="Command" />
                </Columns>
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MoviesConnectionString5 %>" DeleteCommand="DELETE FROM [__MigrationHistory] WHERE [MigrationId] = @MigrationId AND [ContextKey] = @ContextKey" InsertCommand="INSERT INTO [__MigrationHistory] ([MigrationId], [ContextKey], [Model], [ProductVersion]) VALUES (@MigrationId, @ContextKey, @Model, @ProductVersion)" SelectCommand="SELECT * FROM [__MigrationHistory]" UpdateCommand="UPDATE [__MigrationHistory] SET [Model] = @Model, [ProductVersion] = @ProductVersion WHERE [MigrationId] = @MigrationId AND [ContextKey] = @ContextKey">
                <DeleteParameters>
                    <asp:Parameter Name="MigrationId" Type="String" />
                    <asp:Parameter Name="ContextKey" Type="String" />
                </DeleteParameters>
            </asp:SqlDataSource>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
        </form>
    </body>
    

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) { DropDownList DDL = (DropDownList)sender; int s =Convert.ToInt32(DDL.SelectedItem.Value); GridViewRow gr = (GridViewRow)((sender) as Control).NamingContainer; DropDownList ddl2 =(DropDownList)gr.FindControl("DropDownList2"); int s1 = Convert.ToInt32(ddl2.SelectedItem.Value); TextBox tx = (TextBox)gr.FindControl("TextBox1"); tx.Text = (s + s1).ToString(); } protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { DropDownList ddl = (DropDownList)e.Row.FindControl("DropDownList1"); int s1 = Convert.ToInt32(ddl.SelectedItem.Value); DropDownList ddl2 = (DropDownList)e.Row.FindControl("DropDownList2"); int s2 = Convert.ToInt32(ddl.SelectedItem.Value); TextBox tx = (TextBox)e.Row.FindControl("TextBox1"); tx.Text = (s1 + s2).ToString(); } } protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e) { DropDownList DDL = (DropDownList)sender; int s = Convert.ToInt32(DDL.SelectedItem.Value); GridViewRow gr = (GridViewRow)((sender) as Control).NamingContainer; DropDownList ddl2 = (DropDownList)gr.FindControl("DropDownList1"); int s1 = Convert.ToInt32(ddl2.SelectedItem.Value); TextBox tx = (TextBox)gr.FindControl("TextBox1"); tx.Text = (s + s1).ToString(); }


    Best Regards,

    Eric Du

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 10, 2016 2:36 AM