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
Code:
#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

Code:
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
Code:

<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