Is There any way to change the structure of pivot table ,actually pivot table populates data for all parent and child rows.Instead i want the data to be populated only for the child element like tree table structure …Is this achievable ?
Hello,
Could you please provide more details on your requirement?
Pivot table uses Treetable as its inner view and implements its structure and behaviour.
Hi @Helga, If you see the below snippet you can find a column named “continent”.Within “continent” column you can see all data are being populated in every row (eg : in the first row of continent u can see it concatenates all the values for republic and displays all the continent names togather eg :Europe.SouthAmerica,Africa etc ).But i dont want that to happen… only to my child element i the corresponding values to be displayed
https://snippet.webix.com/n8pyhc02
You can define a column template function where you can provide a specific visualization for different tree levels (stored as obj.$level in item data):
if (columns[i].id.indexOf("continent") != -1){
var col = columns[i].id;
columns[i].template = function(obj, common){
if(obj.$level == 1)
return "";
return obj[col];
}
}
@Helga … Thanks for the solution u have given. 
But i need the level which ever u have mentioned in snippet to be in the dynamic form for my entire pivot table .Like if user add another row @ level 3 then also level 1 and 2 should be empty i want it to be dynamically showing up .Only the child elements should be displayed with values and parent elements should be empty.The above example suits only for level one if i need to further drilled to level 2 0r 3 or back 1 also it accept it dynamically
The below image will explain what format of table i need
https://experience.sap.com/fiori-design-web-versions-1-26-and-1-28/v1-26/ui-components/tree-table/
Here you are: https://snippet.webix.com/mogvaepd
To make the template universal, you can rely on obj.$count rather than on obj.$level. The $count flag in item data indicates that this record has child elements, so you can safely render an empty string there.
@Helga . This is great thanks… But i want it to be incorporated with operation :“String” on the onBeforeRender function as show below.But i am not able to get the results as expected .
grida = webix.ui({
id:"pivot",
view:"pivot",
max: true,
footer: true,
structure: {
rows: ["form", "continent","name"],
columns: ["year"],
values: [{ name:"oil", operation:"max"}, { name:"gdp", operation:"max" }]
},
on:{
onBeforeRender:function(config){
let columns = config.header;
for (i = 0; i < columns.length; i++){
if (columns[i].id.indexOf("string") != -1){
columns[i].format = function(value){
return value;
}
}
if (i > 0){
var col = columns[i].id;
columns[i].template = function(obj, common){
if(obj.$count > 1) //has child records
return "";
return obj[col];
}
}
}
}
},
});
grida.addOperation("string", function(data) {
return data.length ? data.join(", ") : "";
});
grida.parse(pivot_dataset);
@Helga .In my application , we have used in the below format. Am getting the tree structure has expected but the data which is populated in all the rows are same i.e:For eg: continent columnis the last colum whixh is selected in the pivot configurator and it has “south america,america,india” as row values in the pivot grid then the same values are being populated to all the columns.
Note : I have changed this condition if(obj.$count >1) to if(obj.$count >= 1) then only the expected tree structure came up.Is this change is fine ?
componentDidMount() {
this.grid = webix.ui(this.tableConfig);
this.attachEvents();
this.grid.addOperation("string", function(data) {
//console.log("data::::"+data);
return data.length ? data.join(", ") : "";
});
// console.log("data:bb:::"+this.props.data);
this.grid.parse(this.props.data);
}
get tableConfig() {
const config = {
popup: {
width: 800, height: 600
},
//data: this.props.data,
container: this.refs.webixPivotGrid,
id: 'pivot',
view: 'pivot',
on:{
onBeforeRender:function(config){
let columns = config.header;
for (let i = 0; i < columns.length; i++){
if (columns[i].id.indexOf("string") != -1){
columns[i].format = function(value){
return value;
}
}
if (i > 0){
var col = columns[i].id;
columns[i].template = function(obj, common){
console.log("obj::::"+obj[col]);
if(obj.$count >= 1) //has child records
return "";
return obj[col];
}
}
}
}
},
}
Custom operation and template can be combined well: https://snippet.webix.com/zub2mtcm
And of course obj.$count > 0 is the correct condition as the $count field stores the number of child records.
@Helga .Thanks for the support .In the https://snippet.webix.com/zub2mtcm snippet which ever you have given ,it is applicable for continent column only .Can the same use case can be applied throughout the pivot table(to make template universal) along with custom operation . When i tired to add another column it is not working as expected.The snippet which i have tired is below
https://snippet.webix.com/k2wvwhem . Can you please suggest me a way
Then you need to provide the custom template for all the columns except the first one: https://snippet.webix.com/gprqv3wv
@Helga .Thank you so much. I got the pivot grid to be working in place as per our requirement…Thanks for the continuous support