locked
find control in datalist RRS feed

  • Question

  • User1587720337 posted

    Hi, 

    I have added the html textbox control for the quantity and two button to increase and decrease the quantity value inside the datalist itemtemplate mode, it seems to be working for the first row in item template. but when i tried to increase the value in second row text box, it increase the value in the first row text box. here is my code

    <ItemTemplate><form name="f1">
    <input type='button' name='add' onclick='javascript: document.getElementById("qty").value++;' value='+' />
    <input type='text' name='qty' id='qty' style="width:30px;"/>
    <asp:TextBox ID="TextBox1" Visible="false" runat="server" Text='<%# Bind("Qty_Actual") %>' Width="30px"></asp:TextBox>
    <input type='button' name='subtract' onclick='javascript: subtractQty();' value='-' />
    </form></ItemTemplate>

    any idea how to fix this so that the quantity textbox in each row have its own identity and clicking on the button will increase the value on the same row.

    Friday, June 22, 2018 9:53 AM

Answers

  • User-330142929 posted

    Hi Sudhir,

    According to your description, you want to find control in datalist. And as you know, when we put a form in datalist ItemTemplate, it could generate many forms and many text whose name and id is duplicate. So when we use javascript to get the Document object mode by its id, we could get many objects while it returns the first object whose id meet your code.

    Back to your needs, I don’t think you are correct in this design way. Asp.net has many server controls help you to design front page.

    Here I recommend that you use server-side controls to design this form, or achieve what you want. I have made a demo and wish it is useful to you.

    Aspx.

        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    
            <div>
    
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    
                    <ContentTemplate>
    
                        <asp:DataList ID="DataList1" runat="server" DataKeyField="Id" DataSourceID="SqlDataSource1" GridLines="Both" RepeatColumns="3" OnItemCommand="DataList1_ItemCommand">
    
                            <ItemTemplate>
    
                                Id:
    
                        <asp:Label ID="IdLabel" runat="server" Text='<%# Eval("Id") %>' />
    
                                <br />
    
                                Name:
    
                        <asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
    
                                <br />
    
                                Price:
    
                        <asp:Label ID="PriceLabel" runat="server" Text='<%# Eval("Price") %>' />
    
                                <br />
    
                                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    
                                <asp:Button ID="Button1" runat="server" Text="+" CommandName="Add"/>
    
                            </ItemTemplate>
    
                        </asp:DataList>
    
                    </ContentTemplate>
    
                </asp:UpdatePanel>
    
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyDataStore %>" SelectCommand="SELECT * FROM [Products]"></asp:SqlDataSource>
    
            </div>

    Code behind.

     protected void DataList1_ItemCommand(object source, DataListCommandEventArgs e)
    
            {
                if (e.CommandName=="Add")
                {
                    TextBox textBox = e.Item.FindControl("TextBox1") as TextBox;
                    int value = string.IsNullOrEmpty(textBox.Text) ? 0 : int.Parse(textBox.Text);
                    value++;
                    textBox.Text = value.ToString();
    
                }
    
            }

    How it works.

     

    Please feel free to let me know, if you have any question.

    Best Regards.

    Abraham 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 25, 2018 4:34 PM

All replies

  • User-1171043462 posted

    Check this. I did using jQuery

     <asp:DataList ID="dlItems" runat="server">
            <ItemTemplate>
                <input type='button' name='add' value='+' />
                <input type='text' name='qty' id='qty' style="width: 30px;" value="0" />
                <asp:TextBox ID="TextBox1" Visible="false" runat="server" Text='<%# Bind("Qty_Actual") %>'
                    Width="30px"></asp:TextBox>
                <input type='button' name='subtract' value='-' />
            </ItemTemplate>
        </asp:DataList>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("[id*=dlItems] input[name=add]").click(function () {
                    var qty = $(this).closest("tr").find("input[name=qty]");
                    qty[0].value = parseInt(qty[0].value) +  1;
                });
                 $("[id*=dlItems] input[name=subtract]").click(function () {
                    var qty = $(this).closest("tr").find("input[name=qty]");
                    qty[0].value =  parseInt(qty[0].value) > 0 ? parseInt(qty[0].value) - 1 : 0;
                });
            });
        </script>

    Saturday, June 23, 2018 1:25 PM
  • User-330142929 posted

    Hi Sudhir,

    According to your description, you want to find control in datalist. And as you know, when we put a form in datalist ItemTemplate, it could generate many forms and many text whose name and id is duplicate. So when we use javascript to get the Document object mode by its id, we could get many objects while it returns the first object whose id meet your code.

    Back to your needs, I don’t think you are correct in this design way. Asp.net has many server controls help you to design front page.

    Here I recommend that you use server-side controls to design this form, or achieve what you want. I have made a demo and wish it is useful to you.

    Aspx.

        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    
            <div>
    
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    
                    <ContentTemplate>
    
                        <asp:DataList ID="DataList1" runat="server" DataKeyField="Id" DataSourceID="SqlDataSource1" GridLines="Both" RepeatColumns="3" OnItemCommand="DataList1_ItemCommand">
    
                            <ItemTemplate>
    
                                Id:
    
                        <asp:Label ID="IdLabel" runat="server" Text='<%# Eval("Id") %>' />
    
                                <br />
    
                                Name:
    
                        <asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
    
                                <br />
    
                                Price:
    
                        <asp:Label ID="PriceLabel" runat="server" Text='<%# Eval("Price") %>' />
    
                                <br />
    
                                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    
                                <asp:Button ID="Button1" runat="server" Text="+" CommandName="Add"/>
    
                            </ItemTemplate>
    
                        </asp:DataList>
    
                    </ContentTemplate>
    
                </asp:UpdatePanel>
    
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyDataStore %>" SelectCommand="SELECT * FROM [Products]"></asp:SqlDataSource>
    
            </div>

    Code behind.

     protected void DataList1_ItemCommand(object source, DataListCommandEventArgs e)
    
            {
                if (e.CommandName=="Add")
                {
                    TextBox textBox = e.Item.FindControl("TextBox1") as TextBox;
                    int value = string.IsNullOrEmpty(textBox.Text) ? 0 : int.Parse(textBox.Text);
                    value++;
                    textBox.Text = value.ToString();
    
                }
    
            }

    How it works.

     

    Please feel free to let me know, if you have any question.

    Best Regards.

    Abraham 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 25, 2018 4:34 PM