Using jqxTrreGride with Row Details

[uinfobreraParticipant]

How can I add an extra row for each tree-grid data record? These are the columns I’d like to have in the extra row

columns: [
                 { text: 'Soggetto', dataField: 'Soggetto', width: 200 },
                  { text: 'LastName', dataField: 'Numero_Inventario', width: 200 },
                  { text: 'Luogo_ripresa', dataField: 'Luogo_ripresa', width: 120 },
                ]

Here the jqxgrid I use:

 $("#jqxgrid").jqxGrid(
            {
                theme: 'ui-sunny',
                //theme: 'fresh',
                width: 1820,
                source: dataAdapter,
                groupable: true,
                pageable: false,
                //pageable: true,
                height: 680,
                columns: [
                  { text: 'Unità archivistica ', datafield: 'Unità_archivistica_1', width: 280 },
			   	  { text: '', datafield: 'Unità_archivistica_2', width: 200 },
                  { text: '', datafield: 'Unità_archivistica_3', width: 200 },             
                  { text: 'Numero Inventario', datafield: 'Numero_inventario', width: 180 },
                  { text: 'Luogo Ripresa', datafield: 'Luogo_ripresa', width: 210 },
                  { text: 'Soggetto', datafield: 'Soggetto', width: 600 },
                ],

                groups: ['Unità_archivistica_1', 'Unità_archivistica_2', 'Unità_archivistica_3', /*'Unità_archivistica_4','Unità_archivistica_5',*/'Soggetto', 'Luogo_ripresa', 'Numero_inventario' ]
            });
            $("#expand").jqxButton({ theme: theme });
            $("#collapse").jqxButton({ theme: theme });
            $("#expandall").jqxButton({ theme: theme });
            $("#collapseall").jqxButton({ theme: theme });

            // expand group.
            $("#expand").on('click', function () {      
                var groupnum = parseInt($("#groupnum").val());
                if (!isNaN(groupnum)) {
                    $("#jqxgrid").jqxGrid('expandgroup', groupnum);
                }
            });

            // collapse group.
            $("#collapse").on('click', function () {
                var groupnum = parseInt($("#groupnum").val());
                if (!isNaN(groupnum)) {
                    $("#jqxgrid").jqxGrid('collapsegroup', groupnum);
                }
            });

            // expand all groups.
            $("#expandall").on('click', function () {
                $("#jqxgrid").jqxGrid('expandallgroups');
            });

            // collapse all groups.
            $("#collapseall").on('click', function () {
                $("#jqxgrid").jqxGrid('collapseallgroups');
            });

            // trigger expand and collapse events.
            $("#jqxgrid").on('groupexpand', function (event) {
                var args = event.args;
                $("#expandedgroup").text("Group: " + args.group + ", Level: " + args.level);
            });

            $("#jqxgrid").on('groupcollapse', function (event) {
                var args = event.args;
                $("#collapsedgroup").text("Group: " + args.group + ", Level: " + args.level);
            });

Is it possible to regulate the row’s height of a jqxtreegrid?
Thanks a lot in advance

[DimitarParticipant]

Hello uinfobrera,

In your code you are using jqxGrid, not jqxTreeGrid. In jqxGrid, rows can be added with the method addrow (example) and rows’ height can be adjusted with the property rowsheight (example). We also have row details/nested grids functionality demos. jqxTreeGrid also has this functionality: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/javascript-tree-grid-row-details.htm?arctic.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts