|
|
Rank: Member
Groups: Member
Joined: 8/21/2008
Posts: 24
|
Hello!
I am a new user of EO and I discovered a problem with the Grid. My version is 2008.0.31, but the problem occurs on the previous version as well.
I defined a grid with an height of 500px, with scrolling activ, connected to a datasource. (It occurs in server and client running mode!)
After retrieving the data, the scrolling ability seems not to work. The Grid only shows as many rows as fit into the 500px. The scrollbar only enables to scroll the last entry, if it will not be shown completely. If I reduce the item height, I can see, the grid is retrieving more data. But not, if the data does not fit into the 500px.
Do I miss an property or is there a bug in the grid?
Thank you for your help!
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
Can you post your Grid defintion so that we can take a look?
Thanks
|
|
Rank: Member
Groups: Member
Joined: 8/21/2008
Posts: 24
|
Hi! Here is my source:
Code: HTML/ASPX
<eo:Grid ID="Grid1" runat="server" ColumnHeaderAscImage=""
ColumnHeaderDescImage="" ColumnHeaderDividerImage=""
ColumnHeaderDividerOffset="0" ColumnHeaderHeight="32" FixedColumnCount="1"
Font-Bold="False" Font-Italic="False" Font-Names="Verdana"
Font-Overline="False" Font-Size="9pt" Font-Strikeout="False"
Font-Underline="False" Height="400px" ImageBaseDirectory="~/Images"
ItemHeight="22" Width="500px" ScrollBars="Both" PageSize="100"
RunningMode="Server" onpageindexchanged="Grid1_PageIndexChanged">
<FooterStyle CssText="padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;" />
<ItemStyles>
<eo:GridItemStyleSet>
<ItemStyle CssText="background-color:white;color:#284775;font-family:Arial;font-size:Small;padding-top:5px;" />
<AlternatingItemStyle CssText="background-color:#f7f6f3;color:#333333;font-family:Arial;font-size:Small;padding-top:5px;" />
<ItemHoverStyle CssText="background-color:white;color:#284775;font-family:Arial;font-size:Small;padding-top:5px;" />
<AlternatingItemHoverStyle CssText="background-color:#f7f6f3;color:#333333;font-family:Arial;font-size:Small;padding-top:5px;" />
<SelectedStyle CssText="" />
<CellStyle CssText="" />
</eo:GridItemStyleSet>
</ItemStyles>
<ColumnTemplates>
</ColumnTemplates>
<Columns>
<eo:ButtonColumn ButtonText="Löschen">
</eo:ButtonColumn>
<eo:StaticColumn DataField="UserName" HeaderText="Benutzername" Width="200">
<CellStyle CssText="" />
</eo:StaticColumn>
</Columns>
<ColumnHeaderStyle CssText="background-image:url('~/images/Grid.jpg');padding-left:8px;padding-top:7px; font-weight: bold;color:white;" />
</eo:Grid>
Here is the code for filling the grid:
Code: C#
protected void Page_Load(object sender, EventArgs e)
{
DataSourceSelectArguments args = new DataSourceSelectArguments();
string select = "SELECT * FROM vw_aspnet_Users";
SQLUserList.SelectCommand = count;
Grid1.DataSource = SQLUserList.Select(args);
Grid1.DataBind();
}
Some additional infos: If I set the height of the grid to 800px, all 36 rows will be shown. If I set the height to 400px (as in the example), only 21 rows will be shown. If I set the height to 400px and delete "PageSize" (or set PageSize="20"), only 16 rows will be shown. But when I delete the "padding-top" entrys, all rows will be shown. Perhaps there is a workaround? I like to have rows with a height of 20, but the text should be vertically centered. Thank you Ronald
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, We tried your code and it seems to be working fine here. We had to change code in Page_Load as follow because we do not have your datasource:
Code: C#
Grid1.DataSource = new object[100];
Grid1.DataBind();
It runs and shows all 100 rows fine with progress bar. Thus I would recommend you check other elements in your page, especially your .css files to see if any of them are in conflict with the Grid. If you can isolate the problem into a separate page or project that can run independently, we will be happy to take a look. Padding-top should be fine. That indeed can help you to fine tune the position of the text and I believe that's one of its intended purposes. Thanks
|
|
Rank: Member
Groups: Member
Joined: 8/21/2008
Posts: 24
|
Hi! Yes, it seems to work. But there are not 100 rows displayed! Please have a look at this isolated source:
Code: HTML/ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<eo:Grid ID="Grid2" runat="server" ColumnHeaderAscImage=""
ColumnHeaderDescImage="" ColumnHeaderDividerImage=""
ColumnHeaderDividerOffset="0" ColumnHeaderHeight="32" FixedColumnCount="1"
Font-Bold="False" Font-Italic="False" Font-Names="Verdana"
Font-Overline="False" Font-Size="9pt" Font-Strikeout="False"
Font-Underline="False" Height="500px" ImageBaseDirectory="~/Images"
ItemHeight="22" Width="511px" ScrollBars="Both"
ClientSideOnItemCommand="OnItemDelete"
RunningMode="Server">
<FooterStyle CssText="padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;" />
<ItemStyles>
<eo:GridItemStyleSet>
<ItemStyle CssText="background-color:white;color:#284775;font-family:Arial;font-size:Small;padding-top:5px;" />
<AlternatingItemStyle CssText="background-color:#f7f6f3;color:#333333;font-family:Arial;font-size:Small;padding-top:5px;" />
<ItemHoverStyle CssText="background-color:white;color:#284775;font-family:Arial;font-size:Small;padding-top:5px;" />
<AlternatingItemHoverStyle CssText="background-color:#f7f6f3;color:#333333;font-family:Arial;font-size:Small;padding-top:5px;" />
<SelectedStyle CssText="" />
<CellStyle CssText="" />
</eo:GridItemStyleSet>
</ItemStyles>
<ColumnTemplates>
</ColumnTemplates>
<Columns>
<eo:ButtonColumn ButtonText="Löschen">
</eo:ButtonColumn>
<eo:StaticColumn DataField="UserName" HeaderText="Benutzername" Width="200">
<CellStyle CssText="" />
</eo:StaticColumn>
<eo:DateTimeColumn DataField="LastActivityDate"
DataFormat="{0:dd.MM.yyyy hh:mm:ss}" HeaderText="Letzte Aktivität" Width="200">
<DatePicker ControlSkinID="None" DayCellHeight="16" DayCellWidth="19"
DayHeaderFormat="FirstLetter" DisabledDates="" OtherMonthDayVisible="True"
SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL"
TitleRightArrowImageUrl="DefaultSubMenuIcon">
<TodayStyle CssText="font-family: tahoma; font-size: 12px; border-right: #bb5503 1px solid; border-top: #bb5503 1px solid; border-left: #bb5503 1px solid; border-bottom: #bb5503 1px solid" />
<SelectedDayStyle CssText="font-family: tahoma; font-size: 12px; background-color: #fbe694; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<DisabledDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<PickerStyle CssText="font-family:Courier New; padding-left:5px; padding-right: 5px;" />
<CalendarStyle CssText="background-color: white; border-right: #7f9db9 1px solid; padding-right: 4px; border-top: #7f9db9 1px solid; padding-left: 4px; font-size: 9px; padding-bottom: 4px; border-left: #7f9db9 1px solid; padding-top: 4px; border-bottom: #7f9db9 1px solid; font-family: tahoma" />
<TitleArrowStyle CssText="cursor:hand" />
<DayHoverStyle CssText="font-family: tahoma; font-size: 12px; border-right: #fbe694 1px solid; border-top: #fbe694 1px solid; border-left: #fbe694 1px solid; border-bottom: #fbe694 1px solid" />
<MonthStyle CssText="font-family: tahoma; font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px" />
<TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;" />
<OtherMonthDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<DayHeaderStyle CssText="font-family: tahoma; font-size: 12px; border-bottom: #aca899 1px solid" />
<DayStyle CssText="font-family: tahoma; font-size: 12px; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
</DatePicker>
</eo:DateTimeColumn>
</Columns>
<ColumnHeaderStyle CssText="background-image:url('~/images/Grid.jpg');padding-left:8px;padding-top:7px; font-weight: bold;color:white;" />
</eo:Grid>
</div>
</form>
</body>
</html>
And the following Page_Load event:
Code: C#
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Grid2.DataSource = new object[100];
Grid2.DataBind();
int i;
for (i = 0; i < 100; i++)
Grid2.Items[i].Cells[1].Value = i.ToString();
}
}
When viewing the Grid, you will see, only rows 0 to 89 will be displayed complete and only a part of row 90 will be displayed. I believe it depends on the padding. Because setting the property "ItemHeight=30" rows 0 to 95. And after changing the the "GridItemStyleSet" to:
Code: HTML/ASPX
<eo:GridItemStyleSet>
<ItemStyle CssText="background-color:white;color:#284775;font-family:Arial;font-size:Small;line-height:22px;vertical-align:middle;" />
<AlternatingItemStyle CssText="background-color:#f7f6f3;color:#333333;font-family:Arial;font-size:Small; line-height: 22px; vertical-align: middle;" />
<ItemHoverStyle CssText="background-color:white;color:#284775;font-family:Arial;font-size:Small;line-height:22px;vertical-align:middle;" />
<AlternatingItemHoverStyle CssText="background-color:#f7f6f3;color:#333333;font-family:Arial;font-size:Small; line-height: 22px; vertical-align: middle;" />
<SelectedStyle CssText="" />
<CellStyle CssText="" />
</eo:GridItemStyleSet>
all rows from 0 to 99 will be displayed. With these changes, I have a solution, that will work for me. But perhaps you can locate the problem with the paddings as well. Many thanks Ronald
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi Ronald,
Thank you very much for the detailed information. We looked into it and it indeed has to do with padding. We will see what we can do with that.
vertical-align:middle is a good workaround. Another workaround is to move padding-top from ItemStyle to CellStyle. That should give you the same effect except for that it does not affect item height.
Thanks!
|
|
Rank: Member
Groups: Member
Joined: 8/21/2008
Posts: 24
|
Hi Support-Team!
I have to thank you for your help and for your very helpful controls. Especially the grid control is the only control I found, which combines scrolling and pagemode. Additionally resizing with the browser-window will work, too! Perfect!
Best regards
Ronald
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
We are very glad to hear that! Thanks!
|
|
Rank: Newbie
Groups: Member
Joined: 10/3/2008
Posts: 4
|
Hi, I have a similar issue with the grid as Ronald - not all the rows are shown. I tried the workaround with "vertical-align: middle", defined css padding have no effect on increasing or decreasing number of shown rows. A sample source:
Code: HTML/ASPX
<%@ Page Language="C#" AutoEventWireup="true" Codebehind="ScrollBars.aspx.cs" Inherits="WebSample.ScrollBars" %>
<%@ 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<link rel="Stylesheet" type="text/css" href="Default.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="gridPanel" Height="450px" Width="100%" runat="server">
<eo:Grid ID="grid"
CssClass="commonText"
runat="server"
Height="100%"
Width="100%"
BackColor="LightGray"
Btyle="Solid"
BorderColor="ActiveBorder"
BorderWidth="1px"
ColumnHeaderAscImage="00050104"
ColumnHeaderDescImage="00050105"
EnableKeyboardNavigation="True"
ItemHeight="15">
<ContentPaneStyle CssClass="ContentStyle"></ContentPaneStyle>
<ItemStyles>
<eo:GridItemStyleSet>
<SelectedStyle CssClass="SelectedItemStyle" />
<ItemStyle CssClass="ItemsStyle" />
<CellStyle CssClass="CellItemsStyle" />
</eo:GridItemStyleSet>
</ItemStyles>
<ColumnHeaderHoverStyle CssClass="ColumnHeaderHoverStyle" />
<ColumnHeaderStyle CssClass="ColumnHeaderStyle" />
<Columns>
<eo:StaticColumn HeaderText="Column 1" Width="-1" MinWidth="259" AllowSort="True" />
<eo:StaticColumn HeaderText="Column 2" AllowSort="True" />
<eo:StaticColumn HeaderText="Column 3" Width="130" AllowSort="True" />
</Columns>
</eo:Grid>
</asp:Panel>
</div>
</form>
</body>
</html>
C#:
Code: C#
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using EO.Web;
namespace WebSample
{
public partial class ScrollBars: System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
grid.DataSource = new object[100];
grid.DataBind();
int i;
string value = string.Empty;
for (i = 0; i < 100; i++)
{
value = string.Format("dummy {0}", i);
grid.Items[i].Cells[0].Value = value;
grid.Items[i].Cells[1].Value = value;
grid.Items[i].Cells[2].Value = value;
}
}
}
}
CSS file:
Code: CSS
.commonText
{
font-family: Microsoft Sans Serif;
font-size: 8.6pt;
}
/* --------- */
.ContentStyle
{
border-style: inset;
border-width: 1px;
border-color: DarkBlue;
}
.ColumnHeaderStyle, .ColumnHeaderHoverStyle
{
border-width: 1px;
border-right-color: Gray;
border-right-style: solid;
font: commonText;
padding-left: 8px;
padding-top: 3px;
}
.ColumnHeaderStyle
{
background: #DBDBDB;
border-bottom-style: solid;
border-bottom-color: Gray;
}
.ColumnHeaderHoverStyle
{
background-color: ghostwhite;
border-bottom-style: solid;
border-bottom-color: orange;
border-bottom-width: 2px;
}
.SelectedItemStyle, .ItemsStyle
{
cursor: pointer;
border-style: solid;
border-width: 1px;
border-bottom-color: Gray;
border-right-style: none;
border-left-style: none;
border-top-style: none;
}
.SelectedItemStyle
{
background-color: steelblue;
}
.ItemsStyle
{
background-color: white;
}
.CellItemsStyle
{
border-style: solid;
border-width: 1px;
border-right-color: Gray;
border-bottom-style: none;
border-left-style: none;
border-top-style: none;
padding-left: 5px;
padding-top: 1px;
}
I can't find a solution. Could you please help me with this? Thanks used EO version: 2008.0.40
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi Vadim, The problem is caused by the following style:
Code: CSS
.SelectedItemStyle, .ItemsStyle
{
cursor: pointer;
border-style: solid;
border-width: 1px;
border-bottom-color: Gray;
border-right-style: none;
border-left-style: none;
border-top-style: none;
}
Any border, margin or padding on this item would affect the layout. The Grid provides GridLines property for you to render horizontal or vertical grid lines. So it is not necessary to have borders on ItemStyle. Thanks
|
|
Rank: Newbie
Groups: Member
Joined: 10/3/2008
Posts: 4
|
Hi, thank you for the response - indeed the grid property solves the problems with shown rows and it works perfectly on IE. But on firefox version 3.0.3 it introduce another issue: the gridline border width is of 2px instead of 1px, the grid is not rendered as on IE. I changed the CSS styles as you suggest:
Code: CSS
.SelectedItemStyle, .ItemsStyle
{
cursor: pointer;
/*border-style :<span class='val'> solid</span>;
border-width:<span class='val'> <span class='unit'>1</span>px</span>;
border-bottom-color:<span class='val'> Gray</span>;
border-right-style:<span class='val'> none</span>;
border-left-style:<span class='val'> none</span>;
border-top-style:<span class='val'> none</span>; */
}
.CellItemsStyle
{
/*
border-style:<span class='val'> solid</span>;
border-width:<span class='val'> <span class='unit'>1</span>px</span>;
border-right-color:<span class='val'> Gray</span>;
border-bottom-style:<span class='val'> none</span>;
border-left-style:<span class='val'> none</span>;
border-top-style:<span class='val'> none</span>;
*/
padding-left: 5px;
padding-top: 1px;
}
and also I set the properties for gridlines as GridLines="Both" GridLineColor="Gray". Thanks, Vadim
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
This appears to be an issue and we will look into it and see what we can find.
Thanks!
|
|