[2.0] grid with locking column [NEW: Update 5]

[durlabh]

There are a problem with the Ext.ux.grid.CheckColumn. If this is in the first column the editor is displayed in the next column. I used the example from Ext 3.1.

For now I solved it leaving the CheckColumn in the last column.

IMO, getLockedCount method needs to be overridden in ColumnModel:

	getLockedCount: function() {
		var count = 0;
		for (var i = 0, len = this.config.length; i < len; i++) {
			if (this.isLocked(i)) {
				count++;
			}
		}
		return count;
	}

[dewoob]

Hi everybody,

some months ago, I reported a problem when hiding non-locked columns in a LockedGroupHeaderGrid. Cells of additional header rows didn't get hidden (see this post). Unfortunately, nobody could help me ...

Meanwhile, I think I've found the reason and a solution for this issue:

• (Un)hiding columns of additional header rows is handled by updateGroupStyles() in LockedGroupHeaderGrid.js. The updateGroupStyles() method is registered to be called in sequence after the onColumnHiddenUpdated() method. The updateGroupStyles() method needs the index of the (un)hidden column as its first parameter.

• Bug: the updateGroupStyles() method is called with a wrong column index when hiding a non-locked column. E.g., when there are 5 locked columns (index 0-4), the index value of the first unlocked column should be 5. But when you hide the first unlocked column, 0 instead of 5 is passed to the updateGroupStyles() method. When hiding the 2nd unlocked column, the value is 1 instead of 6. Accordingly, it is 2 instead of 7 for the 3rd unlocked column, and so on.

• I assume that the updateGroupStyles() method cannot "know" or guess whether its argument, col, is meant to be a column index of either the locked or the unlocked part of the GridView. My guess it that col would need to be an absolute index, that means, it must be relative to the GridView as a whole.

• Now I've tried to trace back the call chain and have a look which param values would show up there. updateGroupStyles() is called in sequence after onColumnHiddenUpdated(), which is called by the LockingGridView's custom implementation of updateColumnHidden().

• The first argument passed to updateColumnHidden() is the "absolute" index of the column that has just been (un)hidden - so this would be just what we need for the chained call of onColumnHiddenUpdated() and updateGroupStyles(). Unfortunately, the chain is not called with this correct value.

• Within the LockingGridView's custom updateColumnHidden() method, the column index is modified in case the column isn't locked. The resulting index is then zero-based in relation to either the locked or the unlocked part of the GridView. This modified index is used for setting display styles within either the locked or the unlocked rows.

• Just like in the GridView's original implementation of updateColumnHidden(), the onColumnHiddenUpdated() method is called afterwards, using column index as the first argument. But now, the modified column index is used - and I think that's what's wrong here.

• Solution: save the original column index that was passed to updateColumnHidden() in a new variable and pass this value when calling onColumnHiddenUpdated().

That's what I did in this fix; you may replace the updateColumnHidden() method in columnLock.js with this implementation:

updateColumnHidden : function(col, hidden){
        var originalCol = col; // save index of updated column
        var tw = this.cm.getTotalWidth();
        var lw = this.cm.getTotalLockedWidth();
        var lclen = this.cm.getLockedCount();
        this.innerHd.firstChild.firstChild.style.width = tw + 'px';
        var display = hidden ? 'none' : '';
        var hd = this.getHeaderCell(col);
        hd.style.display = display;
        var ns, gw;
        if(col < lclen) {
            ns = this.getLockedRows();
            gw = lw;
            this.lockedHd.dom.firstChild.firstChild.style.width = gw + 'px';
            this.mainWrap.dom.style.left= this.cm.getTotalLockedWidth() + 'px';
        } else {
            ns = this.getRows();
            gw = tw - lw;
            col -= lclen;
            this.innerHd.firstChild.firstChild.style.width = gw + 'px';
        }
        for(var i = 0, len = ns.length; i < len; i++){
            ns[i].style.width = gw + 'px';
            ns[i].firstChild.style.width = gw + 'px';
            ns[i].firstChild.rows[0].childNodes[col].style.display = display;
        }
        
        // call onColumnHiddenUpdated using original index of updated column
        // this.onColumnHiddenUpdated(col, hidden, tw);
        this.onColumnHiddenUpdated(originalCol, hidden, tw);
        
        delete this.lastViewWidth;
        this.layout();
    },

[Kranthi1981]

Hi Mankz,

I am developing an extjs application and I have similar kind of requirements. Could u please send me the plug-ins code and an example.

Thanking you in anticipation.

[arifali]

