SMART datagrid v.1 > Examples

Column Grouping  Example  準備中...

SMART datagridグリッドのカラムグループは関わりのあるカラム達を集めて多様な方法で配置することができる。 カラムグループには一つ以上の下位カラム達をcolumnsプロパティーを通して指定できて、 カラムグループは下位のカラム達を横、または縦に配置する。 そして、カラムグループもカラムと同じく下位カラムとして他のグループに含まれることができるので、複雑な形のレイアウトも可能である。 

このサンプルではHello Gridサンプルで扱ったデータセットとカラム達をまた利用する。 下のコードでnameがCustomerGroup, DateGroupのカラムがカラムグループであり、 設定プロパティーの中にcolumnsが存在すればグリッドがカラムグループの設定情報として判断してColumnGroup客体を生成する。 また、typeの値を"group"で明示してカラムグループにすることもできる。 

    var columns = [
        {
            "name": "ProductName",
            "fieldName": "product_name",
            ...
        }, {
            "name": "CustomerGroup",
            "width": 200,
            "layout": "vertical",
            "columns": [
                {
                    "name": "Country",
                    "fieldName": "country",
                    ...
                    }, {
                        "name": "ChildGroup",
                        "layout": "horizontal",
                        "columns": [
                            {
                            	"name": "CustomerId",
                            	"fieldName": "customer_id",
                            	...
                            }, {
                            	"name": "CustomerName",
                            	"fieldName": "customer_name",
                            	...
                            }, {
                            	"name": "Phone",
                            	"fieldName": "phone",
                            	...
                            }
                        ]
                    }
                }
            ]
        }, {
            "name": "Currency",
            "fieldName": "currency",
            ...
        }, {
            "name": "DateGroup",
            "type": "group",
            "width": "200",
            "columns": [
                {
                	"name": "OrderDate",
                	"fieldName": "order_date",
                	...
                },  {
                	"name": "ShipDate",
                	"fieldName": "ship_date",
                	...
                }
            ]
        }
    ];

カラムグループの配置の方向はColumnGroup.layoutプロパティーで変更できる。 上の"Change Layout"ボタンをクリックすると*DateGroup"の配置の方向を横から縦に、縦から横に変える。 

    var column = grdMain.columnByName('DateGroup');
    if (column) {
        column.setLayout(column.layout() == 'vertical' ? 'horizontal' : 'vertical');
    }

また、下位カラム達のヘッダーを表示させない場合もある。 上の"Column Headers"ボタンをクリックするとColumnGroup.hiddenChildHeadersプロパティーを利用して 、 *DateGroup"の下位カラム達ののカラムヘッダーを隠したり、表示させたりする。 

    var column = grdMain.columnByName('DateGroup');
    if (column) {
        column.setHiddenChildHeaders(!column.hiddenChildHeaders());
    }

ソースを見る 

See Also

Examples

GridView

GridDataSet.onRowInserted