GridClientSelectColumn styling

2 posts, 0 answers
  1. Van
    Van avatar
    12 posts
    Member since:
    Oct 2019

    Posted 27 May Link to this post

     

    We cannot get the client select column checkbox to style according to our needs on Chrome.  On IE 11, Edge and Firefox the style of the checkbox looks the way we want it.  However on Chrome the style shows up differently.   See attachment.  We are using a custom skin,  and have tried to force the checkbox style to look like IE 11/Edge/Chrome, however none of our attempts has corrected the styling.  We don't want to change the styles in our custom button skin (created on Telerik site).  Is there something special about the "GridClientSelectColumn" that makes is NOT like  a standard checkbox control for styling??

     

     

     

  2. Doncho
    Admin
    Doncho avatar
    26 posts

    Posted 01 Jun Link to this post

    Hi Van,

    In the HTML structure, GridClientSelectColumn renders <input type="checkbox"> elements in the table cells (<td> elements). Unfortunately the <input type="checkbox"> HTML element cannot be styled.

    One option is to hide it by setting its opacity to 0 and place your own custom checkbox over, see How TO - Custom Checkbox article. Here is an article that I found that may also help: How to style checkbox without using any CSS framework.

    To apply styles to the checkbox in the GridClientSelectColumn you can use the ItemCssClass property to assign a custom class to the rendered <td> element

    Sample

    <telerik:GridClientSelectColumn ItemStyle-CssClass="myClass"></telerik:GridClientSelectColumn>

    CSS

    .myClass input{
        opacity:0;
    }

    I hope this will help.

    Kind regards,
    Doncho
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top