LinkButtons in DataGrid

[Angela]

I have a DataGrid with a ButtonColumn of LinkButtons. I want the LinkButtons to have the appearance of a BoundColumn but still be clickable. I don't want to use a HyperlinkColumn because I need the functionality of a button

How can I remove the underline from the LinkButton text when the LinkButton is in a DataGrid?

 

[Alessandro Zifiglio]

Angela, You had asked this same question on the 23rd to which you got a
reply. Think you missed it, heres the link on the groups :

http://groups.google.com/groups?hl=...-8&q=datagrid+linkbutton+question&sa=N&tab=wg

LinkButtons to have the appearance of a BoundColumn but still be clickable.
I don't want to use a HyperlinkColumn because I need the functionality of a
button.

 

[Angela]

I have a dynamically created DataGrid, would I still be able to accomplish what I need to using your example? Or would I have to do something different since the DataGrid is dynamic?

 

[Jeffrey Tan[MSFT]]

Hi Angela,

Thank you for posting in the community!

Based on my understanding, you want to make the linkbutton column in the
datagrid to have no underline.

=========================================
Yes, just use "butTemp.ItemStyle.CssClass = "Buttoncolumn"" will not work.

That is because you just apply the css style on the <td> not the <a>
tag.(You can determine this through View the html source)

Actually, you can get what you want through apply the css style on the
linkbutton web control in the ButtonColumn. So you should hook into the
DataGrid.ItemCreated event, then loop through the columns and controls to
find the LinkButton control. Then apply the style sheet.

I have writen a sample code for you:

<STYLE TYPE="text/css">
.Buttoncolumn { color: darkred; font-size:14pt; text-decoration: none}
/* unvisited link */
.Buttoncolumn:visited { color: indianred; text-decoration: none}
/*visited link */
.Buttoncolumn:active { color: gold;text-decoration: none } /* active
link */
.Buttoncolumn:hover { color: darkgreen; text-decoration: none} /*hover
or mousover link */
</STYLE>