We are using Ext 2.2. After I got the update5.zip file and followed the examples in the thread and in 'columnLockExample.js', I am getting only the locked columns shown in my grid and no unlocked columns. I even appended to the 'columnLockExample.js' the code from Condor (Ext.override(Ext.grid.LockingGridView, { ....) from some page 15/16 of thread too, but no luck.
To give some idea, I replaced by EditorGridPanel with the LockingEditiorGridPanel and am using the Ext.grid.LockingColumnModel. Another difference is that my un-locked columns are composed of editor textfields and comboxes. Could this be the reason that my unlocked columns are actually textfields and comboxes as grid columns? Here is a snippet of my code:


cm = new Ext.grid.LockingColumnModel([
{header: "LSSI 1st",tooltip:"LSSI First character",dataIndex: "lssiFirstChar",hidden:false, width:50, sortable: true, locked: true},
{header: "LSSI 2nd",tooltip:"LSSI Second character",dataIndex: "lssiSecondChar",hidden:false, width:50, sortable: true, locked: true},
{header: "LSSI",tooltip:"LSSI",dataIndex: "lssi",hidden:false, width:40, sortable: true, locked: true},
{header: "LSSI Suffix",tooltip:"LSSI Suffix",dataIndex: "lssiSuffix",hidden:false, width:65, sortable: true,locked: true},
{header: "SL$ Target&nbsp;<img src='images/edit.gif'/>", tooltip:"Safety Budget $ Target", width:78,dataIndex: "safetyLevelBudget", align:"right", editor: new Ext.form.TextField({allowBlank: false}),hidden:false, sortable: true},
{header: "FR Target % &nbsp;<img src='images/edit.gif'/>", tooltip: "FR Target",width:85,dataIndex: "fillRateTarget", align:"right", editor: new Ext.form.TextField({allowBlank: false, msgDisplay:'qtip', regex: frtargetre, regexText:'FR Target value must be < 1'}),hidden:false,renderer:fillRateTargetPercent, sortable: true},
{header: "Min. Risk<img src='images/edit.gif'/>", tooltip: "Minimum Risk", width:70,dataIndex: "minRisk", align:"right", editor: new Ext.form.TextField({allowBlank: false}),hidden:false, sortable: true},
{header: "Max. Risk<img src='images/edit.gif'/>", tooltip: "Maximum Risk", width:70,dataIndex: "maxRisk", align:"right", editor: new Ext.form.TextField({allowBlank: false}),hidden:false, sortable: true},
{header: "Avg. Req. Size&nbsp;<img src='images/edit.gif'/>",tooltip:"Avg. Req. Size ",dataIndex: "averageRequisitionSize", align:"right", editor: new Ext.form.ComboBox({triggerAction: 'all',transform:'arsc',lazyRender:true,listClass: 'x-combo-list-small', forceSelection:true}),hidden:false, sortable: true},
{header: "Crit. Spread&nbsp;<img src='images/edit.gif'/>",tooltip:"Crit. Spread",dataIndex: "critSpread", align:"right", editor: new Ext.form.TextField({allowBlank: false,regex: csharsre, msgTarget:'title', invalidText:'Valid values >= 0'}),hidden:false, sortable: true}
]);

My GridPanel is:
var grid = new Ext.grid.LockingEditorGridPanel({
el:gridCt,
id:'LSSIGridId',
height:400,
width:800,
clicksToEdit: 1,
store: store,
cm: cm,
loadMask: true,
viewConfig: {emptyText: '<div align="center"><font size="2"><b><%=noDataFound %></b></font></div>',
deferEmptyText: false},
tbar: toolbar,
stripeRows: true
//view: new Ext.ux.grid.LockingGridView()
});

Please find attached screenshot showing the behavior (not-showing unlocked columns)

[Condor]

Did you include the css that comes with the extension?

[tomlobato]

Hello! Congratulations, it is a excellent port!
I`m using this by some time, but now I noted that running on chrome there is a little problem.
The locked columns gets a margin on top. Look the attached image.

Below the relevant code..

 columns[0] = {header: '<b>Nome</b>', width: 100, editable: false, menuDisabled: true,
                                  sortable: false, resizable: false, dataIndex: 'name',
                                  renderer: function(value){return '<b>'+value+'</b>'}, locked: true}
        columns[1] = {menuDisabled: true, width: 35, editable: false, renderer: removeUser,
                                  sortable: false, resizable: false, dataIndex: 'id', align: 'center', locked: true}
        columns[2] = {menuDisabled: true, width: 35, editable: false, renderer: altPass,
                                  sortable: false, resizable: false, dataIndex: 'id', align: 'center', locked: true}

        for (var i=0; i<col_list.length; i++) {
                var header = '<font size=1>'+col_list[i][0]+'</font>'
                var dataIndex = col_list[i][1]
        columns[columns.length] = {
            header: header,
            width: colWidth,
            height: 30,
                        editable: true,
            renderer: renderPer,
            menuDisabled: true,
            sortable: false,
                        resizable: false,
            dataIndex: dataIndex
        }
        }

    var userGrid = new Ext.grid.LockingGridPanel({
        store: userStore,
        columns: columns,
        stripeRows: false,
                region: 'center',
                buttonAlign: 'center',
        cls: 'vline-on',
        viewConfig: {
            getRowClass: function(record, idx){
                if (idx == 0)
                    return 'fix-top-border'
            }
        },
        border: false,
        enableHDMenu: false,
        enableColumnHide: false,
        enableColumnMove: false
    });
        userGrid.getSelectionModel().lock() 

[Condor]

This is a known issue that has been fixed in the Ext 3.x version.

But this fix was never backported to the Ext 2.x and 3.0 versions (I'm no longer using these Ext versions, so it's not very high on my todo list).

[tomlobato]

Hi Condor, I understand.
A workaround for me would be to have specific columns (the locked) with header of height=0.
Is it possible?

This is a known issue that has been fixed in the Ext 3.x version.

But this fix was never backported to the Ext 2.x and 3.0 versions (I'm no longer using these Ext versions, so it's not very high on my todo list).

[Condor]

You're better off trying to backport the fix.

The syncHeaderHeight method updates the height of <table> element, but it needs to update the <tr> element.

[Patrick86]

Hi guys,
I have this problem in the locked and unlocked columns heigth
the rows in the Locked column remain the same height as default, which makes a bad effect - rows in the Locked column do not match the rows in the other (not locked) columns. the heigth is not equal (see joined picture)
. I applicate all the propositions given in this thread but no effect.still the same problem
I wait for u answer
tyissue.jpg