Hello Paramveer,
We are using the Wrap Content functionality in the ParamQuery Grid. We have observed that when we deselect the Wrap Content option, the row unwraps; however, some rows are not refreshed properly.
Kindly check the attached file for your reference. Also, please review the code provided below.
Check the 5th row in the Screenshot.
var data = [{
rank: 1,
company: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
revenues: 339938.0,
profits: 36130.0
},
{
rank: 2,
company: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
revenues: 315654.0,
profits: 11231.0
},
{
rank: 3,
company: 'Royal Dutch Shell',
revenues: 306731.0,
profits: 25311.0
},
{
rank: 4,
company: 'BP',
revenues: 267600.0,
profits: 22341.0
},
{
rank: 5,
company: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
revenues: 192604.0,
profits: -10567.0
},
{
rank: 6,
company: 'Chevron',
revenues: 189481.0,
profits: 14099.0
},
{
rank: 7,
company: 'DaimlerChrysler',
revenues: 186106.3,
profits: 3536.3
},
{
rank: 8,
company: 'Toyota Motor',
revenues: 185805.0,
profits: 12119.6
},
{
rank: 9,
company: 'Ford Motor',
revenues: 177210.0,
profits: 2024.0
},
{
rank: 10,
company: 'ConocoPhillips',
revenues: 166683.0,
profits: 13529.0
},
{
rank: 11,
company: 'General Electric',
revenues: 157153.0,
profits: 16353.0
},
{
rank: 12,
company: 'Total',
revenues: 152360.7,
profits: 15250.0
},
{
rank: 13,
company: 'ING Group',
revenues: 138235.3,
profits: 8958.9
},
{
rank: 14,
company: 'Citigroup',
revenues: 131045.0,
profits: 24589.0
},
{
rank: 15,
company: 'AXA',
revenues: 129839.2,
profits: 5186.5
},
{
rank: 16,
company: 'Allianz',
revenues: 121406.0,
profits: 5442.4
},
{
rank: 17,
company: 'Volkswagen',
revenues: 118376.6,
profits: 1391.7
},
{
rank: 18,
company: 'Fortis',
revenues: 112351.4,
profits: 4896.3
},
{
rank: 19,
company: 'Crédit Agricole',
revenues: 110764.6,
profits: 7434.3
},
{
rank: 20,
company: 'American Intl. Group',
revenues: 108905.0,
profits: 10477.0
}
];
function items() {
return [{
name: "Wrap",
disabled: (this.Selection().style("white-space") == "normal"),
action: function() {
this.Selection().style("white-space", "normal");
}
},
{
name: "No wrap",
disabled: (this.Selection().style("white-space") == "nowrap"),
action: function() {
this.Selection().style({
"white-space": "nowrap",
"text-overflow": "ellipsis",
"overflow": "hidden"
});
}
}
];
}
var obj = {
width: "80%",
height: 400,
resizable: true,
title: "Grid From JSON",
showBottom: false,
showTitle: false,
scrollModel: {
autoFit: true
},
dataModel: {
data: data
},
colModel: [{
title: "Rank",
width: 100,
dataType: "integer",
dataIndx: "rank"
},
{
title: "Company with very very very very very very very very very long title",
width: 220,
dataType: "string",
dataIndx: "company"
},
{
title: "Revenues",
width: 180,
dataType: "float",
dataIndx: "revenues",
styleHead: {
'font-style': 'italic'
}
},
{
title: "Profits",
width: 160,
dataType: "float",
dataIndx: "profits"
}
],
toolbar: {
style: 'text-align:center;',
items: [{
type: 'checkbox',
value: true,
label: 'Wrap for all body cells',
listener: function(evt) {
this.option('wrap', evt.target.checked);
this.refresh();
}
},
{
type: 'checkbox',
label: 'Wrap for all header cells',
listener: function(evt) {
this.option('hwrap', evt.target.checked);
this.refresh();
}
},
{
type: 'fullscreen'
}
]
},
contextMenu: {
on: true,
cellItems: items
}
};
pq.grid("#grid_json", obj);
