jQuery UI Widgets Forums Getting Started "hierarchy" and "columnGroups"

This topic contains 6 replies, has 3 voices, and was last updated by  Kyvaldenius 6 months, 1 week ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • "hierarchy" and "columnGroups" #114903

    Kyvaldenius
    Participant

    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

    "hierarchy" and "columnGroups" #114904

    admin
    Keymaster

    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/

    "hierarchy" and "columnGroups" #114905

    Kyvaldenius
    Participant

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

    "hierarchy" and "columnGroups" #114906

    Kyvaldenius
    Participant

    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

    "hierarchy" and "columnGroups" #114907

    Kyvaldenius
    Participant

    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

    "hierarchy" and "columnGroups" #114908

    Yavor Dashev
    Participant

    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

    "hierarchy" and "columnGroups" #114918

    Kyvaldenius
    Participant

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

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

You must be logged in to reply to this topic.