Grid and Screen resolution.

[rkamineni]

This could be a simple problem.. but we are facing this issue.

We have a form and grid both on a page. We would like to have the form take up 40% of the space and grid 60% of the space vertically on the window.

Form comes up with all the controls but grid just shows the header or some times just a line. When the grid height is set to some value, the grid shows properly but on higher resolution monitors, the grid appears too small.

Even with settings components in VLayout, the grid does not appear at all. We like minimum empty rows to be shown filling the entire view.

Thanks
Raj

[rkamineni]

this.searchIpForm = isc.DynamicForm.create({ID:"searchIpForm",width:"45%",height:"20%",wrapItemTitles:false,
autoDraw:false,showEdges:false,numCols:3,rowSpan:7,showEdges:true,canFocus:true,maximized:true,

fields:[{name:"ip", type:"text", title:"Enter IP*",titleOrientation:"left",required:true,defaultValue:""
},
{name:"searchIpButton", type:"button",startRow:false, title:"Search IP", click:function(){
myobj.call();
}
}
],//fields
itemKeyPress:function(item, keyName, characterValue){
if(keyName =="Enter" && characterValue==13){
myobj.call();
}
}
});//form

this.searchIpGrid = isc.ListGrid.create({
ID: "searchIpGrid",
bodyProperties:{height:"1"},
width:"100%", height:"70%",alternateRecordStyles:true, showAllRecords:true,
fields:[
{name:"IP", title:"IP"},
{name:"CustomerName", title:"CustomerName"},
{name:"CustomerId", title:"CustomerId"},
],
overflow:"auto",
leaveScrollbarGap:true,
canReorderFields: false
});


/*
var vstack = isc.HStack.create({ID:"searchIpGridStack",
left:270,
showEdges:false,
width:"100%",
height:"100%",
bodyOverflow:"auto",
members:[searchIpGrid]});
*/

isc.ImgButton.create({ID:"resetIpGridButton",
left: 400,
width:"18",
height:"18",
src:"[SKIN]/actions/refresh.png",
showRollOver: false,showSelectedIcon:false,canHover:true, hoverHeight:1, prompt:"Reset Grid",
click:function(){myobj.resetSearchIpGrid();}
});

this.searchIpLayout = isc.VLayout.create({ID:"searchIpLayout",
width:"100%",showEdges:false,
layoutLeftMargin:25,layoutRightMargin:25,layoutBottomMargin:25,
members:[searchIpForm,resetIpGridButton,searchIpGrid]
});


I don't see height of the grid unless I specify the absolute size. I want my grid to be 60 of the height of the view.

Thanks
Raj

[JohnBlack]

Hy,

Q: Did you tried to set the searchIpLayout height to 100% ?

[rkamineni]

Yes.. but that means searchIPLayout occupies 100% in its parent.

Simply, I want to specify a minHeight to the grid. If I have form and grid in a VLayout, I would like to have the form take 40% and grid to take 60% , thus filling the entire parent window. Right now on FF, I must give some height to the grid without which it does not render properly.

If I specify a absolute height, i have problems in hight/low resolution monitors. On high resolution, the grid appears too small and my users ask me if I can expand up to the browsers height.

Thanks
Raj

[Isomorphic]

Hi Raj,

Your form should probably not specify a percent height. There don't appear to be any items within it that can be variable size. If you just leave height unspecified, it will be minimize size so space is not wasted.

Your adjacent grid should just specify height:"*". This means it will take up remaining space available in it's parent Layout.

The question then is what is determining the overall size of "searchIPLayout". You didn't show this part of your code. If the overall size of "searchIPLayout" is too small, you need to look at the other members that are in the same Layout to understand why.

[rkamineni]

We are putting the searchIpLayout in a window as follows

this.mainWindow = isc.Window.create({ID:"mainWindowId" + rand_no, title:"", border:"1px solid black",bodyColor:"#f6f6f6",
autoDraw:false, autoSize:true, showCloseButton:false, redrawOnResize:true, canDragReposition:false,
showMinimizeButton:false, showMaximizeButton:false, showShadow:false, canFocus:true, showEdges:false,
headerBackground:"#FFFFFF",isModal:false, height:"100%", width:"100%"});

and some where else

var itemArray = new Array();
itemArray[0] = this.searchIpLayout;
this.mainWindow.addItems(itemArray);

I will try the * and let you know.

[rkamineni]

No.. specifying * for the grid height doesnot solve this issue. grid height is zero now.

It looks like the Grid hieght is not getting set and it doesn't report to its parent container about the height and the parent which is VLayout does not expand.
If the grid height is set, then the parent VLayout grants its request.

I finally figured out to do as follows , which I don't prefer to do it.

show: function()
{
this.mainWindow.show();
var wht = this.mainWindow.getHeight();
ht = eval((wht*70)/100);
isc.say("Showing the window now..." + wht + " ght:" + ht);
this.searchIpGrid.setHeight( ht);
}

There must be some thing wrong here..

Raj

[gravityshock]

Hi rkamineni,

we had a similar problem that we could solve. I don't know, if you have made the same mistake. Maybe it'll help you.

Our site-layout is very convoluted. And one ListGrid was only displayed as one horizontal grey line. We testet "100%", "*", without height. We checked our V-Layouts, H-Layouts, paralel components, but nothing works. Only a height defined as fix pixels worked. The reason was one dwarfish parameter, that has normaly only indirectly infuence on the height:

[...]margin: "4" [...] -> Failure.
[...]margin: 4 [...] -> The height works fine.

A little mistake while we defined the components.

[Isomorphic]

Hmm, we'll add code that handles margin being specified as a String just so no one runs into this again.