Pivot table - way to have initial display with all rows collapsed

Webix JS
#1

I have a pivot table that has a two-level hierarchy of its rows. However it is a large enough report that I would much prefer it to initially open with everything collapsed. How can I do this?

#2

You can apply the closeAll() function to the inner treetable just after pivot initialization. It will close all the open treetable nodes.

webix.ui({
     view:"pivot", 
     id:"mypivot",
     ....
});

$$("mypivot").$$("data").closeAll();
#3

I cant use that .closeAll(); like i know, closeAll() is using for tree which has data : , not like pivot which has structure.

Am i wrong ? Can anyone help me ?

  grida = new webix.ui({
            container:"testA",
            id:"pivot",
            view:"pivot",
            url:"<?php echo base_url(); ?>assets/common/data.json",
            max: true,
            structure: {
                rows: ["SO", "Material"],
                columns: ["JumlahData"],
                values: [{name:"ReqOrder", operation:"sum"},{ name:"CallOff", operation:["sum"]},{ name:"Shipment", operation:["sum"]},{ name:"Clearance", operation:["sum"]},{ name:"Received", operation:["sum"]}],
                filters:[{ name:"Account", type:"select"},{ name:"Project", type:"select"},{ name:"SO", type:"select"},{ name:"Material", type:"select"}]
            }

  });

 $$("pivot").$$("structure").closeAll();

.

But nothing happens, i cant collapse all my “SO”

#4

In essence, Pivot houses a tree with data inside, and $$(“mypivot”).$$(“data”) line helps access the object of this tree to work with it.

And the closeAll() closes all the tree nodes. Is that what you need?

#5

did this ever get solved? I would really like to use this library but it seems like the support I a little lacking.

I to have a pivot table that I want to collapse all the fields on load and have tried to apply the above but cannot get it to work.

#6

Hello,

As far as I can see, the provided solution still works. Please, check the related snippet: https://snippet.webix.com/7zmylr00

As to the support, we’re always watching the forum during the day and resolve the questions by their turn regarding the priority of the developing process and official support tickets. But still, the forum is а public place where users can share their issues, solutions and suggestions freely - we appreciate any activity.

#7

Maybe my situation is different as I’m using csv data to populate the pivot table.

webix.ready(function(){
	webix.ui({
		popup:{
			width:800, height:600
		},
		container:"pivotA",
		id:"pivot",
		view:"pivot",
		height:700,
		width:1300,
		yScaleWidth:450,
		totalColumn: true,
		footer: true,
		separateLabel: false,
		max: false,
		structure: {
			//groupBy: "data5",
			rows: ["data0","data1","data2","data3","data6","data8"],
			columns: ["data9"],
			values: [{name:"data10", operation:"sum", color: "#36abee"}],
			filters:[{name:"data0", type:"select"},{name:"data1", type:"select"},{name:"data2", type:"select"},{name:"data3", type:"select"}]
		},
		fieldMap: {
			"data0": "VP",
			"data1": "DO",
			"data2": "Banner",
			"data3": "Site",
			"data4": "Site Name",
			"data5": "Vendor",
			"data6": "Vendor Name",
			"data7": "Article",
			"data8": "Article Name",
			"data9": "Week",
			"data10": "Number of Records"
		},
		datatype: "csv",
		url: "/data/atl-dsd-data.csv"
	});

$$(“pivot”).$$(“data”).closeAll();
});

#8

With async data you need to wait until the data is loaded, then close all nodes:

view:"pivot",
url:"..",
ready:function(){ 
    this.$$("data").closeAll();
}

Check, please: https://snippet.webix.com/5bb8wg0u

#9

fantastic really appreciate the help this worked perfect.

#10

Is it possible to get this to apply on every time a filter is applied?