locked
loop gridview find control with javascript RRS feed

  • Question

  • User1144600762 posted

    I am using javascript and trying to loop through a gridview and find a label control and set its text.  I do not know the row index of the row that the control will be on but the gridview uses a datakey that is a unique id for each row.   The javascript function Im using receives an id that I could use to match to the datakey but I can't figure out how to find the control using this.

    Is there a way, I can find a label in an item template using a datakey value using javascript?

    many thank you.

    Tuesday, October 10, 2017 1:58 AM

Answers

  • User-707554951 posted

    Hi  cowasaki,

    Is there a way, I can find a label in an item template using a datakey value using javascript?

    It is no need for you to loop gridview,

    You could just use th following code:

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript">
            function SetText(index) {
                var gridviewcontrol = document.getElementById("<%=GridView1.ClientID%>");
                var gridviewrow =$( gridviewcontrol.rows[parseInt(index)])
                gridviewrow.find("span[id*='Label1']").text("New Value");
            }
    </script>
    
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" DataKeyNames="Id">
    <Columns>
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="100" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    </asp:GridView>
            <input id="Button1" type="button" value="button"  onclick="SetText(3)"/>

    CodeBehind:

    protected void Page_Load(object sender, EventArgs e)
            {
                if (!this.IsPostBack)
                {
                    DataTable dt = new DataTable();
                    dt.Columns.AddRange(new DataColumn[4] { new DataColumn("Id"), new DataColumn("Group"), new DataColumn("Name"), new DataColumn("Country") });
                    dt.Rows.Add(1, "A", "John Hammond", "United States");
                    dt.Rows.Add(2, "B", "Mudassar Khan", "India");
                    dt.Rows.Add(3, "A", "Suzanne Mathews", "France");
                    dt.Rows.Add(4, "B", "Robert Schidner", "Russia");
                    GridView1.DataSource = dt;
                    GridView1.DataBind();
                }
            }

    Output:

    Best regards

    Cathy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 11, 2017 2:41 AM

All replies

  • User632428103 posted

    Hello cowasaki,

    read this article i think it will help you

    http://codedisplay.com/jquery-to-get-read-datakeynames-value-of-gridview-selected-rows-in-asp-net-c-vb-net/

    Tuesday, October 10, 2017 6:22 AM
  • User-707554951 posted

    Hi  cowasaki,

    Is there a way, I can find a label in an item template using a datakey value using javascript?

    It is no need for you to loop gridview,

    You could just use th following code:

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript">
            function SetText(index) {
                var gridviewcontrol = document.getElementById("<%=GridView1.ClientID%>");
                var gridviewrow =$( gridviewcontrol.rows[parseInt(index)])
                gridviewrow.find("span[id*='Label1']").text("New Value");
            }
    </script>
    
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" DataKeyNames="Id">
    <Columns>
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="100" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    </asp:GridView>
            <input id="Button1" type="button" value="button"  onclick="SetText(3)"/>

    CodeBehind:

    protected void Page_Load(object sender, EventArgs e)
            {
                if (!this.IsPostBack)
                {
                    DataTable dt = new DataTable();
                    dt.Columns.AddRange(new DataColumn[4] { new DataColumn("Id"), new DataColumn("Group"), new DataColumn("Name"), new DataColumn("Country") });
                    dt.Rows.Add(1, "A", "John Hammond", "United States");
                    dt.Rows.Add(2, "B", "Mudassar Khan", "India");
                    dt.Rows.Add(3, "A", "Suzanne Mathews", "France");
                    dt.Rows.Add(4, "B", "Robert Schidner", "Russia");
                    GridView1.DataSource = dt;
                    GridView1.DataBind();
                }
            }

    Output:

    Best regards

    Cathy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 11, 2017 2:41 AM