Customizing QtitanDataGrid via Style Sheet

QtitanDataGrid supports a powerful mechanism that allows you to customize the appearance via Style Sheet (CSS). The methodology for using CSS in the world of Qt is described in the article under this link - http://doc.qt.io/qt-5/stylesheet.html Customization of QtitanDataGrid is very similar to the customization of the regual QTableView, but it can contain differences.

To describe the CSS rules that relate to QtitanDataGrid, the keyword Qtitan–Grid is used.

Box Model

You can control the boxing model without any restrictions. The box model describes in detail here http://doc.qt.io/qt-5/stylesheet-customizing.html#box-model

Qtitan--Grid {
        border: 3px solid darkBlue;
        padding: 2px;
        margin: 3px;
}

Qtitan--Grid {
        margin: 3px;
        padding: 3px;
        border-style: native;
}

Pallete

The entire base of palette can be redefined using the Style Sheet.

Qtitan--Grid {
        color: darkRed;
        selection-background-color: yellow;
        selection-color: white;
        alternate-background-color: darkGray;
        background-color: gray;
}

Color for the grid lines

Use the rule to redefine the color.

Qtitan--Grid {
        gridline-color: transparent;
}

To customize header section special sub-control selector section is used.

Qtitan--Grid::section {
        color: white;
        background-color: qlineargradient(x1 : 0, y1 : 0, x2 : 0, y2 : 1,
            stop : 0 #616161, stop: 0.5 #505050,
            stop: 0.6 #434343, stop:1 #656565);
        border: 3px solid darkBlue;
    }

Rule to customize header section that has a focus.

Qtitan--Grid::section:focus {
        background-color: red;
        border: 3px solid darkRed;
    }

Cell

To customize grid cell special sub-control selector item is used.

Qtitan--Grid::item {
    background-color: red;
}

Rule to customize cell that has a focus.

Qtitan--Grid::item:focus {
        background-color: yellow;
        border: 3px solid white;
    }

Focus frame

Additionally, you can override the display of a special frame that highlights the cell that has focus. The rule also applies to a frame that highlights the grouping row.

Qtitan--Grid:focus {
    outline: 3px dotted blue;
}

Fixed separator customization.

Qtitan--Grid {
    qproperty-fixedSeparatorWidth: 5;
    qproperty-fixedSeparatorColor: green;
    qproperty-fixedSeparatorStyle: dot-dash;
}

Group header customization.

Qtitan--Grid {
    qproperty-headerHeight: 70;
    qproperty-headerTextColor: red;
    qproperty-headerTextFont: "serif,-1,17,5,0,0,0,0,0,0";

    qproperty-headerTextFontSize: 20;
    qproperty-headerTextFontFamily: "Verdana";

    qproperty-headerBrush: darkGray;
    qproperty-headerBorderColor: darkRed;
    qproperty-headerBorderSize: 1;
    qproperty-headerBorderStyle: dot-dash;
}

Footer summaries and group summaries customization.

Qtitan--Grid {
    qproperty-summaryItemTextColor: blue;
    qproperty-summaryGroupItemTextColor: green;

    qproperty-summaryItemBackgroundColor: green;
    qproperty-summaryGroupItemBackgroundColor: blue;

    qproperty-summaryItemHeight: 30;
    qproperty-summaryGroupItemHeight: 70;
}

Customization for groups. Setting allows the number of group's levels keep expanded and ability to set colorization for group level.

Qtitan--Grid {
    qproperty-keepGroupLevelExpanded: 3;

    qproperty-groupColorLevel0: red;
    qproperty-groupColorLevel1: darkRed;
    qproperty-groupColorLevel2: blue;
    qproperty-groupColorLevel3: darkBlue;
    qproperty-groupColorLevel4: white;
    qproperty-groupColorLevel5: white;
    qproperty-groupColorLevel6: white;
    qproperty-groupColorLevel7: white;
}

Customization for grid icons.

Qtitan--Grid {
    qproperty-sortAscendingIcon: url(:/res/hand-pointing-up.png);
    qproperty-sortDescendingIcon: url(:/res/hand-pointing-down.png);
}

Customization for ColumnsQuickCustomization popup menu.

Qtitan--Grid > Qtitan--GridColumnsQuickCustomization, Qtitan--Grid > Qtitan--GridColumnsQuickCustomization * {
   background-color: darkGray;
   color: red;
   font: 12pt "Times New Roman";
}

Customization for ColumnFilterPopup popup menu.

Qtitan--Grid > Qtitan--GridColumnFilterPopup, Qtitan--Grid > Qtitan--GridColumnFilterPopup * {
   background-color: darkGray;
   color: red;
   font: 12pt "Times New Roman";
}

Contents