"hierarchy" and "columnGroups"

[KyvaldeniusParticipant]

Good afternoon, I ran into a problem.
using jqxTreeGrid

how do i combine “hierarchy” and
“columnGroups”

to display the employees of the department:
id perent id name
1 null company
2 1 department of the enterprise
employees
3 1 department of the enterprise 2
employees

[adminKeymaster]

Hi Kyvaldenius,

This example https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/javascript-tree-grid-columns-hierarchy.htm?light shows how to use the “columnGroups” feature of our TreeGrid. The grouping of the columns is defined by the “columnGroups” array.

Best regards,
Peter Stoev

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

[KyvaldeniusParticipant]

sorry, I made a mistake, “groupingDataFields” and “hierarchy”

[KyvaldeniusParticipant]

https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/javascript-tree-grid-grouping.htm?material-green

similar to this example, but only so that there is a hierarchy inside the group

in this example, Countries-> Cities-> streets

[KyvaldeniusParticipant]

as a result, the appearance was
—————————————
|id| perentid |NameDepartment | people…

My compani
—–HR department
———-Jack 08.01.2000
———-Nick 08.01.2000
———-Sten 08.01.2000
—-Worker department
——Clark 08.01.2000
——Worker department on strit
———-Jacks 08.01.2000
———-Nicks 08.01.2000
———-Fil 08.01.2000

is it possible?
grouping rows to tree – this seems to be the name of this approach

[Yavor DashevParticipant]

Hi Kyvaldenius,

I have used this https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/javascript-tree-grid-grouping.htm?material-green example as a base in order to showcase you how to change the hierarchy in jqxTreeGrid component.
Just like in one of your post I have made the hierarchy in the example like this : Country–> City –> Company Name.
Here is the modified code:

 <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName' },
                    { name: 'ContactName', map: 'm\\:properties>d\\:ContactName' },
                    { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle' },
                    { name: 'City', map: 'm\\:properties>d\\:City' },
                    { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode' },
                    { name: 'Country', map: 'm\\:properties>d\\:Country' }
                ],
                hierarchy:
                    {
                        groupingDataFields:
                            [
                                {
                                    name: "Country"
                                },{
                                    name:"City"
                                },
                                {
                                    name:"CompanyName"
                                }
                            ]
                    },
                root: "entry",
                record: "content",
                id: { name: "CustomerID", map: "m\\:properties>d\\:CustomerID" },
                url: "../../sampledata/customers.xml"
            };
            // create data adapter.
            var dataAdapter = new $.jqx.dataAdapter(source);

            // create Tree Grid
            $("#treegrid").jqxTreeGrid(
            {
               width:  getWidth("TreeGrid"),
                source: dataAdapter,
                pageable: true,
                columnsResize: true,
                altRows: true,
                icons: function (rowKey, rowData) {
                    var level = rowData.level;
                    if (level == 0) {
                        // each group row has a label member that contains the information displayed on the group row.
                        var country = rowData.label;
                        return "../../../images/" + $.trim(country.toLowerCase()) + ".png";
                    }
                    return false;
                },
               
                columns: [
                  
                  { text: 'Company Name', dataField: 'CompanyName', minWidth: 100,width:'auto' },
                  { text: 'Contact Name', dataField: 'ContactName', width:'auto' },
                  { text: 'Contact Title', dataField: 'ContactTitle', width:'auto'},
                  { text: 'Postal Code', dataField: 'PostalCode', width:'auto' }
                ]
            });
        });
    </script>

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

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

[KyvaldeniusParticipant]

thank. I solved the problem by changing the data that I display

[Author]

Posts