Centering Checkboxes in Radgrid

[s]

I'm trying to center a checkbox in a grid.  The checkboxes are being centered somewhat, but it's not perfect.  The checkboxes are shifted to the right ever so slightly.  Oddly, when I put a text character in the box, it is shifted slightly to the left.  I don't know what the issue is.  Is there a padding parameter or margin parameter being set somewhere?

[Princy]

Hello,

I suppose you are using GridClientSelectColumn. If that is the case, you can set the style directly as shown below.

aspx:

<telerik:GridClientSelectColumn >
     <HeaderStyle HorizontalAlign="Center" />
     <ItemStyle  HorizontalAlign="Center" />
</telerik:GridClientSelectColumn>

Thanks,
Princy.

[s]

It is actually a RadGrid declared like so:

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" GridLines="None"

    PageSize="25" AllowSorting="True" onItemDataBound="Data_OnItemDataBound"
      OnPreRender="Data_onItemPreRender">

</telerik:RadGrid> 

The checkboxes are centered, they're just off-centered a little bit.  It becomes more of a design issue when the columns are narrow.  I think it might be caused by some padding somewhere.  I'm not sure though.

[Tsvetina]

Hi,

Still it is not very clear where are the checkboxes in your grid. Are they a part of a template or checkbox/client select column? Without being able to replicate the problem, we cannot say where it comes form. Can you notice it in any of our online demos or do you have a live url for us to inspect?

All the best,
Tsvetina
the Telerik team

[Erin]

Is it possible for the centered checkbox style to be applied to all RadGrids, rather than adding

<HeaderStyle HorizontalAlign="Center" />
<ItemStyle  HorizontalAlign="Center" />

to each RadGrid's GridClientSelectColumn individually?  I don't want to apply these styles to the RadGrids themselves through CSS because the majority of the columns in the RadGrids need to be left justified, so setting the horizontal alignment to left makes much more sense overall. 
The Understanding the HTML Output and CSS Styles page says that "the <col> elements cannot be used for easier styling of columns, because this is not a cross-browser approach," but I have seen examples of applying styles to certain columns on other forum posts like this one.  Is there a comparable approach for GridClientSelectColumns?

Thank you!

[Tsvetina]

Hi Erin,

You could try using the following CSS in your page. However, note that it will center all checkboxes in all RadGrids. This is the best you could get without specifying a custom CSS class for the column or using script.

<style type="text/css">
    .RadGrid .rgMasterTable input[type=checkbox]
    {
      display: block;
      margin: 0 auto;
    }
</style>

Kind regards,
Tsvetina
the Telerik team

[Erin]

Thank you!  Centering the checkboxes in all of the RadGrids was exactly what I wanted to do.

[Waseem]

Hi

I have checkbox in header and checkbox series in Itemtemplate. Whey i apply style in Checkbox its work. but when i appy css. its does not work.

<asp:CheckBox ID="ckDel" style=" " runat="server" onclick="CheckAll(this);"
                                            ToolTip="Delete Test template item" Text="&nbsp;&nbsp;&nbsp;Action" />

Below class Not works
<asp:CheckBox ID="ckDel" CssClass="Test" runat="server" onclick="CheckAll(this);"
                                            ToolTip="Delete Test template item" Text="&nbsp;&nbsp;&nbsp;Action" />

Sample not work for me:
.checkbox  {
    background: url(../images/checkbox.gif) no-repeat;
}

.checkbox  {
    background: url(../images/checkbox.gif) no-repeat !important;
}

.RadGrid .rgMasterTable input[type=checkbox]
{
   background: url(../images/checkbox.gif) no-repeat !important;
}

.RadGrid .checkbox 
{
   background: url(../images/checkbox.gif) no-repeat !important;
}
.RadGrid_Default .checkbox 
{
   background: url(../images/checkbox.gif) no-repeat !important;
}

Thanks,
Muhammad Waseem
the telerik Team