Requested feature: Button-CssClass property for GridButtonColumns

[bemara57]

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?

[Dimo]

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.

[bemara57]

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";
        }
    }

[Dimo]

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.