Hi Team,
I have updated webix and pivot version from 3.1.1 to 4.1.0 but i am geeting error
Uncaught TypeError: Cannot read property ‘container’ of undefined
kindly do the needful
Hi,
The basic initialization of Pivot works as needed: http://webix.com/snippet/e21e7497
But version 3.1.1 is quite outdated and since last year there was a lot of changes and improvements. Some of them may affect to the old configuration. So can you please provide your code?
By the way, all changes are listed here
Please find below code
webix.ui({
id:"pivot",
container: "gridContainer",
view:"pivot",
height:400,
width:1000,
structure: {
rows: pivotRows,
columns: pivotColoumns,
values: pivotValues
},
on:{
onBeforeRender: function(config){
console.log("in123");
var columns = config.header;
alert(columns[i].id);
for(var i=0; i< columns.length;i++){
if (columns[i].id.match(/_Rank/i)){
columns[i].format = function(value) {
if (value=="6") return "1-3";
return value;
}
}
}
}
},
data:pivot_dataset
});
The only issue I see is columns[i].id outside the cycle. Otherwise, the configuration is valid:
Hi Listopad,
Thank you so much now working fine .
i have one query can we implement processing image during data manipulation or drag in row or column ,if possible kindly add processing image on below link
during data manipulation or drag in row or column
Can you please clarify, what kind of manipulation do you mean?
DnD available only within the popup. You can set your own template for dragged items as described here using the onViewInit event:
i have 5 lac record data set to load data it is taking time like 15 to 20 sec during load i want to show please wait… with in div
Pivot can be extended with a progress bar/icon:
webix.extend($$("pivot"), webix.ProgressBar);
$$("pivot").attachEvent('onBeforeLoad', function(){
this.disable();
this.showProgress({
type:"icon"
})
});
$$("pivot").attachEvent('onAfterLoad', function(){
this.hideProgress();
this.enable();
});
$$("pivot").load("../common/data.json")
Hi Listopad,
i use above code but it is not working for me i guess i am placing in wrong place can you please implement in below so i get better idea for understanding
Hi Listopad,
On load of function onbeforeload and onafterload function not calling so at my end progress bar not working please find below my code
webix.ui({
id:"pivot",
container: "gridContainer",
view:"pivot",
structure: {
rows: pivotRows,
columns: pivotColoumns,
values: pivotValues
},
on:{
onBeforeRender: function(config){
//console.log(pivot_dataset);
var columns = config.header;
for(var i=0; i< columns.length;i++){
if (columns[i].id.match(/_Rank/i)){
columns[i].template = function(obj, common, value) {
console.log(value);
if (obj.$count) return "";
if (value==1) return "1-3";
if (value==2) return "4-7";
if (value==3) return "8+";
if (value==184) return "8-10";
if (value==185) return "11+";
if (value==64) return "NA";
if (value==224) return "NR";
return value;
}
}
}
for(var i=0; i< columns.length;i++){
if (columns[i].id.match(/_Gap/i)){
columns[i].template = function(obj, common, value) {
if (obj.$count) return "";
return value;
/* if (value==15) return "1-3";
return value; */
}
}
}
}
},
data:pivot_dataset
});
webix.extend($$("pivot"), webix.ProgressBar);
$$("pivot").attachEvent('onBeforeLoad', function(){
alert("F1")
this.disable();
this.showProgress({
type:"icon"
})
});
$$("pivot").attachEvent('onAfterLoad', function(){
alert("F2")
this.hideProgress();
this.enable();
});
here alert is not coming that means onBeforeLoad and onAfterLoad function not calling
@ameet3444 as the webix.extend and the following event handlers are attached to the initialized Pivot, initial loading (which is specified directly in configuration) is missed. And that’s why I applied load instead of it.
To specify all these methods within the config, you can do the following:
Hi ,
i want to implement background color for row based on hierarchy
For example in below link :
1st level is: Republic // Red color required for entire row
2nd level is :Argentina,Austria … // Blue color required for
Please implement in below link
@amit8486 It’s possible to aplly thecssFormat property depending on data helper properties of the data object (described below):
Hi,
We are working with the set of data where we present the data for multiple years. However will need your help in exploring options on how can i display different colors for individual cell across years based on some condition (i.e. greater or lesser b/w years) please implement in below link
cssFormat can be as complex as you wish. Here you go:
http://webix.com/snippet/3bfca706
Note: the ID of each column is based on its data: columns/values names and type of the current data operation. For example:
id: "2005_'_max_'_oil" //column_'_operation_'_value
Thus, to find the particular column in cssFormat, you can use substring comparison or a regexp, as shown in the above sample.
Hi,
Thanks for earlier response. Working fine.
However, facing another challenge in implementing column ordering.
For instance: am displaying value for multiple fields within Columns. and wanted to see the data in specific order / selection have placed while configuring within columns. However currently it defaulted to order by name in ascending.
Please implement same in below link:
For initial rows sorting you can use $sort scheme:
view:"pivot",
datatable:{
scheme:{
$sort: {
by: "name",
dir: "desc"
}
}
}
In any other case you can dynamically apply sorting directly to the inner datatable, which is available as$$("pivot").$$("data"):
// getting specific column
var toSort = $$("pivot").$$("data").config.columns[1].id;
$$("pivot").$$("data").sort(toSort, "desc", "int")
actually i dont want any sorting during display column it should display as per drag under value section.
For example: If drag filed OIL,GDP,YEAR expected output is same order but currently alphabetical shorting happen and output coming GDP,OIL,YEAR