How can I define treeGrid with complex head.

[dtarParticipant]

I need 3 Tr in thead with colspan.

[Yavor DashevParticipant]

Hi dtar,

I will have to ask you to share a bit more context of your use case and scenario in order to be able to give you a proper advice.

Also I would recommend you taking a look at the demo regarding the header template property of the jqxTreeGrid`s columns.

Link for the demo:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/javascript-tree-grid-header-template.htm?light

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[dtarParticipant]

Hello,

I’m trying to configure a tree grid with a more complex multiline header with elements spanning different colspans.
The header is basically a mix of utility information and calendar with months as a tr in thead, calendar week as a tr in thead and weekday, day information as a third tr in thead.

I hope the screenshot will be visible.

Best Regards,
dtar

[adminKeymaster]

Hi dtar,

You can use the TreeGrid’s columnGroups property to define column hierarchy. In the columns array, you specify the columnGroup. Then in the columnGroups array declaration, you specify each column group’s name, text and parent. Example: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/javascript-tree-grid-columns-hierarchy.htm?light.

      columns: [
                  { text: 'Supplier Name', cellsAlign: 'center', align: 'center', dataField: 'SupplierName', width: 200 },
                  { text: 'Name', columngroup: 'ProductDetails', cellsAlign: 'center', align: 'center', dataField: 'ProductName', width: 200 },
                  { text: 'Quantity', columngroup: 'ProductDetails', dataField: 'Quantity', cellsFormat: 'd', cellsAlign: 'center', align: 'center', width: 80 },
                  { text: 'Freight', columngroup: 'OrderDetails', dataField: 'Freight', cellsFormat: 'd', cellsAlign: 'center', align: 'center', width: 100 },
                  { text: 'Order Date', columngroup: 'OrderDetails', cellsAlign: 'center', align: 'center', cellsFormat: 'd', dataField: 'OrderDate', width: 100 },
                  { text: 'Order Address', columngroup: 'OrderDetails', cellsAlign: 'center', align: 'center', dataField: 'OrderAddress', width: 100 },
                  { text: 'Price', columngroup: 'ProductDetails', dataField: 'Price', cellsFormat: 'c2', align: 'center', cellsAlign: 'center', width: 70 },
                  { text: 'Address', columngroup: 'Location', cellsAlign: 'center', align: 'center', dataField: 'Address', width: 120 },
                  { text: 'City', columngroup: 'Location', cellsAlign: 'center', align: 'center', dataField: 'City', width: 80 }
                ],
                columnGroups: 
                [
                  { text: 'Product Details', align: 'center', name: 'ProductDetails' },
                  { text: 'Order Details', parentGroup: 'ProductDetails', align: 'center', name: 'OrderDetails' },
                  { text: 'Location', align: 'center', name: 'Location' }
                ]

Ref: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatatable/javascript-datatable-columns-hierarchy.htm?light.

Hope this helps.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts