PDA

View Full Version : Please Help...Multiple grid on the same page



khanh3m
30 Oct 2006, 2:01 PM
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
30 Oct 2006, 3:39 PM
What exactly is going wrong? Do you have the css columns defined for both grids?

khanh3m
30 Oct 2006, 4:52 PM
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
30 Oct 2006, 6:15 PM
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
1 Aug 2012, 7:56 PM
Hi,
I am also having the same issue. Is there a solution to fix this? I am using ExtJS 4.0.7