Display text content on top of a cell with a filled background color using Aspose.Cells

Aspose.Cells Product Family
1

Step 1: Write content into a cell.
Step 2: Fill the cell with a background color
Step 3: Overlay text on top of the filled color (new text )

I am using aspose cells gid js for python via dotnet ,I want to apply the changes in ui screen .

Please refer attached gif file.
2025-07-04_14h50_40.gif (2.1 MB)

2

@sarathepiq

Cause

To display text content on top of a cell with a filled background color in Aspose.Cells, you need to follow specific steps to ensure the text overlays correctly without being obscured by the cell’s background.

Solution

You can achieve this by setting the cell’s value, applying a background color, and then using a shape to overlay the text. Here’s how to do it:

  1. Write content into a cell.
  2. Fill the cell with a background color.
  3. Overlay text on top of the filled color using a shape.

Code

Here’s a sample code snippet to illustrate these steps:

using System;
using Aspose.Cells;
using Aspose.Cells.Drawing;

namespace AsposeCellsExample
{
    class Program
    {
        static void Main(string[] args)
        {
            // Create a new workbook
            Workbook workbook = new Workbook();
            Worksheet worksheet = workbook.Worksheets[0];

            // Step 1: Write content into a cell
            worksheet.Cells["A1"].PutValue("Hello Aspose!");

            // Step 2: Fill the cell with a background color
            Style style = worksheet.Cells["A1"].GetStyle();
            style.ForegroundColor = System.Drawing.Color.Yellow; // Set background color
            style.Pattern = BackgroundType.Solid; // Set pattern type
            worksheet.Cells["A1"].SetStyle(style);

            // Step 3: Overlay text on top of the filled color
            ShapeCollection shapes = worksheet.Shapes;
            int upperLeftRow = 0; // Row index for the shape
            int upperLeftColumn = 0; // Column index for the shape
            int width = 100; // Width of the shape
            int height = 20; // Height of the shape
            shapes.AddTextEffect(MsoPresetTextEffect.TextEffect1, "Overlay Text", "Arial", 12, true, false, upperLeftRow, 0, upperLeftColumn, 0, width, height);

            // Save the workbook
            workbook.Save("Output.xlsx");
        }
    }
}

Next Steps

  1. Adjust the position and size of the overlay text as needed to fit your requirements.
  2. Experiment with different background colors and text styles to achieve the desired visual effect.
  3. If you encounter any issues, please reach out for further assistance.

This approach will ensure that your text is clearly visible on top of the cell’s background. Let me know if you need any more help!

3

@sarathepiq
just run the python .net demo of GridJs

textboxp.gif (1.3 MB)

here is some APIs about text box control
https://docs.aspose.com/cells/net/aspose-cells-gridjs/how-to-use-gridjs-client-api/#apis-for-textbox-object
for example: you can use setBackgroundColor to change the color

const textbox=xs.sheet.data.shapes[5];
console.log(textbox.type);
textbox.setBackgroundColor('#FFFF00');

textboxapi.gif (1.0 MB)

4

can you please share the code snippet and where I need to place the code block to apply the color on textbox in grid js aspose cells for python via dotnet

5

@sarathepiq,

We will devise/prepare the code snippet to fulfill your request and share it with you soon.

6

I can apply color to the textbox, but when I download the file, the color inside the textbox is not visible.

image.png1231×660 36.9 KB
image.png (36.9 KB)
Downloaded dile
image.png1672×909 63.3 KB
image.png (63.3 KB)

7

@sarathepiq
Currently, we do not support applying color settings on the server side.
We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.

Issue ID(s): CELLSGRIDJS-1764

You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.

8

Can we apply color to the text within a textbox?
Can we save the same text color .

9

@sarathepiq
We will support it.
We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.

Issue ID(s): CELLSGRIDJS-1765

You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.

10

The issues you have found earlier (filed as CELLSGRIDJS-1765) have been fixed in this update. This message was posted using Bugs notification tool by leoluo

11

@sarathepiq
you can use the js api

setBackgroundColor(color)

to set background color for shape.

  
// the parameter is:
color: the html color value in hex string value
// for example,we assume shape 0 existed,this will set the background color to Yellow 
const ashape=xs.sheet.data.shapes[0];
ashape.setBackgroundColor('#FFFF00');

you can use the js api

setFont(fontsettings)

to apply font settings for textbox object. textbox is one of the shape whose type property is :“TextBox”,

 
// the parameter is:
fontsettings:   {'name':'Arial', 'size':12, 'bold':true, 'color':'#FFFF00', 'italic':true} ,the properties are 'name', 'size', 'bold', 'color', 'italic',they are all optional.
// for example,we assume shape 0 is a textbox object,this will set the font color to Yellow ,and font size to 12pt,and bold the font. 
const textbox=xs.sheet.data.shapes[0];
const fontsettings= {'name':'Arial', 'size':12, 'bold':true, 'color':'#FFFF00'}; 
textbox.setFont(fontsettings);

The document is here: