Welcome Guest Search | Active Topics | Sign In | Register

Grid optimization Options
the kid
Posted: Monday, December 1, 2008 7:21:39 AM
Rank: Member
Groups: Member

Joined: 7/29/2008
Posts: 14
I have created a web page with an EO grid control and when I opened the source of the result html page I found out many the same style tags. Something like:

style="position:absolute;left:100px;top:0px;height:100%;width:150px;overflow:hidden;text-overflow:ellipsis;border-right:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;

For example if there are 21 grid rows, the above style tag occurs 69 times.
In addition, there are many others the same style tags on the page (that belongs to the EO grid).

If you replace the style tag with class tag the size of the result html page will be much shorter.

In my case the size of the result html page is nearly 1.4 MB (with 50 grid rows) and the most of the html code take those style tags.

Is it possible to replace style tags with equivalent class tag?
eo_support
Posted: Monday, December 1, 2008 7:30:03 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,088
Hi,

That seems to be a problem. We will see what we can do.

Thanks!
Rory
Posted: Tuesday, December 2, 2008 3:04:35 AM
Rank: Member
Groups: Member

Joined: 1/29/2008
Posts: 17
Hi,

I seem to have a similar issue, with the grid page size = 479KB with 81 data rows, without the grid = 88KB. Lots of lines of style code that seem duplicated. This causes the page performance to be extremely poor, almost unusable.

Can you have a look at the problem and let us know if there is a solution. My client is about to drop the product.

Many Thanks
eo_support
Posted: Tuesday, December 2, 2008 6:15:22 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,088
Hi Rory,

Can you check whether you have the Grid's Height set to 100%?

Thanks!
the kid
Posted: Wednesday, December 3, 2008 6:05:58 AM
Rank: Member
Groups: Member

Joined: 7/29/2008
Posts: 14
I haven't set height property of the grid at all. But I use grid.setHeight(val) function inside ClientSideOnResize splitter event to set grid size. It works correctly but the size of the page is about 1.37 MB. When I set Height and Width properties of the grid (to 444px both for e.g.), grid.setHeight() function doesn't work (the height of the grid is always 444 - I can check that by using grid.getOffsetHeight() function). Otherwise, the grid.setWidth() function works corretly!!! In that case, the size of the page is much shorter (about 287 kB). Any suggestion?
...


In the second case, when I set width and height properies of the grid there are still about 65 stile tags:

style="position:absolute;left:280px;top:0px;height:100%;width:100px;overflow:hidden;text-overflow:ellipsis;border-right:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;"

If you replace style tag with correspondind class tag the size of the page will be shorter.

eo_support
Posted: Wednesday, December 3, 2008 6:11:02 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,088
Hi,

Setting Grid height to 100% or leave it empty has almost the same effect in term of the size because neither provide the Grid an accurate value. However setHeight should work regardless. We will look into that and see what we can find.

Thanks!
the kid
Posted: Wednesday, December 3, 2008 6:18:24 AM
Rank: Member
Groups: Member

Joined: 7/29/2008
Posts: 14
This is the code of my web page:

