IG Checkbox Pro

To be able to change the styling of the checkbox it is important to understand how the plug-in is handled by an interactive grid. Checkboxes (or icons) visible to end-user look the same but in fact they are individual elements rendered in different situations by different controllers. These elements are rendered by the plug-in metadata procedure, the plug-in item, apex.item namespace and interactive grid. Read below to learn what classes are applied to the checkboxes (or icons) visible to end-user and when it happens.

Inspect section Demo CSS to learn how colors of the icons are overridden.

The easiest approach is to add an extra class name in the Icon Checked and Icon Not Checked attributes.

A display container (div) is used when the column implementing the plug-in is not in edit mode. This container is used for checkboxes and icons rendered by metadata procedure, namespace apex.item and interactive grid add row.

The container uses an additional class uc-ig-display-container-null to make the checkbox or icons semi-transparent when the current value is NULL.

Class	Description
uc-ig-display-container	Always added
uc-ig-display-container-checked	Class is added to div when current value is equal value defined by the plug-in attribute Value When Checked
uc-ig-display-container-notchecked	Class is added to div when current value is equal value defined by the plug-in attribute Value When Not Checked
uc-ig-display-container-null	Class is added to div when current value is null

1 - 4

The plug-in container is used when the user activates edit mode on the checkbox column.

The container uses an additional class uc-ig-plugin-container-null to make the checkbox or icons semi-transparent when current value is NULL.

Class	Description
uc-ig-plugin-container	Always added
uc-ig-plugin-container-checked	Class is added to div when current value is equal value of the plug-in attribute Settings \ Value When Checked
uc-ig-plugin-container-notchecked	Class is added to div when current value is equal value of the plug-in attribute Settings \ Value When Not Checked
uc-ig-plugin-container-null	Class is added to div when current value is NULL

1 - 4

The metadata procedure renders cell content for the plug-in instance that is not yet in edit mode for the current cell.

The procedure is used to map the cell return value to the display value. The plug-in uses this functionality to render graphic visualization of the column flag which is a checkbox or icon. You can expect the result of the metadata procedure when the page loads or right after the interactive grid is saved.

Elements rendered by the metadata procedure will always have the uc-ig-element-metadata class and will have an additional class, uc-ig-element-metadata-icon or uc-ig-element-metadata-checkbox depending on the Type attribute.

Class	Description
uc-ig-element-metadata	Always added to span or input
uc-ig-element-metadata-checkbox	Class is added to span or checkbox when the plug-in attribute Type is set to HTML checkbox input
uc-ig-element-metadata-disabled	Class is added to span or checkbox when the plug-in attribute Settings \ Clickable in Read Mode is not checked
uc-ig-element-metadata-icon	Class is added to span or checkbox when the plug-in attribute Type is set to Icons

1 - 4

When the user activates edit mode for the checkbox column, the element is rendered with the classes below.

Class	Description
uc-ig-plugin	Class that is always added to span or checkbox
uc-ig-plugin-checkbox	Class is added to the input when Type is set to HTML checkbox input
uc-ig-plugin-icon	Class is added to the span when Type is set to Icons

1 - 3

When the user is done editing a column value and moves to the next cell, then the plug-in renders the display element using the displayValueFor method of the apex.item namespace.

Class	Description
uc-ig-element-display	Class is always added span or checkbox
uc-ig-element-display-checkbox	Class is added to checkbox when the plug-in attribute Type is set to HTML checkbox input
uc-ig-element-display-disabled	Class is added to span or checkbox when the plug-in attribute Settings \ Clickable in Read Mode is not checked
uc-ig-element-display-icon	Class is added to span when the plug-in attribute Type is set to Icons

1 - 4

When the user adds new rows to an interactive grid, the plug-in renders the follwoing display elements.

Class	Description
uc-ig-element-display-newrow	Class is always added span or checkbox
uc-ig-element-display-newrow-checkbox	Class is added to checkbox when the plug-in attribute Type is set to HTML checkbox input
uc-ig-element-display-newrow-icon	Class is added to span when the plug-in attribute Type is set to Icons

1 - 3

The following CSS rules have been used to override the default rules of the interactive grid.

/* opacity */
.uc-ig-element-display-newrow,
.uc-ig-display-container-null,
.uc-ig-plugin-container-null {
  opacity: 1!important;
}

/* edit null plug-in element*/
.uc-ig-plugin-container-null .uc-ig-plugin{
  color: red;
}

/* edit not null (checked or unchecked) plug-in element*/
.uc-ig-plugin {
  color: black;
}

/* interactive grid new row element*/
.uc-ig-element-display-newrow {
  color: magenta;
}

/* metadata display element */
.uc-ig-element-metadata {
  color: #1d82ff;
}

/* apex.item display element*/
.uc-ig-element-display {
  color: #00ba00;
}

/* remove focus outline in edit mode*/
.uc-ig-plugin:focus {
  outline: none
}

The results of these rules are shown below and can be tested live in the demo interactive grid.

Description	Container Class	Element Class
Interactive grid new row icon	uc-ig-display-container	uc-ig-element-display-newrow
Metadata icon	uc-ig-display-container	uc-ig-element-metadata
Plug-in icon with null value	uc-ig-plugin-container uc-ig-plugin-container-null	uc-ig-plugin
Plug-in icon with value not null	uc-ig-plugin-container	uc-ig-plugin
displayValueFor (apex.item) icon	uc-ig-display-container	uc-ig-element-display

1 - 5

Introduction

Intro

Icon styling

Element container (display)

Classes

Element container (edit)

Classes

Element (metadata)

Classes

Element (edit)

Classes

Element (apex.item)

Classes

Element (add row)

Classes

Demo CSS

Text

CSS

Text

Summary

Demo

IG container with padding

Example IG