News in versions: FastGrid 1.0, TreeGrid 17.0
FastGrid FastSheet ExamplesSamples DocumentationDoc Download Licensing Prices Buy Development
services
References References Contacts
TreeGrid Gantt chart SpreadSheet ExamplesSamples DocumentationDoc Download Licensing Prices Buy Contacts

7. Cell sizes, margins and span

Row, column and cells sizes, paddings, margins and spanning cells together

Source: 07-Sizes.js
  • Row height


    Row height is set by its

    Height

    attribute.
    By default, when the row Height is not set or is 0, the row calculates its height according to the cell contents. But not less than Cfg

    RowHeight

    value.
    The calculated row height and the resized or relative row height can be limited by its

    MinHeight

    and

    MaxHeight

    attributes.
    The row can be automatically resized to fill all the part available vertical space by

    Rel

    attribute.
    Too narrow row cuts texts in cells from bottom. It is possible to shift the text up and not cut it from top by

    OverflowTop

    and

    OverflowShift

    attributes.
  • Column width


    Column width is set by its

    Width

    attribute.
    By default, when the column Width is not set or is 0, the column calculates its width according to the cell contents. Column without cells or with cells with no content gets zero width.
    The calculated column width and the resized or relative column width can be limited by its

    MinWidth

    and

    MaxWidth

    attributes.
    The column can be automatically resized to fill all the part available horizontal space by

    Rel

    attribute.
  • Resizing


    Column width or row height can be resized by mouse dragging or by API if permitted by Cfg

    ResizingRows

    /

    ResizingCols

    attributes.
    The cell that permits dragging its edge to resize the row or column has set

    UseResize

    attribute. By default it is set for Header / Index rows and columns.
    To restrict resizing particular row or column set its

    NoResize

    attribute.
  • Padding


    Padding is space inside cell between text and cell border or edge.
    Vertical padding can be set only for the whole row by row attributes

    PaddingTop

    and

    PaddingBottom

    .
    Horizontal padding can be set to any cell by cell attributes

    PaddingLeft

    and

    PaddingRight

    .
  • Margin


    Margin is space outside cells between columns and rows.
    This margin space is empty and inactive. It can have set only background color by

    MarginTopColor

    ,

    MarginBottomColor

    ,

    MarginLeftColor

    ,

    MarginRightColor

    attributes.
    Vertical margin can be set only to the whole row by row attributes

    MargingTop

    and

    MarginBottom

    . It is possible to define next margin if the row is a) first / last row in part by TopMarginTop and BottomMarginBottom, b) first / last child row in its parent by FirstMarginTop and LastMarginBottom, c) first / last row in its block by BlockMarginTop and BlockMarginBottom.
    Horizontal margin can be set only to the whole column by column attributes

    MargingLeft

    and

    MarginRight

    . It is possible to define next margin if the column is a) first / last column in part by LeftMarginLeft and RightMarginRight, b) first / last child column in its parent by FirstMarginLeft and LastMarginRight, c) first / last column in its block by BlockMarginLeft and BlockMarginRight.
    If set margin, the surrounding rows / columns show their borders separate. It is possible to show only one border by Cfg attribute

    BorderCollapse

    .
    It is possible to show two margins with different colors between any rows or columns.
  • Spanned cells


    It is possible to span one cell to the next cells horizontally and vertically like in normal HTML table.
    Row span is set by row attribute

    RS

    as object with column ids and their rowspan values. The span value includes also hidden rows.
    Column span is set by row attribute

    CS

    as object with column ids and their colspan values. The span value includes also hidden columns.
    For column span it is possible to show more or all values from the spanned cells together, outside the table columns structure, using

    SpanWidth

    attribute.
    The cells can be spanned and split also dynamically by focusing the cells and clicking Span / Split buttons on toolbar or by API / actions.
    The columns / rows with spanned cells are by default merged to blocks to manipulate them together to not break the span. It can be controlled by Cfg

    BlockSpan

    attribute.
  • Align on scroll


    If cell is wider than the part width, it is possible to show its value always visible regardless on scroll by

    Align

    value 16 (left aligned), 17 (right aligned), 18 (centered).