protected System.Web.UI.HtmlControls.HtmlForm Form1;
private void Page_Load(object sender, System.EventArgs e)
{
if(!IsPostBack)
{
SqlDataAdapter adapter=new SqlDataAdapter("select * from
jobs","server=localhost;database=pubs;uid=sa;pwd=");
DataSet ds=new DataSet();
adapter.Fill(ds);

DataGrid dg=new DataGrid();
ButtonColumn bc=new ButtonColumn();
//bc.ItemStyle.CssClass="Buttoncolumn";
bc.ButtonType=ButtonColumnType.LinkButton;
bc.Text="LinkButton";

dg.ItemCreated +=new DataGridItemEventHandler(dg_ItemCreated);

dg.Columns.Add(bc);

dg.DataSource=ds;
dg.DataBind();

Form1.Controls.Add(dg);
}
}

private void dg_ItemCreated(object sender, DataGridItemEventArgs e)
{

if(e.Item.ItemType==ListItemType.Item||e.Item.ItemType==ListItemType.Alterna
tingItem)
{
DataGridItem dgi=e.Item as DataGridItem;
foreach(Control c in dgi.Cells[0].Controls)
{
if(c is LinkButton)
{
LinkButton lb=c as LinkButton;
lb.CssClass="Buttoncolumn";
}
}
}
}

It will work well.
Note: in the css style sheet, I add "text-decoration: none" to the
unvisited link, which will make the unvisited link have no underline.

==================================================
Please apply my suggestion above and let me know if it helps resolve your
problem.

Thank you for your patience and cooperation. If you have any questions or
concerns, please feel free to post it in the group. I am standing by to be
of assistance.
Have a nice weekend!!

Best regards,
Jeffrey Tan
Microsoft Online Partner Support
Get Secure! - www.microsoft.com/security
This posting is provided "as is" with no warranties and confers no rights.

 

[Alessandro Zifiglio]

Angela, as an alternative to Jeffery's example, an easier way to go about
it, is to slightly modify the css i had posted. Just like Jeffery stated,
the css gets applied to the table cell(td) and not the hyperlink(a) anchor
element in itself. CSS Psuedo-elements are very flexible and the following
*modified*
sample will work for you :

<STYLE TYPE="text/css">
.Buttoncolumn td, a:link{ color: darkred; font-size:14pt; text-decoration:
none } /* unvisited link */
.Buttoncolumn td, a:visited { color: indianred; text-decoration: none}
/* visited link */
.Buttoncolumn td, a:active { color: gold;text-decoration: none } /*
active link */
.Buttoncolumn td, a:hover { color: darkgreen; text-decoration: none}
/* hover or mousover link */
</STYLE>

Now apply the css class "Buttoncolumn" to your LinkButton

butTemp.ItemStyle.CssClass = "Buttoncolumn"

Hi Angela,

Thank you for posting in the community!

Based on my understanding, you want to make the linkbutton column in the
datagrid to have no underline.

=========================================
Yes, just use "butTemp.ItemStyle.CssClass = "Buttoncolumn"" will not work.

That is because you just apply the css style on the <td> not the <a>
tag.(You can determine this through View the html source)

Actually, you can get what you want through apply the css style on the
linkbutton web control in the ButtonColumn. So you should hook into the
DataGrid.ItemCreated event, then loop through the columns and controls to
find the LinkButton control. Then apply the style sheet.

I have writen a sample code for you:

<STYLE TYPE="text/css">
.Buttoncolumn { color: darkred; font-size:14pt; text-decoration: none}
/* unvisited link */
.Buttoncolumn:visited { color: indianred; text-decoration: none}
/*visited link */
.Buttoncolumn:active { color: gold;text-decoration: none } /* active
link */
.Buttoncolumn:hover { color: darkgreen; text-decoration: none} /*hover
or mousover link */
</STYLE>

protected System.Web.UI.HtmlControls.HtmlForm Form1;
private void Page_Load(object sender, System.EventArgs e)
{
if(!IsPostBack)
{
SqlDataAdapter adapter=new SqlDataAdapter("select * from
jobs","server=localhost;database=pubs;uid=sa;pwd=");
DataSet ds=new DataSet();
adapter.Fill(ds);

DataGrid dg=new DataGrid();
ButtonColumn bc=new ButtonColumn();
//bc.ItemStyle.CssClass="Buttoncolumn";
bc.ButtonType=ButtonColumnType.LinkButton;
bc.Text="LinkButton";

dg.ItemCreated +=new DataGridItemEventHandler(dg_ItemCreated);

dg.Columns.Add(bc);

dg.DataSource=ds;
dg.DataBind();

Form1.Controls.Add(dg);
}
}

private void dg_ItemCreated(object sender, DataGridItemEventArgs e)
{

if(e.Item.ItemType==ListItemType.Item||e.Item.ItemType==ListItemType.Alterna
tingItem)
{
DataGridItem dgi=e.Item as DataGridItem;
foreach(Control c in dgi.Cells[0].Controls)
{
if(c is LinkButton)
{
LinkButton lb=c as LinkButton;
lb.CssClass="Buttoncolumn";
}
}
}
}

It will work well.
Note: in the css style sheet, I add "text-decoration: none" to the
unvisited link, which will make the unvisited link have no underline.

==================================================
Please apply my suggestion above and let me know if it helps resolve your
problem.

Thank you for your patience and cooperation. If you have any questions or
concerns, please feel free to post it in the group. I am standing by to be
of assistance.
Have a nice weekend!!

Best regards,
Jeffrey Tan
Microsoft Online Partner Support
Get Secure! - www.microsoft.com/security
This posting is provided "as is" with no warranties and confers no rights.

 

[Alessandro Zifiglio]

Angela, as an alternative to Jeffery's example, an easier way to go about
it is to slightly modify the css i had posted. Just like Jeffery stated,
the css gets applied to the table cell(td) and not the hyperlink(a) anchor
element in itself. CSS Psuedo-elements are very flexible and the following
*modified*
sample will work for you :

<STYLE TYPE="text/css">
.Buttoncolumn td, a:link{ color: darkred; font-size:14pt; text-decoration:
none } /* unvisited link */
.Buttoncolumn td, a:visited { color: indianred; text-decoration: none}
/* visited link */
.Buttoncolumn td, a:active { color: gold;text-decoration: none } /*
active link */
.Buttoncolumn td, a:hover { color: darkgreen; text-decoration: none}
/* hover or mousover link */
</STYLE>

Now apply the css class "Buttoncolumn" to your LinkButton

butTemp.ItemStyle.CssClass = "Buttoncolumn"

Hi Angela,

Thank you for posting in the community!

Based on my understanding, you want to make the linkbutton column in the
datagrid to have no underline.

=========================================
Yes, just use "butTemp.ItemStyle.CssClass = "Buttoncolumn"" will not work.

That is because you just apply the css style on the <td> not the <a>
tag.(You can determine this through View the html source)

Actually, you can get what you want through apply the css style on the
linkbutton web control in the ButtonColumn. So you should hook into the
DataGrid.ItemCreated event, then loop through the columns and controls to
find the LinkButton control. Then apply the style sheet.

I have writen a sample code for you:

<STYLE TYPE="text/css">
.Buttoncolumn { color: darkred; font-size:14pt; text-decoration: none}
/* unvisited link */
.Buttoncolumn:visited { color: indianred; text-decoration: none}
/*visited link */
.Buttoncolumn:active { color: gold;text-decoration: none } /* active
link */
.Buttoncolumn:hover { color: darkgreen; text-decoration: none} /*hover
or mousover link */
</STYLE>

protected System.Web.UI.HtmlControls.HtmlForm Form1;
private void Page_Load(object sender, System.EventArgs e)
{
if(!IsPostBack)
{
SqlDataAdapter adapter=new SqlDataAdapter("select * from
jobs","server=localhost;database=pubs;uid=sa;pwd=");
DataSet ds=new DataSet();
adapter.Fill(ds);

DataGrid dg=new DataGrid();
ButtonColumn bc=new ButtonColumn();
//bc.ItemStyle.CssClass="Buttoncolumn";
bc.ButtonType=ButtonColumnType.LinkButton;
bc.Text="LinkButton";

dg.ItemCreated +=new DataGridItemEventHandler(dg_ItemCreated);

dg.Columns.Add(bc);

dg.DataSource=ds;
dg.DataBind();

Form1.Controls.Add(dg);
}
}

private void dg_ItemCreated(object sender, DataGridItemEventArgs e)
{

if(e.Item.ItemType==ListItemType.Item||e.Item.ItemType==ListItemType.Alterna
tingItem)
{
DataGridItem dgi=e.Item as DataGridItem;
foreach(Control c in dgi.Cells[0].Controls)
{
if(c is LinkButton)
{
LinkButton lb=c as LinkButton;
lb.CssClass="Buttoncolumn";
}
}
}
}

It will work well.
Note: in the css style sheet, I add "text-decoration: none" to the
unvisited link, which will make the unvisited link have no underline.

==================================================
Please apply my suggestion above and let me know if it helps resolve your
problem.

Thank you for your patience and cooperation. If you have any questions or
concerns, please feel free to post it in the group. I am standing by to be
of assistance.
Have a nice weekend!!

Best regards,
Jeffrey Tan
Microsoft Online Partner Support
Get Secure! - www.microsoft.com/security
This posting is provided "as is" with no warranties and confers no rights.

 

[Alessandro Zifiglio]

oops --AUTO-CORRECTION --please use the following correction ;p

<style type="text/css">
..Buttoncolumn td, td a:link {
font-size: 14pt; color: darkred; text-decoration: none
}
.Buttoncolumn td, td a:visited{
color: indianred; text-decoration: none
}
.Buttoncolumn td, td a:active {
color: gold; text-decoration: none
}
..Buttoncolumn td, td a:hover{
color: darkgreen; text-decoration: none
}
</style>
--------------------------------------------
butTemp.ItemStyle.CssClass = "Buttoncolumn"

Angela, as an alternative to Jeffery's example, an easier way to go about
it is to slightly modify the css i had posted. Just like Jeffery stated,
the css gets applied to the table cell(td) and not the hyperlink(a) anchor
element in itself. CSS Psuedo-elements are very flexible and the following
*modified*
sample will work for you :

<STYLE TYPE="text/css">
.Buttoncolumn td, a:link{ color: darkred; font-size:14pt; text-decoration:
none } /* unvisited link */
.Buttoncolumn td, a:visited { color: indianred; text-decoration: none}
/* visited link */
.Buttoncolumn td, a:active { color: gold;text-decoration: none } /*
active link */
.Buttoncolumn td, a:hover { color: darkgreen; text-decoration: none}
/* hover or mousover link */
</STYLE>

Now apply the css class "Buttoncolumn" to your LinkButton

butTemp.ItemStyle.CssClass = "Buttoncolumn"

Hi Angela,

Thank you for posting in the community!

Based on my understanding, you want to make the linkbutton column in the
datagrid to have no underline.

=========================================
Yes, just use "butTemp.ItemStyle.CssClass = "Buttoncolumn"" will not work.

That is because you just apply the css style on the <td> not the <a>
tag.(You can determine this through View the html source)

Actually, you can get what you want through apply the css style on the
linkbutton web control in the ButtonColumn. So you should hook into the
DataGrid.ItemCreated event, then loop through the columns and controls to
find the LinkButton control. Then apply the style sheet.

I have writen a sample code for you:

<STYLE TYPE="text/css">
.Buttoncolumn { color: darkred; font-size:14pt; text-decoration: none}
/* unvisited link */
.Buttoncolumn:visited { color: indianred; text-decoration: none}
/*visited link */
.Buttoncolumn:active { color: gold;text-decoration: none } /* active
link */
.Buttoncolumn:hover { color: darkgreen; text-decoration: none} /*hover
or mousover link */
</STYLE>

protected System.Web.UI.HtmlControls.HtmlForm Form1;
private void Page_Load(object sender, System.EventArgs e)
{
if(!IsPostBack)
{
SqlDataAdapter adapter=new SqlDataAdapter("select * from
jobs","server=localhost;database=pubs;uid=sa;pwd=");
DataSet ds=new DataSet();
adapter.Fill(ds);

DataGrid dg=new DataGrid();
ButtonColumn bc=new ButtonColumn();
//bc.ItemStyle.CssClass="Buttoncolumn";
bc.ButtonType=ButtonColumnType.LinkButton;
bc.Text="LinkButton";

dg.ItemCreated +=new DataGridItemEventHandler(dg_ItemCreated);

dg.Columns.Add(bc);

dg.DataSource=ds;
dg.DataBind();

Form1.Controls.Add(dg);
}
}

private void dg_ItemCreated(object sender, DataGridItemEventArgs e)
{

if(e.Item.ItemType==ListItemType.Item||e.Item.ItemType==ListItemType.Alterna

tingItem)
{
DataGridItem dgi=e.Item as DataGridItem;
foreach(Control c in dgi.Cells[0].Controls)
{
if(c is LinkButton)
{
LinkButton lb=c as LinkButton;
lb.CssClass="Buttoncolumn";
}
}
}
}

It will work well.
Note: in the css style sheet, I add "text-decoration: none" to the
unvisited link, which will make the unvisited link have no underline.

==================================================
Please apply my suggestion above and let me know if it helps resolve your
problem.

Thank you for your patience and cooperation. If you have any questions or
concerns, please feel free to post it in the group. I am standing by to be
of assistance.
Have a nice weekend!!

Best regards,
Jeffrey Tan
Microsoft Online Partner Support
Get Secure! - www.microsoft.com/security
This posting is provided "as is" with no warranties and confers no rights.

 

[Jeffrey Tan[MSFT]]

Hi Angela,

Is your problem resolved? I think my reply and Alessandro's solution both
work for you.

If you still have any concern, please feel free to feedback.

Best regards,
Jeffrey Tan
Microsoft Online Partner Support
Get Secure! - www.microsoft.com/security
This posting is provided "as is" with no warranties and confers no rights.