为每一行分别更改gridview中的控件的css

Question

i have four button in my templatefield of gridview. i need to change the css of clicked button in every row separately. for example in row one, first button is clicked. then it have to be yellow. and in row 3, second button is clicked. then it have to be yellow and so on. here is my gridview

<asp:GridView OnRowCommand="SelectedPollGridView_RowCommand" ID="SelectedPollGridView" runat="server" AutoGenerateColumns="False" DataKeyNames="PollID" DataSourceID="SelectedPollSqlDataSource">
    <Columns>
        <asp:TemplateField>            
            <ItemTemplate>
                <asp:Label Visible="false" ID="PollIDLabel" runat="server" Text='<%#Eval("PollID") %>'></asp:Label>

                <div runat="server" id="MainDiv" class="text-right">
                    <div runat="server" id="O1Div" visible='<%#Eval("O1Vis") %>' class="radio ">
                        <asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O1" ID="O1Button" runat="server" Text=" 1" />
                    </div>
                    <div runat="server" id="O2Div" visible='<%#Eval("O2Vis") %>' class="radio">
                        <asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O2" ID="O2Button" runat="server" Text=" 2" />
                    </div>
                    <div runat="server" id="O3Div" visible='<%#Eval("O3Vis") %>' class="radio">
                        <asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O3" ID="O3Button" runat="server" Text=" 3" />
                    </div>
                    <div runat="server" id="O4Div" visible='<%#Eval("O4Vis") %>' class="radio">
                        <asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O4" ID="O4Button" runat="server" Text=" 4" />
                    </div>
                </div>

            </ItemTemplate>
        </asp:TemplateField>
    </Columns>    
</asp:GridView>

here is code behind:

protected void SelectedPollGridView_RowCommand(object sender, GridViewCommandEventArgs e)
{        
    int index = Convert.ToInt32(e.CommandArgument); 
    GridViewRow row = SelectedPollGridView.Rows[index];

    Label myPollIDLAbel = (Label)row.FindControl("PollIDLabel");

    if (e.CommandName == "O1")
    {
        //chnaging the css of O1 button JUST IN THIS ROW

    }
    else if (e.CommandName == "O2")
    {
        //chnaging the css of O2 button JUST IN THIS ROW
    }
    else if (e.CommandName == "O3")
    {
        //chnaging the css of O3 button JUST IN THIS ROW
    }
    else if (e.CommandName == "O4")
    {
        //chnaging the css of O4 button JUST IN THIS ROW
    }     
}

Answer 1

You just use the below code:

if (e.CommandName == "O1")
{
  Button O1Button = (Button)row.FindControl("O1Button");

  //Change the background-color:
  O1Button.Style.Add("background-color", "yellow");

  //Change the class
  O1Button.CssClass = "class-name";
}
else if (e.CommandName == "O2")
{
    //chnaging the css of O2 button JUST IN THIS ROW
    Button O2Button = (Button)row.FindControl("O2Button");

  //Change the background-color:
  O2Button.Style.Add("background-color", "yellow");

  //Change the class
  O2Button.CssClass = "class-name";
}
else if (e.CommandName == "O3")
{
    //chnaging the css of O3 button JUST IN THIS ROW
    Button O3Button = (Button)row.FindControl("O3Button ");

  //Change the background-color:
  O3Button.Style.Add("background-color", "yellow");

  //Change the class
  O3Button.CssClass = "class-name";
}
else if (e.CommandName == "O4")
{
    //chnaging the css of O4 button JUST IN THIS ROW
    Button O4Button= (Button)row.FindControl("O4Button");

  //Change the background-color:
  O4Button.Style.Add("background-color", "yellow");

  //Change the class
  O4Button.CssClass = "class-name";
}     

Answer 2

I would suggest reading up on how to do this in javascript, as a simple change in css for an element should be pretty easy. However, if you need to do it on the server you should be able to do something like this:

if (e.CommandName == "O1")
{
    //chnaging the css of O1 button JUST IN THIS ROW
    Button O1Button = (Button)row.FindControl("O1Button");

    //Change the background-color:
    O1Button.Style.Add("background-color", "yellow");

    //Change the class
    O1Button.CssClass = "class-name";
}

and similarly for the other buttons.