jQuery UI Widgets Forums TreeGrid How can I define treeGrid with complex head.

This topic contains 3 replies, has 3 voices, and was last updated by  admin 3 weeks, 1 day ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • dtar
    Participant

    I need 3 Tr in thead with colspan.


    Yavor Dashev
    Participant

    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


    dtar
    Participant

    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.

    complex table header

    I hope the screenshot will be visible.

    Best Regards,
    dtar


    admin
    Keymaster

    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/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.