PDA

View Full Version : GridView Override adding 'showAll' button and 'columnViews' filter sets.



jay@moduscreate.com
8 Mar 2008, 4:30 AM
NOTE: I'm going to change this to a ux from an override as suggested.

-----
This override gives you the ability to have preset 'filters' called 'columnViews'. Also, I added a 'showAll' button above the columns checkboxes. I have not tested this with anything other than the generic gridPanel.


Example:
http://tdg-i.com/js/examples/ext/dataGrid/colview/

Screencast:
http://tdg-i.com/img/screencasts/2008-03-03_1554.swf


Download:
http://tdg-i.com/js/examples/ext/dataGrid/colview/tdgi.gvOverride.zip

Blog Entry:
http://tdg-i.com/22/gridview-override-adding-showall-button-and-columnviews-filter-sets

Show All menu item
http://tdg-i.com/img/screencasts/2008-03-03_1548.png
Change View menu
http://tdg-i.com/img/screencasts/2008-03-03_1549.png

sanjshah
8 Mar 2008, 7:02 AM
Excellent work!

Is it possible to set the view from outside the grid/menu i.e. apply it to a link on the page?

Thanks!

jay@moduscreate.com
8 Mar 2008, 8:14 AM
Are you asking for a public interface?

Ie:


yourLink.on('click', function() {
grid.setColumnView('viewname');
});



:-/

sanjshah
9 Mar 2008, 6:16 AM
something like this would be great - is it possible?

Regards,

Sanj

jay@moduscreate.com
16 Mar 2008, 2:16 PM
Hi sanjshah,

I'm going to look to complete this change this week. I'll keep you posted. ;)

brian.moeskau
16 Mar 2008, 5:15 PM
Cool! I would suggest making it as a plugin rather than a ux to make it more flexible.

jay@moduscreate.com
16 Mar 2008, 6:03 PM
Hi Brian,

Thanks for the feedback. The thought of a plugin has not entered my mind. :) I'll add that to the list of changes.

Thanks. :)

galdaka
16 Mar 2008, 11:15 PM
Demo not work in IE6 and FF2.

Thanks in advance,

jay@moduscreate.com
17 Mar 2008, 3:22 AM
add ie7 to the bunch. I'll have to troubleshoot later. Thanks for the heads up :)

JorisA
17 Mar 2008, 3:46 AM
Indead doesn't work in FF2 yet, and a plugin would be better, but I really like the idea!
Nice work :D

jay@moduscreate.com
17 Mar 2008, 3:52 AM
the issue was resolved. I added a search combo box to my blog and forgot to throw in a conditional statement to prevent these errors. Thanks for the feedback guys.

jelt
17 Mar 2008, 6:02 AM
Hi,

This future plugin is a very good idea, thanks for your share :)

Possible to handle select all/none (with checkbox for example) instead of select all only ?

Possible to not display the "filter set" entry if not filter set is defined ? (i use custom filter set outside the grid)

Edit : And also : if select all can not close the menu, it would be perfect :)

jay@moduscreate.com
17 Mar 2008, 8:08 AM
Hi,

This future plugin is a very good idea, thanks for your share :)

Possible to handle select all/none (with checkbox for example) instead of select all only ?

Possible to not display the "filter set" entry if not filter set is defined ? (i use custom filter set outside the grid)

Edit : And also : if select all can not close the menu, it would be perfect :)


- I don't understand why someone would want to hide all of the columns in a grid. Ext's core code prevents this out of the box.

- I can add a 'hideMenu' config option if you'd like for the columnView set

- I can see if i can refactor the code to take a 'suppressEvent' option for the selectAll menu option if you'd like.

Tasks so far:

Change to a Plugin
Add 'setColumnView' public method
Add hideMenu config for columnView
Add config option to swallow 'hide' event for the menu.


Thanks for the awesome feedback guys!

jelt
18 Mar 2008, 7:09 AM
you are right, hide all column make no sense alone.

But in case of you have a lot of columns (approx 50 for my case), it's faster to unselect all, and then select the few ones you want (that's why i ask you to not close menu when you select all/none)

jay@moduscreate.com
18 Mar 2008, 4:57 PM
This is why the 'columnView' component is useful :). A predetermined configuration of grid column views ;)

siebertm
17 Apr 2008, 12:37 AM
I found the need to have a "Show All" view in the Change View menu without having to write down all my twentyso columns, so i changed the implementation a little bit:

just put this at the beginning of filterColumns method:


filterColumns : function(menuItem) {
if (menuItem.columnView.showAll === true) {
this.showAllColumns();
return;
}
// here the rest of the method
}


and config the view with



columnViews: [{
text: "Show All",
showAll: true
}]


use it if you think its useful

sanjshah
20 Apr 2008, 12:45 PM
Hi,

Just checking to see if there was any update on this request - please!



Are you asking for a public interface?

Ie:


