|
|
Rank: Member
Groups: Member
Joined: 10/4/2007
Posts: 20
|
Hi, i've try to autofit column (width = -1) but i don't be able. See following code:
Code: HTML/ASPX
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Administration_Test" %>
<%@ 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>Pagina senza titolo</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<eo:Grid ID="Grid1" runat="server" BorderColor="#828790" BorderWidth="1px" ColumnHeaderAscImage="00050204"
ColumnHeaderDescImage="00050205" ColumnHeaderDividerImage="00050203" ColumnHeaderHeight="24"
Font-Bold="False" Font-Italic="False" Font-Names="Tahoma" Font-Overline="False"
Font-Size="8.75pt" Font-Strikeout="False" Font-Underline="False" GridLineColor="240, 240, 240"
GridLines="Both" Height="400px" ItemHeight="19" ScrollBars="Vertical" Width="600px">
<FooterStyle CssText="padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;" />
<ItemStyles>
<eo:GridItemStyleSet>
<ItemStyle CssText="background-color: white" />
<ItemHoverStyle CssText="background-image: url(00050206); background-repeat: repeat-x" />
<SelectedStyle CssText="background-image: url(00050207); background-repeat: repeat-x" />
<CellStyle CssText="padding-left:8px;padding-top:2px;" />
</eo:GridItemStyleSet>
</ItemStyles>
<ColumnTemplates>
<eo:TextBoxColumn>
<TextBoxStyle CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 8.75pt; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; FONT-FAMILY: Tahoma" />
</eo:TextBoxColumn>
<eo:DateTimeColumn>
<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="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;font-family:Courier New;font-size:8pt;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:1px;padding-left:2px;padding-right:2px;padding-top:2px;" />
<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>
<eo:MaskedEditColumn>
<MaskedEdit ControlSkinID="None" TextBoxStyle-CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; font-family:Courier New;font-size:8pt;">
</MaskedEdit>
</eo:MaskedEditColumn>
</ColumnTemplates>
<ColumnHeaderHoverStyle CssText="background-image:url('00050202');padding-left:8px;padding-top:4px;" />
<Columns>
<eo:StaticColumn DataField="C1" HeaderText="1" Text="" Width="-1">
</eo:StaticColumn>
<eo:StaticColumn DataField="C2" HeaderText="2" Text="" Width="-1">
</eo:StaticColumn>
<eo:StaticColumn DataField="C3" HeaderText="3" Width="-1">
</eo:StaticColumn>
</Columns>
<ColumnHeaderStyle CssText="background-image:url('00050201');padding-left:8px;padding-top:4px;" />
</eo:Grid>
</div>
</form>
</body>
</html>
Code: Visual Basic.NET
Partial Class Administration_Test
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Me.Grid1.DataSource = CreateTable()
Me.Grid1.DataBind()
End Sub
Private Function CreateTable() As DataTable
Dim Table As DataTable = New DataTable
For ColumnIndex As Integer = 0 To 3
Dim Column As DataColumn = New DataColumn()
Column.ColumnName = "C" & ColumnIndex
Column.DataType = GetType(Integer)
Table.Columns.Add(Column)
Next
Dim Rand As Random = New Random(0)
For RowIndex As Integer = 0 To 10
Dim Row As DataRow = Table.NewRow
For ColumnIndex As Integer = 0 To Table.Columns.Count - 1
Row("C" & ColumnIndex) = Rand.Next()
Next
Next
Return Table
End Function
End Class
Thanks
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,090
|
Hi,
You will only be able to "auto fit" one column. So setting multiple column's Width to -1 won't work. In your case, you need to give two columns fixed width and leave one column's Width to -1.
Thanks
|
|
Rank: Member
Groups: Member
Joined: 10/4/2007
Posts: 20
|
I've try but don't work..
You can send me the correct code??
Thanks
Seltris
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,090
|
Hi, Try to use the following code:
Code: HTML/ASPX
<eo:Grid ID="Grid1" runat="server" BorderColor="#828790" BorderWidth="1px" ColumnHeaderAscImage="00050204"
ColumnHeaderDescImage="00050205" ColumnHeaderDividerImage="00050203" ColumnHeaderHeight="24"
Font-Names="Tahoma" Font-Size="8.75pt" GridLineColor="240, 240, 240" GridLines="Both"
Height="400px" ItemHeight="19" Width="600px">
<ColumnTemplates>
<eo:TextBoxColumn>
<TextBoxStyle CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 8.75pt; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; FONT-FAMILY: Tahoma"></TextBoxStyle>
</eo:TextBoxColumn>
<eo:DateTimeColumn>
<DatePicker DayCellHeight="16" OtherMonthDayVisible="True" SelectedDates="" TitleRightArrowImageUrl="DefaultSubMenuIcon"
DisabledDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL" DayHeaderFormat="FirstLetter"
ControlSkinID="None" DayCellWidth="19">
<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"></CalendarStyle>
<PickerStyle 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;font-family:Courier New;font-size:8pt;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:1px;padding-left:2px;padding-right:2px;padding-top:2px;"></PickerStyle>
<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"></SelectedDayStyle>
<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"></TodayStyle>
<TitleArrowStyle CssText="cursor:hand"></TitleArrowStyle>
<MonthStyle CssText="font-family: tahoma; font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px"></MonthStyle>
<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"></DayHoverStyle>
<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"></DisabledDayStyle>
<DayHeaderStyle CssText="font-family: tahoma; font-size: 12px; border-bottom: #aca899 1px solid"></DayHeaderStyle>
<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"></OtherMonthDayStyle>
<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"></DayStyle>
<TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;"></TitleStyle>
</DatePicker>
</eo:DateTimeColumn>
<eo:MaskedEditColumn>
<MaskedEdit ControlSkinID="None" TextBoxStyle-CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; font-family:Courier New;font-size:8pt;"></MaskedEdit>
</eo:MaskedEditColumn>
</ColumnTemplates>
<ItemStyles>
<eo:GridItemStyleSet>
<ItemHoverStyle CssText="background-image: url(00050206); background-repeat: repeat-x"></ItemHoverStyle>
<SelectedStyle CssText="background-image: url(00050207); background-repeat: repeat-x"></SelectedStyle>
<CellStyle CssText="padding-left:8px;padding-top:2px;"></CellStyle>
<ItemStyle CssText="background-color: white"></ItemStyle>
</eo:GridItemStyleSet>
</ItemStyles>
<ColumnHeaderHoverStyle CssText="background-image:url('00050202');padding-left:8px;padding-top:4px;"></ColumnHeaderHoverStyle>
<ColumnHeaderStyle CssText="background-image:url('00050201');padding-left:8px;padding-top:4px;"></ColumnHeaderStyle>
<FooterStyle CssText="padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;"></FooterStyle>
<Columns>
<eo:StaticColumn Text="" HeaderText="1" DataField="C1"></eo:StaticColumn>
<eo:StaticColumn Width="-1" Text="" HeaderText="2" DataField="C2"></eo:StaticColumn>
<eo:StaticColumn HeaderText="3" DataField="C3"></eo:StaticColumn>
</Columns>
</eo:Grid>
The key is ScrollBars must be set to "Auto". Auto fit column does not work when ScrollBars is set to other values because it interfere with the Grid's dimension. Thanks
|
|
Rank: Newbie
Groups: Member
Joined: 10/3/2008
Posts: 4
|
Hi,
I have a eo:grid in an asp:UpdatePanel (AjaxToolkit).
One column has width=-1 - the autofit works correctly when the grid is placed in a asp page. But I need to use it in an update panel or an callback panel, the problem is that the autofit of the column is done after the binding.
Also I tried the callback panel instead of update panel - the effect is the same. Is it any solution for this?
Thanks.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,090
|
Hi,
We are not aware of any problem with auto fit column inside UpdatePanel or CallbackPanel. You can verify that by loading the demo page, then change the Demos\Grid\Features\Client Running Mode to use auto fit. Run the demo and you will see it works fine. All our demos are loaded with CallbackPanel.
If the problem continues, please provide a test page and steps to reproduce the problem, we will take a look as soon as we have that.
Thanks!
|
|
Rank: Newbie
Groups: Member
Joined: 10/3/2008
Posts: 4
|
Hi, thank you very much for a quick response  . Yes, I agree, the auto fit works correctly, but the effect is still visible when on the grid is bound huge amount of data - I can't use paging because of the requirements, also the eo:grid is the best we tried because of it's performance on rendering . I changed the demo control from Demos\Grid\Features\Client Running Mode, on columns section of the grid, the changes I made are on width attribute:
Code: HTML/ASPX
<Columns>
<eo:RowNumberColumn Width="-1" />
<eo:StaticColumn HeaderText="Posted At" DataField="PostedAt" Width="5" />
<eo:StaticColumn HeaderText="Posted By" DataField="PostedBy" Width="5" />
<eo:StaticColumn Width="5" HeaderText="Topic" DataField="Topic" />
</Columns>
also I set the grid width to 800px and columns with a fixed width to a lower size of 5px, number of test records 10000 - with such changes, even if is used a powerful machine, I hope the visible effect of auto sizing after binding can be still catched. Best regards, Vadim
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,090
|
Hi Vadim,
That is normal. The effect will always be visible. The reason is that when it contains a lot of record, the browser will have to first load those data yet. While it is loading those data, our code does not even get a chance to run. During this time you will auto fit column will not be the right width. Only after browser is done loading and after our code is called, the column will have the correct width.
Thanks
|
|