Centering Checkboxes in Radgrid

8 posts, 0 answers
  1. s
    s avatar
    8 posts
    Member since:
    Apr 2011

    Posted 05 May 2011 Link to this post

    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?
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 06 May 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. s
    s avatar
    8 posts
    Member since:
    Apr 2011

    Posted 06 May 2011 Link to this post

    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.
  5. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 11 May 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. Erin
    Erin avatar
    11 posts
    Member since:
    Jun 2012

    Posted 11 Jul 2012 Link to this post

    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!
  7. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 16 Jul 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. Erin
    Erin avatar
    11 posts
    Member since:
    Jun 2012

    Posted 17 Jul 2012 Link to this post

    Thank you!  Centering the checkboxes in all of the RadGrids was exactly what I wanted to do.
  9. <span>w</span>
    <span>w</span> avatar
    84 posts
    Member since:
    Jun 2012

    Posted 18 Jan 2013 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017