Grid inside Tab

[irishdunn]

It seems to be so strait foward, but I keep getting an error when the dom.js is in the setStyle function. it seems to be trying to pass the style "height" with a value of "-2px" little goofy, dont know where I might have messed anything up, here is my code for the grid and tab:

 //                                  USER TABS                                        //
//-----------------------------------------------------------------------------------//          
        initUserTabs : function(){
            var tabs = new YAHOO.ext.TabPanel('user_tabs');
            tabs.addTab('user', "User");
            tabs.addTab('profile', "Profile");
            tabs.addTab('roles', "Roles");
            tabs.activate('user');
        }, // End User Specific Tabs
        
 //                                TAB ROLE GRID                                      //
//-----------------------------------------------------------------------------------//          

        initUserTabRoleGrid : function(){
            var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;
            var yg = YAHOO.ext.grid;
            // Formatters come first so they can be called in the colmodel
            var boolFormat = function(value){
                if(value == 'true')
                    return '<input>';
                if(value == 'false')
                    return '<input>';
                if(value == '')
                    return '';
            };
                
            var dateFormat = function(value){
                return value.dateFormat('M d, Y');  
            };

            var parseDate = function(value){
                return new Date(Date.parse(value));
            };

            // Creation of the components of the grid follows
            var colModel = new YAHOO.ext.grid.DefaultColumnModel([ 
               {header: "Editable Roles", width: 330, sortable: true, sortType: sort.asUCString},
               {header: "True/False", width: 330, sortable: true, sortType: sort.asUCString, editor: new yg.CheckboxEditor()}
            ]);
            
            var schema = {
                tagName: 'role',
                id: 'use-index',
                fields: ['roleName',
                         'hasRole']
            };
            this.tabRoleGridData = new YAHOO.ext.grid.XMLDataModel(schema);
            
            this.userTabRoleGrid = new YAHOO.ext.grid.Grid('tabbed_role_grid', this.tabRoleGridData, colModel);
            this.userTabRoleGrid.render();
            
            
            this.tabRoleGridData.load('../Scripts/yui/authentication/demoRoles.xml');
                        
        }, // End Role Grid inside Tabs

heres my markup:

<div>MASSIVE FORM</div>
<div><div></div></div>
<div><div></div></div>
<div></div>

seems to be stripping my html....

pretty strait foward, wonder where that val is coming from...

[jack.slocum]

Remember the grid has to be in a container element that has a defined size and doesn't have a display of none. Tabs that are not visible are display:none, which makes them a pain to work with.

The best solution is to render the grid into the element before it is display:none (before you create the tab strip).

An alternate solution is available with the .0.32.3 version and my local dev copy is using it. Here's a patch that lets it work without a problem in a display:none element (like a tab):

YAHOO.ext.grid.GridView.prototype.updateWrapHeight = function(){
        this.grid.container.beginMeasure();
        var box = this.grid.container.getBox(true);
        this.wrapEl.setHeight(box.height-this.footerHeight-parseInt(this.wrap.offsetTop, 10));
        this.grid.container.endMeasure();
    }

No more errors when display none!

[hammond]

- I am using .33rc1 and trying to put a grid under each of 3 tabs. The first one shows that is on the page when it loads but switching to a different tab does not render the next grid.

It looks like .33rc1 will address that... but I am still having a problem.

What do I need to do to force the grid to render on tab change or on page load? Do we still have to add the patch?

Thanks

[jack.slocum]

Do you have your column css defined? If not (or if you have no idea what I am talking about) try a search for "multiple grids".

[jaydipdave]

Hello,

I am facing the same problem in hidden div, you have given the solution for yahoo.ext.grid.

But I am using Ext.grid. Is there any way to make it working in hidden div (i.e. tabs)

Waiting for response.

Jaydeep.