Hello,
I am new to this toolkit and am trying to layout our GUI with your controls. I've been able to fit/fill (width:100%; height:100%) my grid into the top splitter pane which as you can see in the code is fit to width:100%; height:100% of the browser window. I have pagesize=50. I want the user to be able to "vertical scroll" through a large "page" at a time AND then click the "next page" button to get to the next 50. (I based this on the splitter sample: "Auto Fill Contents".)
My problem is that when the grid is "fit" to the top splitter pane, the pager no longer is displayed. if you move maximize the browser window AND then move the splitter to the bottom of the browser window, then you can see "parts of the pager - eg, the goto box". It appears that the pager is being drawn but "clipped" past/behind the bottom splitter pane.
Q: How can I modify my grid settings to display the pager below the grid in the top splitter pane as well as keep the "fit to" behavior described above?
Thanks so much in advance!
-chris
<%@ Page Language="C#" %>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
html
{
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
border: none;
overflow: hidden;
}
body, form
{
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
border: none;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Tahoma,Arial,Sans-Serif;
font-size: 9pt;
background-color: #ffffff;
overflow: hidden;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="width: 100%; height: 100%">
<eo:Splitter ID="Splitter1" runat="server" Orientation="Horizontal" DividerImage="00080431"
DividerCenterImage="00080432" DividerSize="10" AutoFillWindow="false" ControlSkinID="None"
Height="100%" Width="100%">
<eo:SplitterPane ID="SplitterPane1" runat="server" Height="200px" ScrollBars="None">
<eo:Grid ID="Grid1" ScrollBars="Auto" AllowPaging="True" AllowColumnReorder="True"
Width="100%" Height="100%" ColumnHeaderDescImage="00050105" ColumnHeaderAscImage="00050104"
FixedColumnCount="1" GoToBoxVisible="True" GridLines="Both" GridLineColor="220, 223, 228"
ColumnHeaderDividerImage="00050103" BorderStyle="None" BorderWidth="0px" DataSourceID="SqlDataSource111"
KeyField="CustomerID" runat="server" Font-Bold="False" Font-Italic="False" Font-Overline="False"
Font-Strikeout="False" Font-Underline="False" PageSize="30">
<ItemStyles>
<eo:GridItemStyleSet>
<CellStyle CssText="padding-left:8px;padding-top:2px;"></CellStyle>
<FixedColumnCellStyle CssText="border-right: #d6d2c2 1px solid; padding-right: 10px; border-top: #faf9f4 1px solid; border-left: #faf9f4 1px solid; border-bottom: #d6d2c2 1px solid; background-color: #ebeadb; text-align: right">
</FixedColumnCellStyle>
</eo:GridItemStyleSet>
</ItemStyles>
<GoToBoxStyle CssText="BORDER-RIGHT: #7f9db9 1px solid; BORDER-TOP: #7f9db9 1px solid; BORDER-LEFT: #7f9db9 1px solid; WIDTH: 40px; BORDER-BOTTOM: #7f9db9 1px solid">
</GoToBoxStyle>
<ContentPaneStyle CssText="border-bottom-color:#7f9db9;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#7f9db9;border-left-style:solid;border-left-width:1px;border-right-color:#7f9db9;border-right-style:solid;border-right-width:1px;border-top-color:#7f9db9;border-top-style:solid;border-top-width:1px;">
</ContentPaneStyle>
<Columns>
<eo:StaticColumn HeaderText="CustomerID" DataField="CustomerID" AllowSort="True"
Width="80">
</eo:StaticColumn>
<eo:StaticColumn HeaderText="CompanyName" DataField="CompanyName" AllowSort="True"
Width="-1">
</eo:StaticColumn>
<eo:StaticColumn HeaderText="ContactName" DataField="ContactName" AllowSort="True"
Width="100">
</eo:StaticColumn>
<eo:StaticColumn HeaderText="ContactTitle" DataField="ContactTitle" AllowSort="True"
Width="100">
</eo:StaticColumn>
</Columns>
<ColumnHeaderStyle CssText="background-image:url('00050101');padding-left:8px;padding-top:3px;">
</ColumnHeaderStyle>
</eo:Grid>
</eo:SplitterPane>
<eo:SplitterPane ID="SplitterPane2" runat="server">
Resize the Window and see the splitter automatically resizes.
</eo:SplitterPane>
</eo:Splitter>
<asp:SqlDataSource ID="SqlDataSource111" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [ContactTitle] FROM [Customers]">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>