CODEWITHSUNDEEP
asp.netcssgridview
Limey
Limey

Reputation: 2772

Place border around multiple cells in a gridview

So I have a Gridview that I would like to modify the look of for only certain cells, and I would like to treat those cells as one (if possible).

So first I am changing some of the cells background color on RowDataBound:

if (e.Row.RowIndex > 1 && e.Row.RowIndex < 7)
{
    e.Row.Cells[1].BackColor = Color.Red;
    e.Row.Cells[2].BackColor = Color.Red;
    e.Row.Cells[3].BackColor = Color.Red;
    e.Row.Cells[4].BackColor = Color.Red;
    e.Row.Cells[5].BackColor = Color.Red;
}

This will change a 5x5 area of cells to red. Now what I would like to do next is put a border around the outside of that 5x5 area. I found the borderStyle and BorderColor for a cell, but is there a way for me to only turn on a border for one side of a cell so I can create my border?

Thanks

Upvotes: 0

Views: 2122

Answers (2)

Limey
Limey

Reputation: 2772

I just thought I would post this as a solution, in case anyone else is looking to do this.

Here is my CSS

<style type="text/css">
.LeftUpperCorner
{
    border-left:5px solid black;
border-top:5px solid black;
}

.Top
 {
border-top:5px solid black;
 }

 .RightUpperCorner
 {
border-right:5px solid black;
border-top:5px solid black;
}

.Left
{
border-left:5px solid black;
}

.Right
{
border-right:5px solid black;
}

.LeftLowerCorner
{
border-left:5px solid black;
border-bottom:5px solid black;
}

.Bottom
{
border-bottom:5px solid black;
}

.RightLowerCorner
{
border-right:5px solid black;
border-bottom:5px solid black;
}

and my code behind:

            if (e.Row.RowIndex == 2)
        {
            e.Row.Cells[1].CssClass = "LeftUpperCorner";
            e.Row.Cells[2].CssClass = "Top";
            e.Row.Cells[3].CssClass = "Top";
            e.Row.Cells[4].CssClass = "Top";
            e.Row.Cells[5].CssClass = "RightUpperCorner";
        }

        if (e.Row.RowIndex == 3 || e.Row.RowIndex == 4 || e.Row.RowIndex == 5)
        {
            e.Row.Cells[1].CssClass = "Left";
            e.Row.Cells[5].CssClass = "Right";
        }

        if (e.Row.RowIndex == 6)
        {
            e.Row.Cells[1].CssClass = "LeftLowerCorner";
            e.Row.Cells[2].CssClass = "Bottom";
            e.Row.Cells[3].CssClass = "Bottom";
            e.Row.Cells[4].CssClass = "Bottom";
            e.Row.Cells[5].CssClass = "RightLowerCorner";
        }

It may not be the prettiest, but this has not real need to change, and will always be in the same location, so it fits my simple needs.

Upvotes: 1

walther
walther

Reputation: 13600

I'd advise you to use classes instead, don't hard-code it like this. It will be easier to maintain etc.

Upvotes: 1

Related Questions