I am trying to build a pivot grid with both numerical data and in string format too .But i can find only operations like sum,max,min which i dont need for string values.So what can be done to see the exact same string without any math operations being peformed.
There is no built-in method for such task, as Webix Pivot is initially intended for numeric data aggregation/analysis.
But still, you can add a custom operation for string values and create your own pattern of data aggregation.
For example, here’s a way to show the data as-is:
But please note also that Pivot columns have the numeric format for visualization.
For now, the format for a separate operation can be modified directly in columns config via pre-render customization, as implemented above.
Thanks !!! This helped me out to solve the issue
In the below given snippet,you have set { name:“continent”, operation:“string” }.But when i try to do the same .am facing issue like “Uncaught TypeError: e.operations.get(…) is not a function”.Other than string for other defined operators like "max ",“min”,“count” it is working.For user defined operations alone it is not working
https://snippet.webix.com/n8pyhc02
The point is that operation has to be declared before data loading. Otherwise, data processing will start first and the constructor will try to call the non-existent operation to calculate the values. The correct syntax is
grida.addOperation("string", function(data) { ... });
grida.parse(data);
// or grida.load("/data_url");
Ya ok Thank you Lis…Got your point.Actually we are using reactjs with webix intergated to it.So not able to figure out where to add the addOperation method and then to add the parse method as you mentioned above.Tired adding it componentDidMount and componentWillMount methods but it didnt resolve the issue
In general, there is no need to move these operations to a separate handler from the ui (constructor) call, as Webix operations here do not require to catch the initialization of the component in React DOM.
In other words, addOperation + parse have to be performed after calling webix.ui (Pivot init) - AFAICS, this is the only requirement.
componentDidMount() {
this.grid = webix.ui(this.tableConfig);
this.attachEvents();
this.grid.addOperation("string", function(data) {
return data.length ? data.join(", ") : "";
});
this.grid.parse(this.props.data);
}
get tableConfig() {
const config = {
popup: {
width: 800, height: 600
},
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;
}
}
}
}
},
data: this.props.data,
container: this.refs.webixPivotGrid,
id: 'pivot',
view: 'pivot',
}
if (this.props.config) {
for (let key in this.props.config) {
config[key] = this.props.config[key]
};
};
return config;
}
This is how i have added the addOperation() and parse method in my code
Hi Lis, figured out wat was the issue (data: this.props.data,) the data which i mentioned in bracket is the issue…Once we removed it got the string operation as default operation in the column header…Thanks LIs
Is there any way to get the data to be displayed for the respective row child element only instead of data(values) being repeated and displayed for all the parent ,child,sub-child row elements ?
As well as in the regular treetable, it is possible to assign the template to the columns which can hide the values in cells depending on the row level and some other parameters.
For example, each item in the aggregated dataset has the ‘system’ properties $count and $level, so you can use them to provide different rendering logic for different levels of data.
Such template can be assigned in the pre-render customization of the Pivot. In general, this event handler gets the new Pivot config including the datatable columns, which configuration can be modified as you need.
For example: https://snippet.webix.com/cqscagme
