LinkButtons in DataGrid

Discussion in 'ASP .Net Web Controls' started by Angela, Feb 27, 2004.

  1. Angela

    Angela Guest

    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?
     
    Angela, Feb 27, 2004
    #1
    1. Advertising

  2. 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

    "Scott Mitchell [MVP]" <> wrote in message
    news:ntM%b.3584$...
    > Angela wrote:
    >
    > > 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?
    >
    > Angela, create a CSS class that has its text-decoration set to none.
    > Then, apply this CSS class to the ButtonColumn, using the techniques
    > discussed at:
    > http://datawebcontrols.com/faqs/ButtonColumns/CssClassForButtons.shtml
    >
    > Happy Programming!
    >
    > --
    >
    > Scott Mitchell
    >
    > http://www.4GuysFromRolla.com
    > http://www.ASPFAQs.com
    > http://www.ASPMessageboard.com
    >
    > * When you think ASP, think 4GuysFromRolla.com!
     
    Alessandro Zifiglio, Feb 27, 2004
    #2
    1. Advertising

  3. Angela

    Angela Guest

    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?
     
    Angela, Feb 27, 2004
    #3
  4. 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], Feb 28, 2004
    #4
  5. 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"



    """Jeffrey Tan[MSFT]""" <> wrote in message
    news:eek:497n2a$...
    >
    > 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, Feb 28, 2004
    #5
  6. 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"
    """Jeffrey Tan[MSFT]""" <> wrote in message
    news:eek:497n2a$...
    >
    > 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, Feb 28, 2004
    #6
  7. 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"

    "Alessandro Zifiglio" <> wrote in
    message news:LR00c.12771$...
    > 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"
    > """Jeffrey Tan[MSFT]""" <> wrote in message
    > news:eek:497n2a$...
    > >
    > > 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, Mar 1, 2004
    #7
  8. 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.
     
    Jeffrey Tan[MSFT], Mar 2, 2004
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Vidar Petursson

    Re: LinkButtons and MouseOver

    Vidar Petursson, Jul 8, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    1,294
    sramruttun
    Jul 9, 2003
  2. Rick Glos
    Replies:
    0
    Views:
    652
    Rick Glos
    Jul 8, 2003
  3. Joey
    Replies:
    0
    Views:
    528
  4. Andy Green

    DataGrid LinkButtons on Pocket IE

    Andy Green, Jul 24, 2003, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    115
    Andy Green
    Jul 24, 2003
  5. BTHOMASinOHIO

    LinkButtons in a DataGrid blanks out my complete DataGrid (WTF !!)

    BTHOMASinOHIO, Aug 20, 2003, in forum: ASP .Net Datagrid Control
    Replies:
    1
    Views:
    180
    BTHOMASinOHIO
    Aug 21, 2003
Loading...

Share This Page