How can I change the text of a button on every Click of My Gridview Row?

Question

I am using ASP.NET C# . I have a Gridview (example shown below) and a Button . As I click on the rows of the gridview, my button's text needs to change depending on the info of the gridview.

For example: If I click on the first row, the text of my Button should be Alpha (Operation name). If I click on the third row, it should have Charlie on it and so on. The user could click any row any number of times.

I have learnt the use of onRowDataBound and SelectedIndexChanged event of the gridview to play around with the value in the gridview. I was able to print out each row of the gridview using labels. However I do not understand how I can change the text of a button using this method.

Any help in either Javascript/JQuery would be greatly appreciated. Please let me know if the question is unclear in anyway.

Answer 1

Using SelectedIndexChanged is possible to change button label based on selected row on gridview. Set AutoGenerateSelectButton as true and create an event OnSelectedIndexChanged .

public class MyModel
{
    public int Id { get; set; }
    public string Operation { get; set; }
    public string Month { get; set; }
}

protected void Page_Load(object sender, EventArgs e)
{

    var data = new List<MyModel>()
    {
        new MyModel() { Id = 101, Operation = "Alpha", Month = "Jan" },
        new MyModel() { Id = 102, Operation = "Beta", Month = "Feb" },
        new MyModel() { Id = 103, Operation = "Charlie", Month = "Mar" }
    };

    myGridView.DataSource = data;
    myGridView.DataBind();
}

protected void myGridView_SelectedIndexChanged(object sender, EventArgs e)
{
    var data = myGridView.DataSource as List<MyModel>;
    if (data == null) return;

    myButton.Text = data[myGridView.SelectedIndex].Operation;
}

aspx:

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <asp:GridView ID="myGridView" runat="server"  AutoGenerateSelectButton="true" AutoGenerateColumns="true" OnSelectedIndexChanged="myGridView_SelectedIndexChanged">
        <SelectedRowStyle BackColor="Red" />
    </asp:GridView>
    <asp:Button ID="myButton" runat="server" Text="---" />
</asp:Content>

As an alternative you can use Javascript on the client side:

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <asp:GridView ID="myGridView" ClientIDMode="Static" runat="server" AutoGenerateColumns="true"></asp:GridView>
    <asp:Button ID="myButton" runat="server" Text="---" ClientIDMode="Static" />
    <script>
        // Add event onclick on rows
        document.querySelectorAll("#myGridView tbody tr").forEach(a => a.addEventListener("click", _ => {
            document.querySelector("#myButton").value = a.children[1].innerText;
        }));
    </script>
</asp:Content>