Version

igCheckboxEditor Styling and Theming

In this topic we are going to see how to customize the igCheckboxEditor.

Changing the Icon Image

Lets start with the icon image. As you can see from the image below the default image for the checked state of the control is check icon, but that doesn't mean you should stick to it. The igCheckboxEditor allows you to use custom check state image. You can choose one of the jQuery UI Icons or you can set your own custom one. How to accomplish this? Just use the iconClass property and set it to a custom class to put you own image or use the JQuery classes. What is more, if intend to use the width and height properties to change the size of the check box editor, it is recommended to put your own custom class with custom image that will fit the sizes that you have set.

Default Icon Image

Using jQuery UI Icons

In order to use the jQuery Icons you have to choose one and then set its class to the iconClass property.

JavaScript:

$('#checkInput').igCheckboxEditor({
    iconClass: "ui-icon-star"
});

Using a custom image

Probably you would want to have the option to use a custom image instead of the default one. That is not a problem for Infragistics' igCheckboxEditor control. All you have to do is create your own CSS class and use it as a value for the iconClass property.

CSS:

.ui-state-default .ui-icon.myIcon,
.ui-state-hover .ui-icon.myIcon {
    background: url("check.png");
    width: auto;
    height: auto;
}

JavaScript: 

$('#checkInput').igCheckboxEditor({
    width: 50, 
    height: 50,
    iconClass: "myIcon"
});

Changing the size of the editor

Size Property

Another option that comes in handy when you want to customize the control is the size property. The size property takes four values and can deffer from very small to large. The default size is "normal". In the table below you can see how they look.

Image Size
very small
small
normal
large

JavaScript:

$('#checkInput').igCheckboxEditor({
    size: "verysmall"
});

Width and Height

Apart from the size option you can change the size of the igCheckboxEditor control by using the width and height properties. Pay attention that those properties overwrite the size option. Another thing that you should note, when you change the width and the height properties, is that the icon will always be positioned at the center of the DIV element.

JavaScript:

$('#checkInput').igCheckboxEditor({
    width: 60, 
    height: 60
});

You can set the dimensions through CSS. Using this approach will allow you to apply additional CSS rules.

CSS

.ui-checkbox-container {
    width: 60;
    height: 60;
}

Using ThemeRoller

The igCheckboxEditor control can also be fully styled using the jQuery UI ThemeRoller.

If you want to use the ThemeRoller follow those simple steps:

  1. Go to jQuery ThemeRoller and choose a theme.
  2. Download the theme and unzip the zip file and take the jquery-ui.min.css file and replace the infragistics.theme.css.
  3. Make sure that your references are correct and run your project.

Related Topics

View on GitHub