TabSheetSettings.DynamicExpansion

Syntax

DynamicExpansion: boolean;

Description

The DynamicExpansion property determines whether rows or columns increase dynamically when the last filled cell is reached.

Comments

Available values:

The property value is set in the TabSheet Constructor or using the setDynamicExpansion method and it is returned using the getDynamicExpansion method.

Example

To execute the example, use the HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>TabSheet</title>
    <script src="../build/PP.js" type="text/javascript"></script>
    <script src="../build/PP.TabSheet.js" type="text/javascript"></script>
    <link href="../build/PP.css" rel="stylesheet" type="text/css" />
</head>
 
<script type="text/javascript">
    // Create a table
    function createTabSheet() {
        // Set the structure, cell values and table style
        var dataSource = {
            "Structure": {"@MUR": 1,"@MUC": 2,"DefaultRow": {"@H": 50},"DefaultColumn": {"@W": 100}
            },
            "Cells": {
                "Cell": [
                    {"@T": "0", "@L": "0", "CD": {"@FT": "16905"}},
                    {"@T": "0", "@L": "1", "CD": {"@FT": "3912"}},
                    {"@T": "0", "@L": "2", "CD": {"@FT": "9242"}},
                    {"@T": "1", "@L": "0", "CD": {"@FT": "19281"}},
                    {"@T": "1", "@L": "1", "CD": {"@FT": "5315"}},
                    {"@T": "1", "@L": "2", "CD": {"@FT": "14031"}}
                ]
            },
            "Styles": {
                "Style": [
                    {
                        "Text": { "@VA": 1 },
                        "Fill": { "@C": "#D2DFEE" },
                        "Font": { "@F": "Arial", "@S": 12 },
                        "Borders": {
                            "Border": [
                                { "@I": 2, "@S": 0, "@C": "#FFFFFF", "@W": 2 },
                                { "@I": 3, "@S": 0, "@C": "#FFFFFF", "@W": 2 },
                                { "@I": 4, "@S": 0, "@C": "#FFFFFF", "@W": 2 },
                                { "@I": 5, "@S": 0, "@C": "#FFFFFF", "@W": 2 }
                            ]
                        }
                    }
                ]
            },
        };
        // Set table parameters
        tabSheet = new PP.Ui.TabSheet({
            ParentNode: document.getElementById("table"),
            DataSource: dataSource,
            IsEditable: true,
            Width: 350,
            Height: 190,
            DynamicExpansion: true,
        });
        // Display to the console whether the number of rows or columns increases dynamically
        if (tabSheet.getDynamicExpansion() == true) {
            console.log("The number of row or columns increases dynamically");
        }
            else console.log("The number of rows or columns does not increase dynamically");
    }
</script>
<body onload="createTabSheet()">
    <div id="table"></div>
</body>
</html>

After executing the example, the html page will contain the table with vertical and horizontal scrolling to dynamically increase the number of rows or columns:

The console will display the message that the number of rows or columns increases dynamically when the last filled cell is reached.

If the DynamicExpansion property is set to False, the table is displayed to the lest filled cell:

See also:

TabSheetSettings