Code: HTML/ASPX
<%@ Page Title="Preuzimanje Naloga" Language="C#" MasterPageFile="~/Nalozi/MasterPage.master" AutoEventWireup="true" CodeFile="PreuzimanjeNaloga.aspx.cs" Inherits="Nalozi_PreuzimanjeNaloga" %>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<%@ Register src="../Common/ServerPager.ascx" tagname="ServerPager" tagprefix="uc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript" language="javascript" src="../Scripts/NaloziC.js" ></script>
    <script type="text/javascript" language="javascript" src="../Scripts/NaloziP.js" ></script>
	<meta http-equiv="Page-Enter" content="blendtrans(duration=0.4)" />
	<meta http-equiv="Page-Exit" content="blendtrans(duration=0.4)" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cp1" Runat="Server">
	<div>
		<asp:ScriptManager ID="ScriptManager1" runat="server" EnableViewState="false" AsyncPostBackTimeout="600">
			<Services>
				<asp:ServiceReference Path="../Services/ProcessorsService.asmx" />
			</Services>
		</asp:ScriptManager>
	</div>
	<eo:CallbackPanel ID="CallbackPanel1" runat="server" Triggers="{ControlID:ddlPageSize;Parameter:},{ControlID:ddlBranches;Parameter:},{ControlID:ServerPager1;Parameter:},{ControlID:Grid1;Parameter:}" ClientSideBeforeExecute="beginRequest" ClientSideAfterUpdate="endRequest" >
		<table width="100%" >
			<tr>
				<td>
					<table>
						<tr>
							<td style="white-space:nowrap">
								<asp:DropDownList AutoPostBack="true" ID="ddlPageSize" onchange="savePageSize(this);" runat="server"></asp:DropDownList>
								<asp:DropDownList AutoPostBack="true" ID="ddlBranches" runat="server"></asp:DropDownList>
							</td>
							<td style="text-align:right">
								<uc1:ServerPager ID="ServerPager1" runat="server" />
							</td>
						</tr>
					</table>
				</td>
				<td style="white-space:nowrap;">
					<input type="checkbox" class="PagerNumber" id="cbxDisplayNalog" name="cbxDisplayNalog" onclick="hide_ifPdf(this);" checked="checked" /><span class="PagerNumber" onclick="document.getElementById('cbxDisplayNalog').click();" >Prikaži nalog</span>
					<input type="checkbox" class="PagerNumber" tabindex="-1" id="cbxDispNalogInWindow" name="cbxDispNalogInWindow" onclick="setDisplayPdf(this);" /><span class="PagerNumber" onclick="document.getElementById('cbxDispNalogInWindow').click();" >Prikaži nalog u novom prozoru</span>
				</td>
			</tr>
			<tr valign="top">
				<td colspan="2" style="width:100%">
					<eo:Splitter runat="server" id="Splitter1" BorderStyle="Solid" DividerSize="10" ClientSideOnResized="Splitter1_OnResized"
						BorderWidth="1px" ControlSkinID="None" DividerImage="00080411" BorderColor="#B5B5B5" DividerCenterImage="00080412" AutoFillWindow="True" HeightMargin="35">
						<eo:SplitterPane id="LeftPane" Width="950px" Height="444px" runat="server" ScrollBars="None">
							<iframe id="ifPdf" height="446px" style="visibility:hidden;z-index:-1"></iframe>
						</eo:SplitterPane>
						<eo:SplitterPane id="RightPane" runat="server" ScrollBars="None">
							<eo:Grid ID="Grid1" runat="server" BorderColor="#828790" BorderWidth="1px" Height="444px" Width="200px"
								ColumnHeaderAscImage="00050204" ColumnHeaderDescImage="00050205" OnInit="Grid1_Initialize"
								ColumnHeaderDividerImage="00050203" ColumnHeaderHeight="24" OnColumnSort="Grid1_Sort"
								FixedColumnCount="4" Font-Bold="False" Font-Italic="False" Font-Names="Tahoma" FullRowMode="True"
								Font-Overline="False" Font-Strikeout="False" Font-Underline="False"  Font-Size="Small"
								GridLineColor="240, 240, 240" GridLines="Both" ClientSideOnLoad="Grid1_OnLoad" 
								RunningMode="Client" ClientSideOnItemSelected="On_Item_Sellected" 
								EnableKeyboardNavigation="True" ClientSideBeforeEditItem="Grid1_BeforeEditItem" 
								ClientSideAfterEditItem="Grid1_AfterEditItem">
								<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:4px;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 ID="DatePicker2" ControlSkinID="None" DayCellHeight="16" DayCellWidth="19" runat="server"
											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 ID="MaskedEdit2" ControlSkinID="None" runat="server" 
											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:4px;padding-top:4px;" />
								<Columns>
									<eo:StaticColumn Width="0" DataField="FullPath" AllowResize="False"></eo:StaticColumn>
									<eo:StaticColumn Width="30" AllowResize="false" DataFormat="'checkbox' id='{0}' onclick='setCheckboxColumn(this);' onmouseout='changeChecked(this);' />" DataField="Id" Name="chkColumn">
										<CellStyle CssText="MARGIN:0;PADDING-LEFT:2px" />
									</eo:StaticColumn>
									<eo:StaticColumn HeaderText="Id" Width="50" DataField="Id" AllowSort="True"></eo:StaticColumn>
									<eo:StaticColumn HeaderText="Name" Width="200" DataField="FileName" AllowSort="True"></eo:StaticColumn>
									<eo:StaticColumn Width="100" DataField="VrstaPlacanja" HeaderText="Vrsta plaćanja" AllowSort="True"></eo:StaticColumn>
									<eo:StaticColumn Width="100" DataField="FrontOfficer" HeaderText="Front Officer" AllowSort="True"></eo:StaticColumn>
									<eo:TextBoxColumn Width="196" DataField="Opis" HeaderText="Opis" AllowSort="True"></eo:TextBoxColumn>
									<eo:StaticColumn Width="80" DataField="UploadDate" HeaderText="Skeniran" DataFormat="{0:dd/MM/yyyy}" AllowSort="True"></eo:StaticColumn>
									<eo:StaticColumn Width="80" DataField="CreatedDate" HeaderText="Kreiran" DataFormat="{0:dd/MM/yyyy}" AllowSort="True"></eo:StaticColumn>
									<eo:StaticColumn Width="80" DataField="ModifiedDate" HeaderText="Izmjenjen" DataFormat="{0:dd/MM/yyyy}" AllowSort="True"></eo:StaticColumn>
									<eo:StaticColumn Width="120" DataField="LastModifyBy" HeaderText="Izmjenio" AllowSort="True"></eo:StaticColumn>
								</Columns>
								<ColumnHeaderStyle CssText="background-image:url('00050201');padding-left:4px;padding-top:4px;" />
							</eo:Grid>
						</eo:SplitterPane>
					</eo:Splitter>
				</td>
			</tr>
			<tr>
				<td>
					<input type="button" id="btnPreuzmi" onclick="btnPreuzmi_OnClick();" value="Preuzmi Označene" />
				</td>
			</tr>
		</table>
	</eo:CallbackPanel>
	<center style="position: absolute; top: 49%; left: 49%;display:none;">
		<img alt="loading..." src="../Resursi/3.gif" id="imgLoad" />
	</center>