yourLink.on('click', function() {
grid.setColumnView('viewname');
});



:-/

jay@moduscreate.com
20 Apr 2008, 12:48 PM
hi,

I apologize, but these past few weeks have been extremely hectic. the wife just popped (new baby), and a lot of stuff got pushed back. I apologize. I'll try to get back to working on this some time this week :).

sanjshah
20 Apr 2008, 1:05 PM
No problems, congratulations on your new family member!


hi,

I apologize, but these past few weeks have been extremely hectic. the wife just popped (new baby), and a lot of stuff got pushed back. I apologize. I'll try to get back to working on this some time this week :).

mtrax
19 Jun 2008, 11:28 PM
Do you know how this function can be added as a Combo box on the toolbar?

jay@moduscreate.com
20 Jun 2008, 11:42 AM
do you mean select something in the toolbar and exec the function?

mtrax
20 Jun 2008, 1:37 PM
I'm trying to set up a grid which the user can select from a "drop-down" combo which columns to show or a view of the data.
I assume toggling the "hidden" attribute is the way to go..
Can I put a combo box on a Grid ttbar (not inside grid)?
thanks

jay@moduscreate.com
20 Jun 2008, 2:51 PM
you absolutely can :)

mtrax
20 Jun 2008, 3:19 PM
can you point in the right way? ie I'm using the Groupview grid , do I use a plugin or is this a standard feature (add combo to grid panel)

jay@moduscreate.com
20 Jun 2008, 3:21 PM
the combo can be an 'item' of the toolbar. Man i love how we can just do that stuff with Ext. ;)

mtrax
20 Jun 2008, 8:08 PM
sorry to act like a real noob
I copied the combo sample code as follows..


var tb = new Ext.Toolbar();

// add a combobox to the toolbar
var store = new Ext.data.SimpleStore({
fields: ['abbr', 'state'],
data : Ext.exampledata.states // from states.js
});
var combo = new Ext.form.ComboBox({
store: store,
displayField:'state',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true,
width:135
});
tb.addField(combo);

