default collapsible group in handson table

1.3k views Asked by At

How to make my handson table group to collapsible by default. It is opened by default

I have below code js and html code. fiddle

function getCarData() {
        return [ [ 'col1', "val2", "val3", "val4", "=SUM(E2:E4)" ],
                [ 4, 0, 3, 2, '=SUM(A2,B2,C2,D2)' ],
                [ 4, 0, 3, 2, '=SUM(A2,B2,C2,D2)' ],
                [ 4, 0, 3, 2, '=SUM(A2,B2,C2,D2)' ]
                ];
    }

    var container = document.getElementById('example1'), hot; 


    hot = new Handsontable(container, {
        data : getCarData(),
        colHeaders : true,
        rowHeaders : true,
        contextMenu : true,
        manualColumnResize: true,
         minSpareRows: 1,
          groups: [
            {
              rows: [1, 3]
            }
         ],
        formulas : true,
        columns: [ { type: 'numeric'},
                     { type: 'numeric'},{ type: 'numeric' },{ type: 'numeric' },{ type: 'text',readOnly: true}]

    });
2

There are 2 answers

4
Anthony Hilyard On BEST ANSWER

While there isn't really any built-in functionality to accomplish what you are looking for, there is a hackish workaround that I have used in the past. Take a look at this fiddle: http://jsfiddle.net/fk4uohjk/

As you can see, one of the groups is collapsed when the page loads. This is due to the following line:
hot.runHooks("beforeOnCellMouseDown", {"target": $("#htCollapseRowsFromLevel-1")[0]});

The beforeOnCellMouseDown hook is expecting a mouse event as the first parameter, but instead we can just give it a dictionary with the target attribute set to the group button dom element that corresponds to the group we want to collapse.

0
fsalazar_sch On

Just add to the parameters in hot, which columns you don't want to resize i.e: If you want to resize only the first 3 columns you may do:

  manualRowResize: true,
    ...
    colWidths: [, , , x, x],
//x can be any colWidth number
   });

If you want the first and fourth column

  manualRowResize: true,
    ...
    colWidths: [, x, x, , x],
   });