</asp:Content>


and this is the function where I try to set grid size:

Code: JavaScript
function Splitter1_OnResized(splitter) {
	var frame = document.getElementById("ifPdf");
	//var splitter = eo_GetObject('Splitter1');
	frame.width = splitter.getLeftPane().getWidth();
	frame.height = splitter.getLeftPane().getHeight();
	var grid = eo_GetObject('Grid1');
	var width = splitter.getRightPane().getWidth();
//	if (Math.abs(grid.getOffsetWidth() - width) &gt; 2 || Math.abs(grid.getOffsetHeight() - frame.height) &gt; 2)
//		grid.setSize(width - 1, frame.height);
	if (Math.abs(grid.getOffsetWidth() - width) > 2)
		grid.setWidth(width - 1);
	if (Math.abs(grid.getOffsetHeight() - frame.height) > 2)
		grid.setHeight(frame.height);
	setCookie("Splitter.LeftPane.Width", frame.width);
}
eo_support
Posted: Wednesday, December 3, 2008 6:25:37 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,088
Hi,

Can you separate the issue into a page that can run independently? We won't be able to see your problem unless we can run your test page. We tested the following code and it works fine:

Code: HTML/ASPX
<script>
function resize_handler()
{
    var w = Splitter1.getRightPane().getWidth();
    Grid1.setHeight(w);
}
</script>
<eo:Splitter runat="server" id="Splitter1" BorderColor="#B5B5B5" BorderWidth="1px" Width="300px"
    Height="200px" BorderStyle="Solid" DividerSize="10" ControlSkinID="None" DividerImage="00080431"
    Orientation="Horizontal" DividerCenterImage="00080432">
    <eo:SplitterPane id="SplitterPane1" runat="server" Width="100px" Height="91px"></eo:SplitterPane>
    <eo:SplitterPane id="Splitterpane2" runat="server" Width="296px" Height="112px">
        <eo:Grid id="Grid1" runat="server" BorderColor="#828790" BorderWidth="1px" Font-Size="8.75pt"
            Font-Names="Tahoma" GridLines="Both" FixedColumnCount="1" ColumnHeaderDescImage="00050205"
            GridLineColor="240, 240, 240" Width="380px" ItemHeight="19" ColumnHeaderAscImage="00050204"
            ColumnHeaderHeight="24" Height="200px" ColumnHeaderDividerImage="00050203">
            <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>
                        <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>
                        <TitleArrowStyle CssText="cursor:hand"></TitleArrowStyle>
                        <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>
                        <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>
                        <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;white-space:nowrap;"></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:RowNumberColumn></eo:RowNumberColumn>
                <eo:StaticColumn HeaderText="Header"></eo:StaticColumn>
                <eo:StaticColumn HeaderText="Header"></eo:StaticColumn>
            </Columns>
        </eo:Grid>
    </eo:SplitterPane>
