ParamQuery grid support forum
General Category => Help for ParamQuery Pro => Topic started by: pbassey on December 02, 2022, 03:00:45 am
-
I am trying to make only 3 specific cells editable and all the rest, readonly. I tried the isEditableCell function for the 3 specific cells while turning the column's editable property off. It seems the column/editable function supersedes the isEditableCell function. Is it possible to make only 3 specific cells editable?
Below is the code I am using:
var grid2 = pq.grid("#KPMGData", {
height: 500,
width: '100%',
sortableType: false,
showTitle: false,
header: false,
autoRow: true,
editor: { select: true, type: 'textbox' },
selectionModel: {column: true},
animModel:{on: true},
colModel: [
{dataIndx: 0, title: "A", align: "left", width: 300, editable: false},
{dataIndx: 1, title: "B", align: "right", width: 100, editable: false},
{dataIndx: 2, title: "C", align: "right", width: 100, editable: false, dataType: "float", dataIndx: "revenues", format: '###,###.00'},
{dataIndx: 3, title: "D", align: "right", width: 100, editable: false},
{dataIndx: 4, title: "E", align: "right", width: 100, editable: false},
{dataIndx: 5, title: "F", align: "right", width: 100, editable: false},
{dataIndx: 6, title: "G", align: "right", width: 100, editable: false},
{dataIndx: 7, title: "H", align: "right", width: 100, editable: false},
{dataIndx: 8, title: "I", align: "right", width: 100, editable: false},
{dataIndx: 9, title: "J", align: "right", width: 300, editable: false},
{dataIndx: 10, title: "K", align: "right", width: 300, editable: false}
],
editor:{type:'textarea'},
editModel: {
onSave:'downFocus'
}
});
grid2.showLoading();
pq.excel.importXl( {url: '/sts/content/files/data/KPMG.xlsx'}, function( wb ){
grid2.importWb({ workbook: wb, extraRows: 0, extraCols: 20, keepCM: true });
})
grid2.isEditableCell( { rowIndx: 14, dataIndx: 3 } );
grid2.isEditableCell( { rowIndx: 17, dataIndx: 3 } );
grid2.isEditableCell( { rowIndx: 18, dataIndx: 3 } );
grid2.hideLoading();
-
It's other way round, isEditableCell method is used to check/get editability of a cell.
Use editable option to set editability of specific cells.
https://paramquery.com/pro/api#option-editable
editable: function(ui){
return (( ui.rowIndx == 14 || ui.rowIndx == 17 || ui.rowIndx == 18 ) && ui.dataIndx == 3 );
}
-
I added your new code snippet to my code below and I get the Javascript error when I click on row 18, dataIndx 2:
"ReferenceError: Can't find variable: dataIndx"
Below is the code I am using:
var grid2 = pq.grid("#KPMGData", {
height: 500,
width: '100%',
sortableType: false,
showTitle: false,
header: false,
autoRow: true,
editor: { select: true, type: 'textbox' },
selectionModel: {column: true},
animModel:{on: true},
colModel: [
{dataIndx: 0, title: "A", align: "left", width: 300, editable: false},
{dataIndx: 1, title: "B", align: "right", width: 100, editable: false},
{dataIndx: 2, title: "C", align: "right", width: 100, dataType: "float", format: '###,###.00'},
{dataIndx: 3, title: "D", align: "right", width: 100, editable: false},
{dataIndx: 4, title: "E", align: "right", width: 100, editable: false},
{dataIndx: 5, title: "F", align: "right", width: 100, editable: false},
{dataIndx: 6, title: "G", align: "right", width: 100, editable: false},
{dataIndx: 7, title: "H", align: "right", width: 100, editable: false},
{dataIndx: 8, title: "I", align: "right", width: 100, editable: false},
{dataIndx: 9, title: "J", align: "right", width: 300, editable: false},
{dataIndx: 10, title: "K", align: "right", width: 300, editable: false}
],
editable: function(ui){
return (( ui.rowIndx == 14 || ui.rowIndx == 17 || ui.rowIndx == 18 ) && dataIndx == 2 )
},
editor:{type:'textarea'},
editModel: {
onSave:'downFocus'
}
});
grid2.showLoading();
pq.excel.importXl( {url: '/sts/content/files/data/KPMG.xlsx'}, function( wb ){
grid2.importWb({ workbook: wb, extraRows: 0, extraCols: 20, keepCM: true });
})
grid2.isEditableCell( { rowIndx: 14, dataIndx: 3 } );
grid2.isEditableCell( { rowIndx: 17, dataIndx: 3 } );
grid2.isEditableCell( { rowIndx: 18, dataIndx: 3 } );
grid2.hideLoading();
-
Sorry about that, it's ui.dataIndx instead of plain dataIndx, corrected my previous post.
and remove editable: false from all the columns.
-
Thank you for the reply. I just made the change you suggested above, but now, all the cells are protected. Is there anything else I am missing??
Below is my code.
var grid2 = pq.grid("#KPMGData", {
height: 500,
width: '100%',
sortableType: false,
showTitle: false,
header: false,
autoRow: true,
editor: { select: true, type: 'textbox' },
selectionModel: {column: true},
animModel:{on: true},
colModel: [
{dataIndx: 0, title: "A", align: "left", width: 300},
{dataIndx: 1, title: "B", align: "right", width: 100},
{dataIndx: 2, title: "C", align: "right", width: 100, dataType: "float", format: '###,###.00'},
{dataIndx: 3, title: "D", align: "right", width: 100},
{dataIndx: 4, title: "E", align: "right", width: 100},
{dataIndx: 5, title: "F", align: "right", width: 100},
{dataIndx: 6, title: "G", align: "right", width: 100},
{dataIndx: 7, title: "H", align: "right", width: 100},
{dataIndx: 8, title: "I", align: "right", width: 100},
{dataIndx: 9, title: "J", align: "right", width: 300,
{dataIndx: 10, title: "K", align: "right", width: 300}
],
editable: function(ui){
return (( ui.rowIndx == 15 || ui.rowIndx == 18 || ui.rowIndx == 19 ) && ui.dataIndx == 2 )
},
editor:{type:'textarea'},
editModel: {
onSave:'downFocus'
}
});
grid2.showLoading();
pq.excel.importXl( {url: '/sts/content/files/data/KPMG.xlsx'}, function( wb ){
grid2.importWb({ workbook: wb, extraRows: 0, extraCols: 20, keepCM: true });
})
grid2.hideLoading();
-
Thanks again. For this reading this, the row numbers in the spreadsheet are actually one minus the ones referenced in the code. The row index is zero based.
So this code will actually make rows 14, 17 and 18 editable:
editable: function(ui){
return (( ui.rowIndx == 13 || ui.rowIndx == 16 || ui.rowIndx == 17 ) && ui.dataIndx == 2 )
},
Thanks again for the help....