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

GridClientSelectColumn styling

1 Answer 217 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Van
Top achievements
Rank 1
Iron
Iron
Van asked on 27 May 2020, 06:05 PM

 

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??

 

 

 

1 Answer, 1 is accepted

Sort by
0
Doncho
Telerik team
answered on 01 Jun 2020, 09:15 AM

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.
Tags
Grid
Asked by
Van
Top achievements
Rank 1
Iron
Iron
Answers by
Doncho
Telerik team
Share this question
or