</eo:Splitter>


Thanks!
the kid
Posted: Wednesday, December 3, 2008 8:00:57 AM
Rank: Member
Groups: Member

Joined: 7/29/2008
Posts: 14
I have created test page with your code and it still does not work! Try to set ScrollBars property of the Splitter's right and left pane to "None" and try again. You can find out that Grid1.setWidth() function works corretly unlike Grid1.setHeight().


To check this put this code inside resize_handler function:

Code: JavaScript
function resize_handler()
{
    var w = Splitter1.getRightPane().getWidth();
    var h = Splitter1.getRightPane().getHeight();
    var oldw = Grid1.getOffsetWidth();
    Grid1.setWidth(w);
    var neww = Grid1.getOffsetWidth();
    var oldh = Grid1.getOffsetHeight();
    Grid1.setHeight(h);
    var newh = Grid1.getOffsetHeight();
    alert('Old width: ' + oldw + ' New width: ' + neww + ' Old height: ' + oldh + ' New height: ' + newh);
}


and you will see difference between the old and the new width and no difference between the old and the new height.
eo_support
Posted: Wednesday, December 3, 2008 9:40:01 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,088
Hi,

Can you first try our code as is without ANY modification and see if it works?

Thanks
the kid
Posted: Wednesday, December 3, 2008 9:56:05 AM
Rank: Member
Groups: Member

Joined: 7/29/2008
Posts: 14
this is my test web page:
Code: HTML/ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Nalozi_Test" %>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<%@ Register src="../Common/ServerPager.ascx" tagname="ServerPager" tagprefix="uc1" %>

