PDA

View Full Version : Inserting Columns at specified Index



lukefowell89
15 Apr 2011, 2:03 AM
I was wondering if anyone could help me with a problem I am having.

I need to be able to insert a column at a specified index on a grid (spreadsheet). The part which makes it more difficult is keeping each cell's formatting/style. Every cells style is controlled by the elements classes e.g. to make the cells contents bold requires the class name of "x-spreadsheet-bold" or underline = "x-spreadsheet-underline".

I have tryed the following approachs: -


Using Condor's Insert Column Overrides
Insert Column at End of grid and moving all data after specific index along by 1 to the right
Insert Column at specific index


Desperately need a solution to this. I know it is possible to do it nearly instantly, based on the CubeDrive spreadsheet which works well http://www.cubedrive.com/spreadsheet

This is my spreadsheet: http://www.aztec-online.com/spreadsheet

Can anyone give me some idea of a solution? Thanks in advance

mitchellsimoens
15 Apr 2011, 5:20 AM
This works for me to insert at index 1 (of course changable)..



var colModel = grid.getColumnModel(),
config = colModel.config;

config.splice(1, 0, {
header : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex : 'price'
});

colModel.setConfig(config);

I took the Price column off the array grid example config so when it renders it's not there and then I was able to add it in.

lukefowell89
15 Apr 2011, 7:04 AM
Ok, ill give this ago.

But what should I do regarding the classnames? When the new column is inserted the view is refreshed and refreshes the classes to default.

lukefowell89
18 Apr 2011, 12:14 AM
Im afraid this didnt work for me, it just gave me a large amount of errors from events regarding cellmouseover, cellmousedown etc.

This is turning into a real issue as I cannot seem to find a good enough solution, anyone?

lukefowell89
18 Apr 2011, 6:23 AM
I think I have found the best way to do this now, with some advice from tobiu.

I am using grid.reconfigure, where I am creating a new column model with the new column header added to the end. This is also used for the fields in the new store.

Then I add a new item to the record at the index of the place where I want to insert a new column. This then moves all the data along to stay with its relevant column.

The only issue I am having now is that the first time I try to insert a column, it inserts one to the left but doesnt move everything along one. In fact the item in the first column is moved to the left and is hidden underneath the row numberer. Why does this happen? Can anyone see from my code why it will not insert the new column where I am asking it to.



insertNewColumn: function(col)
{
var count = this.getColumnModel().getColumnCount();
var next = count%26;
var total = Math.floor(count/26);

var newHeader = String.fromCharCode(total+64) + String.fromCharCode(next+64);

var grid = this;
var selectionModel = grid.getSelectionModel();
var sc = selectionModel.selectedCellRange;
var cm = grid.getColumnModel();
var dataIndex = cm.getDataIndex(col);
var columns = cm.config;
var store = grid.store;
var records = store.data;
var newColumns = [];
var newRecords = [];
var i = 0;

Ext.each(columns, function(column){
var newCol = {};
if(column.id == 'hiddenNum')
{
column.renderer = function(v, p, record, rowIndex){
if(this.rowspan)
{
p.cellAttr = 'rowspan="'+this.rowspan+'"';
}
return rowIndex+1;
}
}
else
{
column.renderer = grid.SSCellRenderer;
}
column.renderer = grid.SSCellRenderer;
Ext.apply(newCol, column);
newColumns.push(newCol);
});

newColumns.push({
name: newHeader,
header: newHeader,
renderer: this.SSCellRenderer,
grid: this,
dataIndex: newHeader
});

Ext.each(records.items, function(record){
var newRecord = [];
for(var cell in record.data)
{
if(dataIndex == cell)
{
newRecord.push({
__css: '',
__value: '',
__type: 'static',
__format: 'string'
});
}
newRecord.push(record.data[cell]);
}
newRecords.push(newRecord);
i++;
});

var newColumnModel = new Ext.grid.ColumnModel(newColumns);
var newStore = new Ext.data.ArrayStore({
fields: newColumns
});
newStore.loadData(newRecords);

console.log('Store: ', store, newStore);
console.log('New: ', cm, newColumnModel);

grid.reconfigure(newStore,newColumnModel);
}

lukefowell89
19 Apr 2011, 12:11 AM
Anyone?

mitchellsimoens
19 Apr 2011, 5:36 AM
I've never really had to add Columns so not 100% sure. I do want to give you a tip and it's up to you if you want to use it or not. People seem to like it so just offering it out there.

My coding style is high for readability meaning my code is usually easy to follow. One of the biggest things I do to attain that is to space things out:


insertNewColumn: function(col) {
var me = this,
count = me.getColumnModel().getColumnCount(),
next = count % 26,
total = Math.floor(count / 26),
newHeader = String.fromCharCode(total + 64) + String.fromCharCode(next + 64),
selectionModel = me.getSelectionModel(),
sc = selectionModel.selectedCellRange,
cm = me.getColumnModel(),
dataIndex = cm.getDataIndex(col),
columns = cm.config,
store = me.store,
records = store.data,
newColumns = [],
newRecords = [],
i = 0,
newCol;

Ext.each(columns, function(column) {
if (column.id === 'hiddenNum') {
column.renderer = function(v, p, record, rowIndex) {
if (me.rowspan) {
p.cellAttr = 'rowspan="' + me.rowspan + '"';
}
return rowIndex + 1;
}
} else {
column.renderer = me.SSCellRenderer;
}
column.renderer = me.SSCellRenderer;
newCol = Ext.apply({}, column);
newColumns.push(newCol);
});

newColumns.push({
name : newHeader,
header : newHeader,
renderer : me.SSCellRenderer,
grid : me,
dataIndex : newHeader
});

Ext.each(records.items, function(record) {
var newRecord = [];
for (var cell in record.data) {
if (dataIndex === cell) {
newRecord.push({
__css : '',
__value : '',
__type : 'static',
__format : 'string'
});
}
newRecord.push(record.data[cell]);
}
newRecords.push(newRecord);
i++; //needed
});

var newColumnModel = new Ext.grid.ColumnModel(newColumns),
newStore = new Ext.data.ArrayStore({
fields : newColumns
});

newStore.loadData(newRecords);

console.log('Store: ', store, newStore);
console.log('New: ', cm, newColumnModel);

me.reconfigure(newStore, newColumnModel);
}

Notice the first block of code where you create all your variables is not spaced out and if you do a comma at the end you don't need to keep typing 'var'. I do this when creating Objects. Also, I changed the line that had the grid variable and added it as 'me'. Now you can save 2 bytes for every instance of this/grid you wanted to use. Also, I added a comment where you were incrementing the i variable but couldn't see if you needed it somewhere.

Like I said, just a tip that I try to spread this readability style. Minifiers and compressors will take care of all the extra spaces.