Please Help...Multiple grid on the same page

[khanh3m]

I have searched the forum and made the changes as suggested in many of the post. However, I still have problem of displaying data in multiple grids on the same page. Here is my code:
grid.css

#xml-example{
	border: 1px solid #cbc7b8;
	left: 0;
	position: relative;
	top: 0;
}
#xml-example .ygrid-col-0 {
}
#xml-example .ygrid-col-1 {
}
#xml-example .ygrid-col-2{
}
#xml-example .ygrid-col-3 {
}
#xml-example .ygrid-col-4 {
}
#xml-example.ygrid-mso{
	border: 1px solid #6593cf;
}
#xml-example.ygrid-vista{
	border: 1px solid #b3bcc0;
}
#donotcontactdlg{
	border: 1px solid #cbc7b8;
	left: 0;
	position: relative;
	top: 0;
}
#donotcontactdlg .ygrid-col-0 {
}
#donotcontactdlg .ygrid-col-1 {
	text-align: right;
}
#donotcontactdlg .ygrid-col-2{
	text-align: right;
}
#donotcontactdlg .ygrid-col-3 {
	text-align: right;
}
#donotcontactdlg .ygrid-col-4 {
	text-align: right;
}
#donotcontactdlg.ygrid-mso{
	border: 1px solid #6593cf;
}
#donotcontactdlg.ygrid-vista{
	border: 1px solid #b3bcc0;
}

Here is my script for the first grid. The second grid is pretty much the same thing too

var donotcontact = {
    init : function(){
        var myteststring = [['yes'],['no'],['maybe']]
        var dataModel = myteststring;
        var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;
        var myColumns = [
			{header: "Options", width: 200, sortable: true, sortType: sort.asUCString}
		];
		var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);
		// create the Grid
		YAHOO.ext.grid.GridView.prototype.updateBodyHeight = function(){} 
        this.grid = new YAHOO.ext.grid.Grid('donotcontactdlg', dataModel, colModel);
        this.grid.render();
        this.grid.getSelectionModel().selectFirstRow();
    }    
}

here is the code for the html page

<button onclick="YAHOO.kn.container.formdonotcontactdlg.show();donotcontact.init();">Simple Dialog</button></P>


<button onclick="YAHOO.kn.container.dlg2.show();loadcompany.init();">Advanced Dialog</button></p>

	<div id="formdonotcontactdlg" >
		<div class="hd">Please enter your information</div>
		<div class="bd">
		<div id="donotcontactdlg" class="ygrid-simple-view" style="width:300px;height:250px;overflow:hidden;position:relative;"></div>
		</div>
	</div>
	<div id="dlg2">
		<div class="hd">Please enter your information</div>
		<div class="bd">
		 	<div id="xml-example"  style="width:550px;height:200px;overflow:hidden;"></div>
		</div>
	</div>

There are two buttons on the page which will be activate once the button is clicked. If I click on the first button, the data show and then when I click on the second button, the data will not show. If I refresh it again, and click on the second button, the data show but not the first grid. I suspected that there got to be something wrong with my css. Please help!

Thanks

[jack.slocum]

What exactly is going wrong? Do you have the css columns defined for both grids?

[khanh3m]

There are two grids with different number of columns. There are two button on a form which will open up the dialog box, inside this dialog box is the grid. The first time I click on the button, everything works fine. However, as soon as click on it the second time, the data of the first grid dissapear.

I have the css for each column ...as shown in the previous post....but still have this problem.

KN

[khanh3m]

I debug the code and I found the following interesting thing:

in my grid, I have several columns that are hidden using the following code:

colModel.setHidden(0, true);

If I unhide the column, then all the data show in both grids display properly.

Do I have to override any other code to make this work?

KN

[venki5star]

Hi,
I am also having the same issue. Is there a solution to fix this? I am using ExtJS 4.0.7