Changing the background color of a specific row in a GridView when clicking the EditCommandColumn button

I have attempted various methods to change the style of selected rows, such as using SelectedItemStyle and inline CSS. This is my current code:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
     <style type="text/css">
        .hoverTable tr:hover {
                        background-color: wheat;
        }

        .hoverTable tr:current {
                        background-color: aquamarine;
        }

        .SelectedTable {
                        background-color: aquamarine;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <div id="divGrid" style='width:920px; height:230px; overflow:auto'>
            <asp:DataGrid ID="DataGrid_ClaimSearch" runat="server"
    AllowPaging="True" AllowSorting="True" CellPadding="4" ForeColor="#333333" GridLines="None" AutoGenerateColumns="false"
                    CssClass="hoverTable" OnSelectedIndexChanged="OnSelectedIndexChanged"
    OnCancelCommand="DataGrid_ClaimSearch_CancelCommand" 
    OnUpdateCommand="DataGrid_ClaimSearch_UpdateCommand" 
    OnEditCommand="DataGrid_ClaimSearch_EditCommand ">
        <AlternatingItemStyle Font-Bold="False" Font-Italic="False" 
                Font-Overline="False" Font-Strikeout="False" Font-Underline="False" />
        <EditItemStyle BackColor="#999999" Font-Bold="False" Font-Italic="False" 
                Font-Overline="False" Font-Strikeout="False" Font-Underline="False" />
        <FooterStyle BackColor="#5D7B9D" Font-Bold="False" Font-Italic="False" 
                Font-Overline="False" Font-Strikeout="False" Font-Underline="False" />
        <HeaderStyle BackColor="#5D7B9D" Font-Bold="False" Font-Italic="False" 
                Font-Overline="False" Font-Strikeout="False" Font-Underline="False" />
        <PagerStyle BackColor="#5D7B9D" Font-Bold="False" Font-Italic="False" 
                Font-Overline="False" Font-Strikeout="False" Font-Underline="False" />
        <SelectedItemStyle BackColor="Teal" Font-Bold="False" Font-Italic="False" 
                Font-Overline="False" Font-Strikeout="False" Font-Underline="False" />

        <Columns>
            <asp:EditCommandColumn ButtonType="PushButton" CancelText="Cancel" 
                    EditText="Select" UpdateText="Update"></asp:EditCommandColumn>

            <asp:BoundColumn HeaderText="Status" DataField="Status" />
            <asp:BoundColumn HeaderText="LPI Review Date" DataField="Status_Date" />
            <asp:BoundColumn HeaderText="LPI State" DataField="LPI_STATE" />
            <asp:BoundColumn HeaderText="Paid Date" DataField="Claim_Paid_Date" />
            <asp:BoundColumn HeaderText="Paid Amount" DataField="Claim_Paid_Amount" />
            <asp:BoundColumn HeaderText="LPI Amount" DataField="Total_LPI_Amount" />
            <asp:BoundColumn HeaderText="LPI_ID" DataField="LPI_ID" ItemStyle-Width="0px" />

        </Columns>

            </asp:DataGrid>
            <asp:Label ID="lblEmpty" runat="server" Visible="false" Style="font-weight:bold; font-size:large;"></asp:Label>
            </div>
</asp:Content>

The styling defined in the header does not affect the selection of rows. The SelectedItemStyle tag within the GridView also does not modify the selected row's style. Even adding RowStyle-CssClass to the GridView did not yield any results. However, the tr:hover CSS works perfectly. I am struggling to find examples of changing the selected row's style when using an EditCommandColumn button. Any assistance would be greatly appreciated.

By the way, this is a portion of a C# Intranet web page project, if that information is relevant.

Answer №1

Well, it didn't take long for me to figure out the solution after offering the bounty. Oh well, that's just my luck...

But, just in case anyone else needs it in the future, here's what worked for me.

Within the DataGrid_ClaimSearch_EditCommand void, I simply included this line:

e.Item.BackColor = Color.FromName("#E56E94");

And just like that, problem solved!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The sticky top feature of the Bootstrap 4 navbar does not function properly when it is nested inside a div

I am just getting started as a beginner working on a Web application and utilizing Bootstrap 4 for my web design. I have a quick question that needs some clarification. When the code is structured like this, the Navbar does not stay fixed at the top: < ...

Is there a way to display two words side by side in React components?

I previously had the following code: projectName: project.get('name') === 'default' ? 'No Project' : project.get('name') In the render() method, it was written like this: <div className='c-card__projects&ap ...

I am experiencing issues with my drag and drop feature not functioning properly

I am looking to reposition my #timebase1 div within the draghere div. Currently, it only moves the start of the div, but I would like to be able to drop it anywhere inside the draghere div. function handleDrag(e) { var id = e.id; ...

CSS Issue: Hovering Over Link Causes Text to Shift in Internet Explorer

Encountering a problem with CSS and IE, specifically in Internet Explorer 9. When hovering over certain links, the text shifts down which does not occur when using Firefox. You can see an example of this issue at: http://www.debtdispatch.com/list_item_err ...

Class for making elements draggable using jQuery UI

Is it possible to use jQueryui's draggable/droppable combo and add a class to the dragged item when dropped into a specific container, rather than adding a class to the container itself? I've tried adding a class to the container, but that is not ...

What is the method for moving one div above or below another div using the scroll bar?

Here's the scenario I'm facing: I have rows with buttons that, when clicked, reveal a set of options. The challenge is that depending on where the row is located on the page, the settings need to open either above or below the button. When the b ...

The animated image fails to load upon page refresh, but functions properly when the window is initially opened

Okay, I'm encountering an issue with a gif on my website. It works perfectly the first time I load the page, but if I reload or navigate away and then come back to that section, it shows the final image as if the animation has already happened. The gi ...

The animation-play-state is set to 'running', however, it refuses to start playing

I'm in the process of creating a landing page that includes CSS animations, such as fade-ins. Initially setting animation-play-state: "paused" in the CSS file, I later use jQuery to trigger the animation while scrolling through the page. While this s ...

Adjusting the outline color of a Material UI Select component in outlined mode to a different color when the dropdown is activated (currently shown as blue)

Is there a way to change the outline color of Material-UI select component outlined variant correctly? I need help changing the default blue color to red, any assistance would be greatly appreciated Click here for an image reference Reference code snippe ...

One simple trick for aligning checkboxes with their corresponding tags in a single line

Have you encountered issues with a CheckBoxList displaying text in one line below its checkbox when the ListItem has many words? Some checkboxes may also have smaller characters than usual. If you have any solutions or ideas, please share them as I would ...

Is there a way to keep a section of an animated class in place?

My website features an animated retractable menu bar with two separate menus. Clicking on one icon activates a sliding motion to reveal that particular menu while causing the second menu to retract in a similar fashion. To achieve a smooth transition effec ...

Uncovering the media:thumbnail in an RSS feed using Scrapy's CSS selector

I am currently working on parsing an RSS feed that includes image URLs. The XML file structure is as follows: <item> <title>Item Title Goes Here</title> <link>https://www.google.com</link> <media:thumbnail url="https:/ ...

Implement a popmenu for navigation when the menu is too lengthy

Is there a way to create a dynamic breadcrumbs navigation that adjusts based on the page width, and displays certain elements in a dropdown menu if the navigation becomes too lengthy? For example, consider the following list: <div> <nav> ...

How to Retrieve the TextBox ID Dynamically Generated in Razor and Pass it to jQuery

I am attempting to retrieve the dynamically generated TextBox ID into jQuery from a Razor view. The HTML IDs are created as shown below: Product - 1: cartDetails_0__Quantity Product - 2: cartDetails_1__Quantity Currently, when I input the above details d ...

Enhance the speed of my Tumblr page by using JavaScript for personalized styling tweaks

-- Hey there! Dear Reader, if navigating Tumblr isn't your cup of tea, let me know and I'll provide more detailed instructions! I recently ran into some glitches on my Tumblr page while using the default theme 'Optica'. Whenever I tri ...

Displaying a dropdownlist within a DetailsView component

I have a DetailsView with a DropDownList control that I want to bind to a "State" parameter for my update/insert methods. <InsertItemTemplate> <asp:DropDownList ID="States" runat="server" SelectedValue='<%# Bind("State") %>'> & ...

How to conceal certain sections of HTML using jQuery

Currently, I am in the process of creating a "news" page for a website. My goal is to only show the first 15 lines of each news article when the page is loaded, creating a neat appearance for visitors. After the 15th line, I include a "read more" link tha ...

Curved corners when an image is located on the border

Looking to create a basic website with React using Reactstrap and Bootstrap. I'm trying to add a custom border-radius to my Cards, but facing an issue where the image inside the Card is overlapping the container on the upper side. Is there a CSS prope ...

.NET 4 Routing Challenges

Currently, I am implementing routing using Global.asax. I would like to redirect to The following routing configuration is working well: routes.MapPageRoute("AdById", "ad/{cid}", "~/ad.aspx"); In order to exclude js, css files, and images from the rou ...

Conceal the image within the second and third div elements using jQuery

I am facing an issue with my div structure <div class="block_content"> <img src="image1.png"> </div> <div class="block_content"> <img src="image2.png"> </div> <div class="block_content"> <img src="i ...