Modify the color of a unique word within a cell in a gridview

How can I change the color of specific keywords in a gridview cell without affecting all words? Here is the sample code:

protected void gvContents_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        if (e.Row.Cells[3].Text.Contains("Special"))
        {
            //Set only the "Special" keyword to red
        }
        else if (e.Row.Cells[3].Text == "Perishable")
        {
            //Set only the "Perishable" keyword to blue
        }
        else if (e.Row.Cells[3].Text == "Danger")
        {
            //Set only the "Danger" keyword to yellow
        }
    }
}

The text within the cell could be something like: Radioactive : Danger or this: Human Body : Special ,Perishable. What steps should I take?

Answer ā„–1

To style specific words in your text, you can utilize a blend of span tags and CSS classes. Begin by defining the necessary CSS classes within your aspx code:

<style>
    .redWord
    {
        color: Red;
    }
    .blueWord
    {
        color: Blue;
    }
    .yellowWord
    {
        color: Yellow;
    }
</style>

Next, substitute instances of Special with

<span class='redWord'>Special</span>
, replace Perishable with
<span class='blueWord'>Perishable</span>
, and change Danger to
<span class='yellowWord'>Danger</span>
:

protected void gvContents_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Cells[3].Text = e.Row.Cells[3].Text.Replace("Special", "<span class='redWord'>Special</span>")
                              .Replace("Perishable", "<span class='blueWord'>Perishable</span>")
                              .Replace("Danger", "<span class='yellowWord'>Danger</span>");
    }
}

Answer ā„–2

To customize cell formatting, you can include the following code within the CellFormatting event handler:

void gridview_CellFormatting(object sender, DataGridViewCellFormattingEventArgs e)
    {
        if (e.Value != null && e.Value.ToString() == "Custom")
        {
            e.CellStyle.BackColor = Color.Blue;
        }
    }

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

What is the proper way to encode image URLs for use in CSS?

For the div element in my code, I want to allow users to input a URL that will be applied as a CSS background image, like this: background-image: url("/* user specified URL here*/") I'm concerned about security. How can I properly escape the URL to ...

When generating a docx file with html-docx-js, it lacks the capability to incorporate external CSS class styles into the document

I have been utilizing the html-docx-js module to convert html content into docx format. However, I am facing an issue where most of my CSS is externally loaded and html-docx-js does not apply any styles. Here is a simplified code sample: const html = &ap ...

Error message: A Windows Service is triggering a FileLoadException

While working on a Windows service, I encountered an issue every time I attempted to start it: The following exception was displayed: Could not load file or assembly 'EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e08 ...

Providing a NULL value to a DateTime Field in LINQ

Here is the structure of my database table: CREATE TABLE MYBUDGET.tbl_CurrentProperty ( [PropID] INT NOT NULL IDENTITY(1,1), [UpdatedOn] DATETIME NOT NULL, [Amount] MONEY NOT NULL, ...

Unable to adjust iframe height

Below is a snippet of code that I am working with: <style type="text/css"> .div_class { position:absolute; border:1px solid blue; left:50%; margin-left:-375px; margin-top:100px; height:300px; width:500px; overflow:hidden; } .iframe_class { position: ...

Validating Two DateTime Pickers as a Group with Javascript in asp.net

How to Ensure Group Validation of Two DateTime Pickers Using JavaScript in ASP.NET ...

Refresh a particular element using javascript

I'm new to Javascript and I am trying to refresh a specific element (a div) using only Javascript when that div is clicked. I came across the location.reload() function, but it reloads the entire page which doesn't fit my requirements. Upon clic ...

How can I distinguish between the w3wp.exe processes and their corresponding App Pools in Windows 7 / IIS7.5?

After upgrading my development machine from Windows XP to Windows 7, I found myself wondering how to determine which w3wp.exe process is associated with each App Pool on a Windows 7 desktop. Is there an easy way to do this? If you are using a server wit ...

"Customizing the website's font: A step-by-step guide to replacing the default Roboto font with a custom font

Despite my efforts to globally override the font, I am still encountering instances where the Roboto font is not being replaced, particularly on MUI select and autocomplete components. import { createTheme } from '@material-ui/core/styles'; // A ...

Tips for successfully using `cols=""` within a grid container alongside a textarea

It seems that both Chrome and Firefox are not following the cols attribute on textarea elements within a grid container: .grid { display: grid; } textarea:not([cols]) { width: 100%; } <h2>Not in a grid container:</h2> <div> <tex ...

Adjust the parent's height to match the height of its content (CSS)

Could anyone assist me in figuring out how to adjust the height (red border) to fit the content (green border)? https://i.sstatic.net/l1p9q.png I'm struggling to determine which property to use, I'm aiming for this outcome but haven't had ...

Conceal overflow content within a Bootstrap btn-group using CSS styling

Suppose I have a table like the one below: /* CSS Styles for the table */ table.my { width: 600px; } table.my > tr { height: 40px; overflow: hidden; } .tag { background: #b8b8b8; padding ...

Implementing a full-width search bar within the Bootstrap navbar

I'm trying to create a navbar using Bootstrap 3.7.7 with a logo on the left, links on the right in two rows, and a large search bar in the center. I've managed to align the logo and links correctly, but I'm struggling with sizing the search ...

Exploring the Power of SAP UI5 Integration with ASP: Harnessing the Potential of

Can anyone provide guidance on how to integrate an SAP UI5 control with the asp:repeater control? I'm facing an issue where a button only appears in the first iteration of the repeater and not in subsequent iterations. <asp:Repeater ID="NewsFeedID ...

A tutorial on allowing a background element to capture the click event triggered by a foreground element

Within a container div, I have a background and foreground div. I want the click event on the foreground div to be passed through to the background div for handling the event. How can this be achieved in Angular 2+? Here is an example structure of my div ...

Transforming a JSON String into a class that selectively uses properties from the JSON string

Currently, I'm facing a challenge with parsing the JSON string below: [ { "id": 1, "name": "Johnny" "dob": "12/10/1986" "sex": "Male" }, { "id": 2, "name": "Sarah" "dob": "3/7/1979" "sex": "Female" } ] ...

"Transferring a JavaScript variable to Twig: A step-by-step guide for this specific scenario

When it comes to loading a CSS file based on the user's selected theme, I encountered an issue while trying to implement this in my Symfony application using Twig templates. The code worked flawlessly on a simple HTML page, but transferring it to a Tw ...

Unique layout design that organizes calendar using nested divs with flexbox - no

I am having difficulties achieving the desired outcome with my calendar header layout implemented using flexbox for the years, months, and days. What could be the issue? Is it due to the structure of the HTML or is there something missing in the CSS? The ...

Incorporate Margins for Table Cells in Outlook (HTML Email)

I'm currently in the process of creating an email newsletter and testing it out on Litmus. Here's how the newsletter design should appear (refer to the image below): Although I understand that it may not look exactly the same on Outlook, is the ...

Steps to resolve SSL "page cannot be displayed" error in VS2013 for an ASP.NET website

Iā€™m running into a bit of trouble with what I thought would be a simple task. Using VS2013 on Win8, I am experimenting with a vanilla MVC ASP.NET project to improve my web development skills. Everything works fine in IE10 until I attempt to enable SSL. ...