This is a migrated thread and some comments may be shown as answers.

Requested feature: Button-CssClass property for GridButtonColumns

3 Answers 109 Views
Grid
This is a migrated thread and some comments may be shown as answers.
bemara57
Top achievements
Rank 1
bemara57 asked on 02 Sep 2008, 10:56 AM
I have pre-assigned button themes that are intended to be used as <input ... class="button-red" />. In the GridButtonColumn, I would expect to be able to assign a CSS class to the button itself, not the table cell which isn't very intuitive.

For example, I have a GridButtonColumn in my RadGrid like this:

<telerik:GridButtonColumn
    ButtonType="PushButton"
    CommandName="SendToCart"
    Text="Send To Cart">
    <ItemStyle
        VerticalAlign="Top"
        CssClass="button-red" />
</telerik:GridButtonColumn>

The problem is that the CssClass gets assigned to the table cell like this (which is almost useless for styling buttons using existing themes):

<td class="button-red" valign="top">  
    <input name="main_content_dynamic$WishlistItemsGridView$ctl00$ctl04$ctl00" value="Send To Cart"  
        onclick="javascript:__doPostBack('main_content_dynamic$WishlistItemsGridView$ctl00$ctl04$ctl00','')"  
        type="button">  
</td>  

I'm trying to get the css class "button-red" to be assigned to the <input> button so the html ends up as:



<td valign="top">  
    <input name="main_content_dynamic$WishlistItemsGridView$ctl00$ctl04$ctl00" value="Send To Cart"  
        onclick="javascript:__doPostBack('main_content_dynamic$WishlistItemsGridView$ctl00$ctl04$ctl00','')"  
        type="button" 
        class="button-red">  
</td>

I was hoping to find a "Button-CssClass" property in the GridButtonColumn, but no such luck
. Support told me to use the ItemDataBound event to add the class to the input button. Even though I'm doing this now, this seems like overkill for such a simple issue. Although I don't think it's much to ask to add a Button-CssClass property to the GridButtonColumn, it would really go great lengths in making the GridButtonColumn much more visually functional. Am I alone in this?


3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 05 Sep 2008, 09:28 AM
Hello Basem,

We will consider adding such property if there are more requests about it.

In the meantime, it will be a lot easier to style the button by using the CSS class applied to the table cell like this:

.button-red  input
{
    ........
}

If you are using the .button-red CSS class for buttons, which are outside of RadGrid, you can combine two selectors to share the same style settings:


.button-red  input,
.button-red
{
    ........
}


In this way adding a CSS class programmatically to the button will not be needed.


Regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
bemara57
Top achievements
Rank 1
answered on 05 Sep 2008, 11:08 AM
Thanks, but consider CSS styles that are maintained by a separate group and have given me access to button styles like this:

.button-red
{
    background: #fbe3e4;
    border: 1px solid #fbc2c4;
    color: #d12f19;
    cursor: pointer;
    font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    padding: 3px 5px 3px 5px;
    margin: 0;
}

Making this ".button-red, .button-red  input {..}" will style the td cell AND the input button.. ruining it. This requires me to duplicate the style like this to have it work as you suggested:

.button-red
{
    background: #fbe3e4;
    border: 1px solid #fbc2c4;
    color: #d12f19;
    cursor: pointer;
    font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    padding: 3px 5px 3px 5px;
    margin: 0;
}

.button-red-td input
{
    background: #fbe3e4;
    border: 1px solid #fbc2c4;
    color: #d12f19;
    cursor: pointer;
    font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    padding: 3px 5px 3px 5px;
    margin: 0;
}

Then use "button-red-td" as the CssClass- forcing to maintain two duplicate classes. It's a real problem for such a simple request. Anyways, please consider it because I believe it is intuitive to think you have control over adding a css class to the button, instead of the table cell for GridButtonColumn. Not any other Grid columns require this kind of special attention. Right now, I'm forced to do something ridiculous like this:

    protected void LineItemsGridView_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem currentItem = e.Item as GridDataItem;

            // Style wishlist to cart button
            Button wishlistButton = (Button)currentItem["Wishlist"].Controls[0];
            wishlistButton.CssClass = "button-red";
        }
    }
0
Dimo
Telerik team
answered on 05 Sep 2008, 01:30 PM
Hello Basem,

Actually, no need for such complexity as maintaining two CSS classes. What you need is:

input.button-red,
.button-red  input
{
     ....
}



Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Grid
Asked by
bemara57
Top achievements
Rank 1
Answers by
Dimo
Telerik team
bemara57
Top achievements
Rank 1
Share this question
or