<!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></title>
    <script type="text/javascript" language="javascript" src="../Scripts/NaloziP.js" ></script>
    <script type="text/javascript" language="javascript">
    	function pageLoad() {
    		var cbx = document.getElementById('cbxDispNalogInWindow');
    		if (cbx)
    			cbx.checked = getCookie("open_in_new_window") == "true";
    		cbx = document.getElementById('cbxDisplayNalog');
    		if (cbx)
    			cbx.checked = getCookie("open_in_frame") == "true";
    	}

    	function beginRequest(sender, Args) {
    		showLoading();
    	}

    	function endRequest(sender, Args) {
    		hideLoading();
    	}

    	var iLoad;
    	function showLoading() {
    		if (iLoad == null)
    			iLoad = document.getElementById('imgLoad');
    		if (iLoad == null)
    			return;
    		iLoad.style.display = "block";
    		iLoad.parentElement.style.display = "block";
    	}

    	function hideLoading() {
    		if (iLoad == null)
    			iLoad = document.getElementById('imgLoad');
    		if (iLoad == null)
    			return;
    		iLoad.style.display = "none";
    		iLoad.parentElement.style.display = "none";
    	}

    	function Grid1_OnDblClick() {
    		var grid = eo_GetObject('Grid1');
    		var item = grid.getSelectedItem();
    		if (item)
    			grid.editItem(item.getIndex(), true);
    	}

    	function Grid1_OnLoad(grid) {
    		for (var i = 0; i < grid.getItemCount(); i++) {
    			var item = grid.getItem(i);
    			if (item.aasf)
    				item.aasf.aanz.ondblclick = Grid1_OnDblClick;
    		}
    		//	grid.setSize(getCookie('Splitter.RightPane.Width'), getCookie('Splitter.LeftPane.Height'));
    	}

    	var win;
    	function On_Item_Sellected(grid) {
    		var cbx = document.getElementById("cbxDisplayNalog");
    		var item = grid.getSelectedItem();
    		if (item == null)
    			return;
    		var path = item.getCell(0).getValue();
    		if (document.getElementById('cbxDispNalogInWindow').checked) {
    			if (win == null || win.closed) {
    				var features = "toolbar=0,menubar=0,status=0,titlebar=0,location=0,scrollbars=1,resizable=1";
    				win = window.open("PreviewNalog.aspx?Path=" + path, "", features);
    			}
    			else {
    				win.document.getElementById('ifPdf').src = path;
    				win.focus();
    			}
    		}
    		if (cbx.checked) {
    			var frame = document.getElementById("ifPdf");
    			if (frame.src == path)
    				return;
    			var splitter = eo_GetObject('Splitter1');
    			frame.width = splitter.getLeftPane().getWidth();
    			frame.height = splitter.getLeftPane().getHeight();
    			frame.style.visibility = "visible";
    			frame.src = path;
    		}
    	}

    	function hide_ifPdf(cbx) {
    		var frame = document.getElementById("ifPdf");
    		frame.style.visibility = cbx.checked ? "visible" : "hidden";
    		setCookie("open_in_frame", cbx.checked);
    	}

    	function setDisplayPdf(cbx) {
    		var cbxDn = document.getElementById('cbxDisplayNalog');
    		cbxDn.checked = !cbx.checked;
    		hide_ifPdf(cbxDn);
    		setCookie("open_in_new_window", cbx.checked);
    	}

    	function Splitter1_OnLoad(splitter) {
    		splitter.setSize(window.document.documentElement.clientWidth - 22, window.document.documentElement.clientHeight - 100);
    	}

    	function setSplitterSize() {
    		var splitter = eo_GetObject('Splitter1');
    		if (splitter)
    			splitter.setSize(window.document.documentElement.clientWidth - 22, window.document.documentElement.clientHeight - 100);
    	}

    	function Splitter1_OnResized(splitter) {
    		var frame = document.getElementById("ifPdf");
    		//var splitter = eo_GetObject('Splitter1');
    		frame.width = splitter.getLeftPane().getWidth();
    		frame.height = splitter.getLeftPane().getHeight();
    		//var grid = eo_GetObject('Grid1');
    		var width = splitter.getRightPane().getWidth();
    		//	if (Math.abs(grid.getOffsetWidth() - width) > 2 || Math.abs(grid.getOffsetHeight() - frame.height) > 2)
    		//		grid.setSize(width - 1, frame.height);
    		if (Math.abs(Grid1.getOffsetWidth() - width) > 2)
    			Grid1.setWidth(width - 1);
    		if (Math.abs(Grid1.getOffsetHeight() - frame.height) > 2)
    			Grid1.setHeight(frame.height);
    		setCookie("Splitter.LeftPane.Width", frame.width);
    		//	setCookie("Splitter.RightPane.Width", width);
    		//	setCookie("Splitter.LeftPane.Height", frame.height);
    		//	//splitter.setSize(window.document.documentElement.clientWidth - 22, window.document.documentElement.clientHeight - 100);
    	}

    	function savePageSize(ddlPageSize) {
    		setCookie("SelectedPageSize", ddlPageSize.value);
    	}
    	//////////////////////////////////////////////////////////////////////////////////////////////////////////
    	var bikky = document.cookie;
    	var today = new Date();
    	var expiry = new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000); // plus 7 days

    	function setCookie(name, value) {
    		//if (value != null && value != "")
    		document.cookie = name + "=" + escape(value) + "; expires=" + expiry.toGMTString();
    		bikky = document.cookie; // update bikky
    	}

    	function getCookie(name) {
    		var index = bikky.indexOf(name + "=");
    		if (index == -1) return null;
    		index = bikky.indexOf("=", index) + 1;
    		var endstr = bikky.indexOf(";", index);
    		if (endstr == -1) endstr = bikky.length;
    		return unescape(bikky.substring(index, endstr));
    	}    
    </script>
