Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by FI on Nov 18, 2009 01:30
open dhtmlx forum
Toolbar & Grid on same page = > Scrollbar in FF / No Grid in IE8

Hi !
I've a very simple setup in an aspx.net page.
On the top of the page there should be a toolbar and the remaining space below should be filled by a grid.
I am not able to get it running that the grid uses the remaining space on the page.
In FF it shows scrollbars (the page, not the grid), in IE the grid doesn't show any content.
The only way to get it running almostly was using HTML tables.
So I would like to ask what the suggest way is for a scenarion (which is mostly common!) would be.
This is my code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="eFormTable.aspx.cs" Inherits="eFormTable" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>eForms</title>
<style type="text/css" media="all">
html, body {height:100%; margin:0; padding:0; }
</style>
<script type="text/javascript" src="./dhtmlx/dhtmlxcommon.js"></script>
<script type="text/javascript" src="./dhtmlx/dhtmlxtoolbar_clickpatch.js"></script>
<link rel="stylesheet" type="text/css" href="./dhtmlx/skins/dhtmlxtoolbar_dhx_skyblue.css" />

<link rel="STYLESHEET" type="text/css" href="./dhtmlx/dhtmlxgrid.css" />
<script src="./dhtmlx/dhtmlxcommon.js"></script>
<script src="./dhtmlx/dhtmlxgrid.js"></script>
<script src="./dhtmlx/dhtmlxgridcell.js"></script>
</head>
<body onload="doOnLoad();" >
<form id="eForms" runat="server" >
<div id="Div1" style="width:100%; height:100%;" >
<div id="toolbarObj" style="height:auto; width:100%; margin:0; padding:0;" > </div>
<div id="mygrid_container" style="width:100%; height:100%;"></div>
</div>
<script>
var toolbar;
var mygrid;

function doOnLoad()
{
toolbar = new dhtmlXToolbarObject("toolbarObj");
toolbar.setIconsPath("./dhtmlx/imgs/");
toolbar.loadXML("./eFormTableToolbar.xml");
toolbar.attachEvent("onClick", function(id)
{
alert ('click');
});

mygrid = new dhtmlXGridObject('mygrid_container');
mygrid.setImagePath("dhtmlx/imgs/");
mygrid.setHeader("Model,Qty");
mygrid.setInitWidths("100,*");
mygrid.setColAlign("left,right,right");
mygrid.setSkin("light");
mygrid.init();
mygrid.loadXML("./dataProvider/eFormTableGetGridData.aspx");
}
</script>
</form>
</body>
</html>
Answer posted by Alex (support) on Nov 18, 2009 02:25

Hello,

please, check that grid container has desired height and width.

Answer posted by Fi on Nov 18, 2009 02:33
Hi,

thanks for your fast reply.

>"please, check that grid container has desired height and width."


I am doing by:

style="width:100%; height:100%;

Or is there any other way to do so ?

Rgds
Fi
Answer posted by Alex (support) on Nov 18, 2009 05:21

Both grid and toolbar occupy their containers. So, please check that containers have correct sizes and positions.

mygrid_container container has incorrect sizes even the grid isn't initialized.

Answer posted by Fi on Nov 25, 2009 23:53
Hi,

I've tried around a lot of things but I can't figure out how to do it right.

Could you please give me a sample that shows how to set the container height the right way ?
I am quite lost on this one, I've spend several hours already.
(I can send you all versions I created, just drop me a message.)

All I need is a toolbar at the top and a grid that fills the remaining area of the screen without having a global scrollbar.
A scrollbar in the grid should be there.

Kind regards

Fi
Answer posted by Alex (support) on Nov 26, 2009 01:39

Hello,

you can use dhtmlxlayout. It is possible to attach grid and toolbar to it. Please, check the samples:

http://www.dhtmlx.com/docs/products/dhtmlxLayout/samples/01_init/03_fullscreen.html

http://www.dhtmlx.com/docs/products/dhtmlxLayout/samples/04_components/09_toolbar.html

http://www.dhtmlx.com/docs/products/dhtmlxLayout/samples/04_components/02_grid.html