changing css of controls in gridview separately for each row

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
    }     
}

Vaibhav Parmar · Accepted Answer · 2013-12-02 12:58:23Z

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";
}

answered Dec 2, 2013 at 12:58

Vaibhav Parmar

6634 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mahdi Hesari Over a year ago

Thank you very much. the both answer are the same. thank you again my friend :)

rusmus · Accepted Answer · 2013-12-02 11:27:44Z

0

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.

answered Dec 2, 2013 at 11:27

rusmus

1,66511 silver badges18 bronze badges

1 Comment

Mahdi Hesari Over a year ago

thank you very much. i just thought if i do this, it will affect all the rows :) i needed do this in server side since it do an update command in data base after changing the css :) thank you again :)

Collectives™ on Stack Overflow

changing css of controls in gridview separately for each row

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related