If specify RowIndicator.stateVisible as true, you can additionally display the state cell which displays the state of the data row on the left side of each cell of RowIndicator.
The state cell is basically displayed with the style, such as Background Color specified in Style Set of each state. You can update, append or delete the row and change the colors by each state below. Please refer to Color Overview page about how to specify the colors.
The default style set of the state cell can be specified through stateStyles, and the style of each state can be specified additionally through RowIndicator.createdStyles, updatedStyles, deletedStyles separately.
grdMain.setRowIndicator({
createdStyles: { background: "#f00" },
updatedStyles: { background: "#00f" },
deletedStyles: { background: "#333" }
});
Besides the basic way to display the cell background color differently, you can specify GridStyles.shapeName to display the shape of each state. And, you can also specify iconIndex and RowIndicator.stateImageList to display the image icon of each state.
In order to specify the icon, ImageList to be specified in stateImageList should be registered in the grid first. And, if iconIndex is specified, shapeName will be ignored.
// shapes
grdMain.setRowIndicator({
stateStyles: { background: "#f8f8f8" },
createdStyles: { shapeName: "plus", shapeColor: "#f00" },
updatedStyles: { shapeName: "circle", shapeColor: "#00f", shapeSize: "70%" },
deletedStyles: { shapeName: "minus", shapeColor: "#333" }
});
// icons
grdMain.setRowIndicator({
stateImageList: "stateIcons",
createdStyles: { iconIndex: '0' },
updatedStyles: { iconIndex: '1' },
deletedStyles: { iconIndex: '2' }
});
In some cases, a text displaying the state can be more clear than an icon or a shape. If specify RowIndicator.createdLabel, updatedLabel and deletedLabel separately, the icon and shape settings will be ignored and these state labels will be displayed instead.
grdMain2.setRowIndicator({
createdLabel: "C",
updatedLabel: "U",
deletedLabel: "D"
});