Question

I have a gridview that contains a column name “History” which has Plus (+) image button. Clicking on the plus image button results in addition of new row beneath. Insertion of a new row should change the image of Plus image button to Minus (-) image button for that particular parent row only. Rest of the rows should have the Plus image button.

Q1. How to know the row index of the selected row, so that a image could be changed?

Secondly,If i click on Minus Image button, that should reset to Plus Image button and the added child row shouldn’t be seen.

Q2. How to change the image back to Plus Image button?

I have added the Plus image button in gridview template field. Hence when grid is being loaded, Plus image is visible.

Please advice!

Thanks!

Answer 1

First of all add a template column with an image button in it:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="Srl"
    DataSourceID="EntityDataSource1" OnRowCommand="GridView1_RowCommand" OnRowDataBound="GridView1_RowDataBound">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/Left.gif" CommandName="Add" />
            </ItemTemplate>
        </asp:TemplateField>
        <%--Other columns--%>
    </Columns>
</asp:GridView>

Then in the GridView1_RowDataBound event handler set the button CommandArgument to row index:

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            ImageButton button = (ImageButton)e.Row.FindControl("ImageButton1");
            button.CommandArgument = e.Row.RowIndex.ToString();
        }
    }

Finally in GridView1_RowCommand event handler toggle ImageButton imageUrl and CommandName and do whatever you want do for adding and removing rows:

    protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        int index = Convert.ToInt32(e.CommandArgument);
        GridViewRow selectedRow = GridView1.Rows[index];
        ImageButton button = (ImageButton)e.CommandSource;
        switch (e.CommandName)
        {
            case "Add":
                // Use selectedRow to add your rows       
                button.ImageUrl = "~/images/down.gif";
                button.CommandName = "Remove";
                break;
            case "Remove":
                // Use selectedRow to remove your rows
                button.ImageUrl = "~/images/left.gif";
                button.CommandName = "Add";
                break;
        }
    }