Column Draggability and Additional Keys to move to next cell

[Stingles]

I'm using the Demo version to make sure that everything will work as what we are needing.

I'm using Google Chrome, I'm still able to drag a column and move it.

I have tried

Code: [Select]

draggable: false
Also tried :

Code: [Select]

$("#EntryTable").pqGrid( "option", "draggable", false );
After both attempts, I'm still able to drag the columns as I see fit.

Here is my complete code

Code: [Select]

var Itemobj = {
width: 800,
height: 800,
title: "Entry Table",
flexHeight: true,
numberCell: false,
editModel: { clicksToEdit: 1 },
selectionModel: { type: 'row', mode: 'block' },
draggable: false
};
Jdata = [{itemid:'Testing',productid:'1000',s1d1:'5',s1d2:'3',s1d3:'X',s2d1:'4','s2d2':'X',s2d3:'4'},{itemid:'Testing',productid:'1004',s1d1:'X',s1d2:'7',s1d3:'3',s2d1:'X',s2d2:'3',s2d3:'9'},{itemid:'Testing',productid:'1005',s1d1:'5',s1d2:'8',s1d3:'X',s2d1:'5',s2d2:'X',s2d3:'0'},{itemid:'Testing',productid:'1006',s1d1:'9',s1d2:'3',s1d3:'8',s2d1:'4',s2d2:'5',s2d3:'X'},{itemid:'Testing',productid:'1007',s1d1:'1',s1d2:'6',s1d3:'0',s2d1:'5',s2d2:'4',s2d3:'X'},{itemid:'Testing',productid:'1008',s1d1:'9',s1d2:'0',s1d3:'X',s2d1:'X',s2d2:'2',s2d3:'1'},{itemid:'Testing',productid:'1009',s1d1:'X',s1d2:'7',s1d3:'X',s2d1:'X',s2d2:'9',s2d3:'0'}];
Itemobj.colModel = [
{title: 'Description', dataType: "string", dataIndx: "itemid", editable: false, sortable: true, width: 200},
{title: 'Item Number', dataType: "string", dataIndx: 'productid', editable: false, sortable: true, width: 100},
{ title: 'Store #1', align: "center", colModel : [
{title: '1',dataType: "string", dataIndx: 's1d1', sortable: false,
render: function (ui) {
var rD = ui.rowData;
var col = ui.dataIndx;

if (rD[col] == "X") {
$("#EntryTable").pqGrid('addClass', { rowIndx: ui.rowIndx,dataIndx: col,cls: 'celldisable' });
}
}, editable: function (ui) {
var rD = ui.rowData;
var col = ui.dataIndx;

if (rD[col] == "X") {
return false;
} else {
return true;
}
},
editor: { select: true }
},
{title: '2',dataType: "string", dataIndx: 's1d2', sortable: false,
render: function (ui) {
var rD = ui.rowData;
var col = ui.dataIndx;

if (rD[col] == "X") {
$("#EntryTable").pqGrid('addClass', { rowIndx: ui.rowIndx,dataIndx: col,cls: 'celldisable' });
}
}, editable: function (ui) {
var rD = ui.rowData;
var col = ui.dataIndx;

if (rD[col] == "X") {
return false;
} else {
return true;
}
}},
{title: '3',dataType: "string", dataIndx: 's1d3', sortable: false,
render: function (ui) {
var rD = ui.rowData;
var col = ui.dataIndx;

if (rD[col] == "X") {
$("#EntryTable").pqGrid('addClass', { rowIndx: ui.rowIndx,dataIndx: col,cls: 'celldisable' });
}
}, editable: function (ui) {
var rD = ui.rowData;
var col = ui.dataIndx;

if (rD[col] == "X") {
return false;
} else {
return true;
}
}
}
]
},
{ title: 'Store #2', align: "center", colModel : [
{title: '1',dataType: "string", dataIndx: 's2d1', sortable: false,
render: function (ui) {
var rD = ui.rowData;
var col = ui.dataIndx;

if (rD[col] == "X") {
$("#EntryTable").pqGrid('addClass', { rowIndx: ui.rowIndx,dataIndx: col,cls: 'celldisable' });
}
}, editable: function (ui) {
var rD = ui.rowData;
var col = ui.dataIndx;

if (rD[col] == "X") {
return false;
} else {
return true;
}
}},
{title: '2',dataType: "string", dataIndx: 's2d2', sortable: false,
render: function (ui) {
var rD = ui.rowData;
var col = ui.dataIndx;

if (rD[col] == "X") {
$("#EntryTable").pqGrid('addClass', { rowIndx: ui.rowIndx,dataIndx: col,cls: 'celldisable' });
}
}, editable: function (ui) {
var rD = ui.rowData;
var col = ui.dataIndx;

if (rD[col] == "X") {
return false;
} else {
return true;
}
}},
{title: '3',dataType: "string", dataIndx: 's2d3', sortable: false,
render: function (ui) {
var rD = ui.rowData;
var col = ui.dataIndx;

if (rD[col] == "X") {
$("#EntryTable").pqGrid('addClass', { rowIndx: ui.rowIndx,dataIndx: col,cls: 'celldisable' });
}
}, editable: function (ui) {
var rD = ui.rowData;
var col = ui.dataIndx;

if (rD[col] == "X") {
return false;
} else {
return true;
}
}}
]
}
];
Itemobj.useColSPanStyle = true;
Itemobj.groupHeaders = [ {startColumnName: 's1d1', numberOfColumns: 3, titleText: '<em>Store #1</em>'},{startColumnName: 's2d1', numberOfColumns: 3, titleText: '<em>Store #2</em>'} ];
Itemobj.dataModel = {
data: Jdata,
location: "local",
sorting: "local",
paging: "local"
};
Itemobj.freezeCols = 2;
Itemobj.columnBorders = true;
$("#EntryTable").pqGrid(Itemobj);
$("#EntryTable").pqGrid( "option", "draggable", false );
Also, I would like to have it save and move to the next cell on the TAB and ENTER keys.  Tab already works, but I haven't been able to figure out how to get the ENTER key to mimic the TAB key behavior.

Thanks in advance

[paramvir]

There is no demo version. Either it's basic or PRO version.

If you are evaluating PRO:

1) use this option for draggability of columns: http://paramquery.com/pro/api#option-dragColumns

2) use saveKey property of http://paramquery.com/pro/api#option-editModel to mimic the TAB key.