</head>
<body>
    <form id="form1" runat="server">
	<div>
		<asp:ScriptManager ID="ScriptManager1" runat="server" EnableViewState="false" AsyncPostBackTimeout="600">
			<Services>
				<asp:ServiceReference Path="../Services/ProcessorsService.asmx" />
			</Services>
		</asp:ScriptManager>
	</div>
		<eo:Splitter runat="server" id="Splitter1" BorderStyle="Solid" DividerSize="10" ClientSideOnResized="Splitter1_OnResized"
			BorderWidth="1px" ControlSkinID="None" DividerImage="00080411" BorderColor="#B5B5B5" DividerCenterImage="00080412" AutoFillWindow="True" HeightMargin="35">
			<eo:SplitterPane id="LeftPane" Width="950px" Height="446px" runat="server" ScrollBars="None">
				<iframe id="ifPdf" height="446px" style="visibility:hidden;z-index:-1"></iframe>
			</eo:SplitterPane>
			<eo:SplitterPane id="RightPane" runat="server" Height="446px" ScrollBars="None">
				<eo:Grid id="Grid1" runat="server" BorderColor="#828790" BorderWidth="1px" Font-Size="8.75pt"
					Font-Names="Tahoma" GridLines="Both" FixedColumnCount="1" ColumnHeaderDescImage="00050205"
					GridLineColor="240, 240, 240" Width="380px" ItemHeight="19" ColumnHeaderAscImage="00050204"
					ColumnHeaderHeight="24" Height="200px" ColumnHeaderDividerImage="00050203">
					<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:4px;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 ID="DatePicker2" ControlSkinID="None" DayCellHeight="16" DayCellWidth="19" runat="server"
								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 ID="MaskedEdit2" ControlSkinID="None" runat="server" 
								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:4px;padding-top:4px;" />
					<Columns>
						<eo:StaticColumn Width="0" DataField="FullPath" AllowResize="False"></eo:StaticColumn>
						<eo:StaticColumn Width="30" AllowResize="false" DataFormat="'checkbox' id='{0}' onclick='setCheckboxColumn(this);' onmouseout='changeChecked(this);' />" DataField="Id" Name="chkColumn">
							<CellStyle CssText="MARGIN:0;PADDING-LEFT:2px" />
						</eo:StaticColumn>
						<eo:StaticColumn HeaderText="Id" Width="50" DataField="Id" AllowSort="True"></eo:StaticColumn>
						<eo:StaticColumn HeaderText="Name" Width="200" DataField="FileName" AllowSort="True"></eo:StaticColumn>
						<eo:StaticColumn Width="100" DataField="VrstaPlacanja" HeaderText="Vrsta plaćanja" AllowSort="True"></eo:StaticColumn>
						<eo:StaticColumn Width="100" DataField="FrontOfficer" HeaderText="Front Officer" AllowSort="True"></eo:StaticColumn>
						<eo:TextBoxColumn Width="196" DataField="Opis" HeaderText="Opis" AllowSort="True"></eo:TextBoxColumn>
						<eo:StaticColumn Width="80" DataField="UploadDate" HeaderText="Skeniran" DataFormat="{0:dd/MM/yyyy}" AllowSort="True"></eo:StaticColumn>
						<eo:StaticColumn Width="80" DataField="CreatedDate" HeaderText="Kreiran" DataFormat="{0:dd/MM/yyyy}" AllowSort="True"></eo:StaticColumn>
						<eo:StaticColumn Width="80" DataField="ModifiedDate" HeaderText="Izmjenjen" DataFormat="{0:dd/MM/yyyy}" AllowSort="True"></eo:StaticColumn>
						<eo:StaticColumn Width="120" DataField="LastModifyBy" HeaderText="Izmjenio" AllowSort="True"></eo:StaticColumn>
						<eo:RowNumberColumn></eo:RowNumberColumn>
					</Columns>
					<ColumnHeaderStyle CssText="background-image:url('00050201');padding-left:4px;padding-top:4px;" />
				</eo:Grid>
			</eo:SplitterPane>
		</eo:Splitter>
    </form>
</body>
</html>
eo_support
Posted: Wednesday, December 3, 2008 10:12:15 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,088
You must understand that our support DOES NOT troubleshoot your code. We have asked you multiple times to:

1. Run our test page exactly as it is and see if it works;
2. Produce a test page that reproduces the problem and runs independently;

You keep ignoring these and running your own page and claim that you tried our test page and it didn't work. The test page you pasted contains other JavaScript and server controls that we have no knowledge about. We already gave you a working example, so to the least extend, you should try to follow that example first.

This issue is now closed.


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.