...
var grid = new xg.GridPanel({
store: LPARstore,
cm: LPARColumnModel,
enableColLock:false,
stripeRows: true,
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
...
..


and then tried to add to grid panel


...
grid.setTopToolbar(tb);


but I get a error and I have no idea what I've done wrong.

mtrax
20 Jun 2008, 8:17 PM
ok fixed I'm not sure how to statically create combo but thru trial and error I added
via : getTopToolbar method..



var mt=grid.getTopToolbar();
mt.addField(combo);

thanks

sis9
24 Mar 2010, 2:59 AM
thx for aconran http://www.extjs.com/forum/showthread.php?p=162056
I optimized the code
modifications could be find between //>>> and //<<<



/**********
*
* http://TDG-i.com TDG innovations, LLC
* 03/03/2008, Jay Garcia, jgarcia@tdg-i.com
* Column Views Menu Overrides.
*
* Purpose : Adds 'Show All Columns' to Columns menu, reducing # of clicks to show all.
* Adds 'Change View' Menu, which allows you to customize the views according to the grid.gridViews property.
*
* Works with EXT 2.0+
*
* License : Free to use, just please don't sell.
* This was made for myself, my customers and the EXT Community.
*
* Waranty : None. I can answer questions via email: jgarcia@tdg-i.com
*
**********/
Ext.override(Ext.grid.GridView, {
renderUI : function(){

var header = this.renderHeaders();
var body = this.templates.body.apply({rows:''});


var html = this.templates.master.apply({

body: body,
header: header
});

var g = this.grid;

g.getGridEl().dom.innerHTML = html;

this.initElements();


this.mainBody.dom.innerHTML = this.renderRows();

this.processRows(0, true);


// get mousedowns early
Ext.fly(this.innerHd).on("click", this.handleHdDown, this);
this.mainHd.on("mouseover", this.handleHdOver, this);

this.mainHd.on("mouseout", this.handleHdOut, this);
this.mainHd.on("mousemove", this.handleHdMove, this);

this.scroller.on('scroll', this.syncScroll, this);

if(g.enableColumnResize !== false){
this.splitone = new Ext.grid.GridView.SplitDragZone(g, this.mainHd.dom);
}

if(g.enableColumnMove){
this.columnDrag = new Ext.grid.GridView.ColumnDragZone(g, this.innerHd);

this.columnDrop = new Ext.grid.HeaderDropZone(g, this.mainHd.dom);
}

if(g.enableHdMenu !== false){
if(g.enableColumnHide !== false){
this.colMenu = new Ext.menu.Menu({id:g.id + "-hcols-menu"});
this.colMenu.on("beforeshow", this.beforeColMenuShow, this);
this.colMenu.on("itemclick", this.handleHdMenuClick, this);
}
this.hmenu = new Ext.menu.Menu({id: g.id + "-hctx"});

this.hmenu.add(
{id:"asc", text: this.sortAscText, cls: "xg-hmenu-sort-asc"},
{id:"desc", text: this.sortDescText, cls: "xg-hmenu-sort-desc"}

);

if(g.enableColumnHide !== false){
this.hmenu.add('-',
{id:"columns", text: this.columnsText, menu: this.colMenu, iconCls: 'x-cols-icon'}
);
}

/**********
*
* http://TDG-i.com TDG innovations, LLC
* http://tdg-i.com
* Column Views Menu
*
**********/
if (g.columnViews) {
this.colViewMenu = new Ext.menu.Menu({ id : g.id + "-colview-menu"});

this.colViewMenu.on("beforeshow", this.beforeColViewsMenuShow, this);

this.hmenu.add('-', {
id : "columnViews",
text : g.columnViewText || 'Change View' ,
menu : this.colViewMenu,
iconCls : 'tdgi-extgrid-colview-icon'
}
);
}

this.hmenu.on("itemclick", this.handleHdMenuClick, this);
}

if(g.enableDragDrop || g.enableDrag){
var dd = new Ext.grid.GridDragZone(g, {
ddGroup : g.ddGroup || 'GridDD'
});
}

this.updateHeaderSortState();
},


// private
beforeColMenuShow : function(){
var cm = this.cm, colCount = cm.getColumnCount();
this.colMenu.removeAll();

/**********
*
* http://TDG-i.com TDG innovations, LLC
* http://tdg-i.com
* Show All Columns menu. Injected before 'Columns' menu.
*
**********/
this.colMenu.add({
text : 'Show All',
handler : this.showAllColumns,
iconCls : 'tdgi-extgrid-showall-icon',
scope : this
}, '-');

//Below is EXT's code.
for(var i = 0; i < colCount; i++){
if(cm.config[i].fixed !== true && cm.config[i].hideable !== false){
this.colMenu.add(new Ext.menu.CheckItem({
id: "col-"+cm.getColumnId(i),
text: cm.getColumnHeader(i),
checked: !cm.isHidden(i),
hideOnClick:false,
disabled: cm.config[i].hideable === false
}));
}
}
},
/**********
*
* http://TDG-i.com TDG innovations, LLC
* http://tdg-i.com
* Lazy Rendering of grid views submenu. Similar to modified method above
*
**********/
beforeColViewsMenuShow : function(){
if (this.colViewMenu.items.items.length == 0) {

var grid = this.grid;
var cm = this.cm;
var cv = grid.columnViews;
var colViewCount = grid.columnViews.length;
for(var i = 0; i < colViewCount; i++){
var view = cv[i];

this.colViewMenu.add(new Ext.menu.Item({
id : "cvm-" + cm.getColumnId(i),
text : view.text || 'undefined!',
columnView : view,
iconCls : view.iconCls || 'tdgi-extgrid-filterview-default',
scope : this,
handler : this.filterColumns
}));
}
}

},
/**********
*
* http://TDG-i.com TDG innovations, LLC
* http://tdg-i.com
* Shows all columns via the menu added
*
**********/
showAllColumns : function() {
function showColumn(column, colIndex, allColumns) {
this.cm.setHidden(colIndex, false);
}
//>>>
this.cm.suspendEvents();
//<<<
Ext.each(this.cm.config, showColumn, this);
//>>>
this.cm.resumeEvents();
this.grid.getView().refresh(true);
//<<<
},
/**********
*
* http://TDG-i.com TDG innovations, LLC
* http://tdg-i.com
* Filters, called by MenuItem
*
**********/
filterColumns : function(menuItem) {

var cvCols = menuItem.columnView.columns;
var grid = this.grid;
var cm = this.cm;
var cv = grid.columnViews;

function doFilter(column, colIndex, allColumns) {
var hidden = true;

for(var i = 0; i < cvCols.length; i++){
var cvColumn = cvCols[i];
if (cvColumn == column.dataIndex) {
hidden = false;
}
}

cm.setHidden(colIndex, hidden);

}
//>>>
cm.suspendEvents();
//<<<
Ext.each(cm.config, doFilter, this);
//>>>
cm.resumeEvents();
grid.getView().refresh(true);
//<<<
}
});

sis9
24 Mar 2010, 3:10 AM
thx for aconran http://www.extjs.com/forum/showthread.php?p=162056
I optimized the code
modifications could be find between //>>> and //<<<
I modified only tdgi.gvOverride.js but repacked all other project files too

there is a little bug still there: if you press on Columns menu (below Sort Descending)
the menu will be closed

sis9
24 Mar 2010, 10:20 AM
thx to aconran http://www.extjs.com/forum/showthread.php?p=162056
I attached tdgi.orig+speed-optimization.zip modifications could be found between //>>> and //<<<

As for extjs 3.1.0 I opened \src\widgets\grid\GridView.js and
updated -> tdgi-updated.zip

both cases only tdgi.gvOverride.js was modified