Dear support,
I am using 120 column grid.
Increasing the performance used virtualX:true option.After I have integrated Show / hide column option.But when deselect the freezed column not working properly.While virtualX:false its working fine.Can you please help me to fix this issue.
var obj;
obj = {
title:vm.title,
height: 400,
freezeCols:8,
hwrap:true,
filterModel: { on: true, mode: "AND", header: false },
editModel: {
clicksToEdit: 1,
saveKey: $.ui.keyCode.ENTER,
cellBorderminWidth: 1
},
cellSave: function (event,ui){
colonCellEdit(ui);
},
virtualX: true,
virtualY: true,
showTop: true,
selectionModel:{type:null},
//bubble: true,
//collapsible: { collapsed : false },
pageModel: { type:'remote',rPP: UrlService.getRpp(),rPPOptions:UrlService.getRppOptions()},
scrollModel: {autoFit: false,lastColumn: null},
dataModel: dataModel,
colModel: colModel,
resizable: true,
numberCell: { show: true },
create: function (evt, ui) {
var CM = this.getColModel(),
$sel = $(".columnSelector"),
opts = [];
for (var i = 0; i < CM.length; i++) {
var column = CM;
if (column.hidden !== true) {
opts.push(column.dataIndx);
}
}
//initialize the selected options in toolbar select list.
$sel.val(opts);
//let's disable ShipCountry column.
//$sel.find("option[value='ck']").prop('disabled', true);
// $sel.find("option[value='markInfo']").prop('disabled', true);
//convert it into pqSelect.
$sel.pqSelect({
checkbox: true,
multiplePlaceholder: 'Select visible columns',
maxDisplay: 0,
width: '230px'
});
},
toolbar:{
/**
* Filter toggle button action
*/
items:[
{
type:'button',
label: 'Filter',
listener: function(){
this.option('filterModel.header', !this.option('filterModel.header'));
this.refresh();
}
},
{
type:'button',
label: 'Reset Filter',
listener: function(){
this.reset({filter: true});
}
},
{
type: 'select',
cls: 'columnSelector',
attr: "multiple='multiple'", style: "height:600px;",
options: function (ui) {
var CM = this.getColModel(),
opts = [];
for (var i = 0; i < CM.length; i++) {
var obj = {},
column = CM;
obj[ column.dataIndx ] = column.dataIndx;
opts.push(obj);
}
return opts;
},
listener: function (evt) {
var arr = $(evt.target).find("option:selected").map(function(){
return this.value;
}).get(),
CM = this.getColModel();
for (var i = 0; i < CM.length; i++) {
var column = CM,
dataIndx = column.dataIndx+"";
//hide the column if not a selected option.
column.hidden = ($.inArray(dataIndx, arr) == -1);
}
this.option("colModel", this.option("colModel")); //refresh the colModel.
this.refresh();
}
}
]
}
}
