Grid sizing performance - Essential Objects, Inc. Support Forum

Welcome Guest

Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Grid sizing performance

Grid sizing performance

Options

Previous Topic · Next Topic

Norm

Posted: Tuesday, December 18, 2007 8:12:51 AM

Rank: Member
Groups: Member

Joined: 11/29/2007
Posts: 25

Hi There,

I place a grid within a splitter pane with the intention of filling the pane even when resizing the splitter pane. To do this I set both the width and heigth of the grid to 100%. The grid sizes correctly but loads veeeerrryyyy slowly, even with only 10 rows. If I set a fixed size for the grid the permance is fine.

If I place a callback panel in the splitter and have the grid within the callback, the grid does not size correctly.

Any suggestions?

Norm

Posted: Tuesday, December 18, 2007 8:19:58 AM

Rank: Member
Groups: Member

Joined: 11/29/2007
Posts: 25

I am using version 5.0.14.2 of the dll.

eo_support

Posted: Tuesday, December 18, 2007 8:23:22 AM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194

Hi,

The Grid renders many extra rows when it does not know its size in advance. You can avoid this by not using 100%, but handle the splitter's client side event to dynamically resize the Grid. Make sure you have the latest version before you do that. You can find sample code on how to use the splitter's client side event to dynamically resize the Grid at here:

http://www.essentialobjects.com/Demo/Default.aspx?path=Splitter\features\resize_contents

Thanks

Norm

Posted: Tuesday, December 18, 2007 9:19:58 PM

Rank: Member
Groups: Member

Joined: 11/29/2007
Posts: 25

Thanks for the link. Could you check out that particular page of the demo please - the invitation is there to "Please switch to JavaScript tab for the source code" however there is no Javascript tab that I can can see?

Norm

Posted: Tuesday, December 18, 2007 11:48:54 PM

Rank: Member
Groups: Member

Joined: 11/29/2007
Posts: 25

I checked the javascript in the demo program, and have implemented something similar on the grid. However, even though the grid resizes correctly (I see the grid border and contentpane change size), the area where the grid rows are drawn remain at the size set at design time. So I end up with a horizontal scroll bar through the middle of the content pane. Here is the javascript:

function OnSplitterResized(splitter)
{
//Get the pane's client size
var leftWidth = splitter.getLeftPane().getWidth();
var leftHeight = splitter.getLeftPane().getHeight();

//Resize the Filter grid
var filterGrid = document.getElementById("<%=GridInventorySearchFilter.ClientID%>");
filterGrid.style.width = (leftWidth).toString() + "px";
filterGrid.style.height = (leftHeight).toString() + "px";
}

Your help is appreciated.

eo_support

Posted: Wednesday, December 19, 2007 7:22:03 AM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194

Hi Norm,

First make sure you have the latest version (5.0.16), then make sure scrollbars are disabled on the containing SplitterPane. The default scroll bar settings on the SplitterPane is auto, which would display scroll bars.

Thanks

Norm

Posted: Wednesday, December 19, 2007 7:54:35 AM

Rank: Member
Groups: Member

Joined: 11/29/2007
Posts: 25

Hi There,

I have taken those steps. dll is 5.0.16.2 and splitterpane has scroll bars set to none.
The scroll bar(s) that appear do seem to belong to the grid and not the splitter pane.

Thanks.

eo_support

Posted: Wednesday, December 19, 2007 8:02:08 AM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194

Hi Norm,

You can not use this code to resize the grid:

//Resize the Filter grid
var filterGrid = document.getElementById("<%=GridInventorySearchFilter.ClientID%>");
filterGrid.style.width = (leftWidth).toString() + "px";
filterGrid.style.height = (leftHeight).toString() + "px";

You muse call the setSize method on the client side Grid object like the sample code does on the TreeView object.

Thanks

Norm

Posted: Tuesday, January 1, 2008 10:52:00 PM

Rank: Member
Groups: Member

Joined: 11/29/2007
Posts: 25

I have been on holiday for a bit, so sorry for the delay in responding.

Thanks, I will try the setSize method.

Norm

Posted: Sunday, January 6, 2008 11:33:59 PM

Rank: Member
Groups: Member

Joined: 11/29/2007
Posts: 25

Hi Support,

I have used the setSize method as per your suggestion but the result is exactly the same.

Thanks.

eo_support

Posted: Monday, January 7, 2008 5:29:50 AM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194

Can you post your code?

Norm

Posted: Monday, January 7, 2008 6:16:47 AM

Rank: Member
Groups: Member

Joined: 11/29/2007
Posts: 25

Sure, below is the function I am using.

function OnSplitterResized(splitter)
{
//Get the pane's client size
var leftWidth = splitter.getLeftPane().getWidth();
var leftHeight = splitter.getLeftPane().getHeight();
var rightWidth = splitter.getRightPane().getWidth();
var rightHeight = splitter.getRightPane().getHeight();

//Resize the Filter grid
var gridFilter = eo_GetObject("GridInventorySearchFilter");
gridFilter.setSize(leftWidth - 16, leftHeight - 6);
//Resize the Data grid
var gridData = eo_GetObject("GridViewFilteredData");
gridData.setSize(rightWidth - 16, rightHeight - 6);
}

Thanks.

eo_support

Posted: Monday, January 7, 2008 6:37:39 AM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194

Hi,

That appears to be correct. Can you create a sample app that demonstrates the problem and send it to us?

Thanks

Norm

Posted: Monday, January 7, 2008 7:44:20 AM

Rank: Member
Groups: Member

Joined: 11/29/2007
Posts: 25

Ok, I include the code below - I could mail the project to you if you like.

////////////
/// first the 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>

<script language="javascript" type="text/javascript">
function OnSplitterResized(splitter)
{
//Get the pane's client size
var leftWidth = splitter.getLeftPane().getWidth();
var leftHeight = splitter.getLeftPane().getHeight();

//Resize the grid
var gridFilter = eo_GetObject("Grid1");
gridFilter.setSize(leftWidth - 16, leftHeight - 6);
}
</script>

<body>
<form id="form1" runat="server">
<div>
<eo:splitter id="Splitter1" runat="server" autofillwindow="True" bordercolor="#3B619C" borderstyle="Solid" borderwidth="1px" clientsideonresized="OnSplitterResized" controlskinid="None" dividerimage="00080201" dividersize="6" height="200px" width="681px">
<eo:splitterpane id="SplitterPane1" runat="server" height="376px" scrollbars="None" width="517px">
<eo:grid id="Grid1" runat="server" bordercolor="red" borderwidth="1px" columnheaderascimage="00050303" columnheaderdescimage="00050304" columnheaderdividerimage="00050302" fixedcolumncount="1" font-bold="False" font-italic="False" font-names="Verdana" font-overline="False" font-size="9pt" font-strikeout="False" font-underline="False" gridlinecolor="199, 209, 223" gridlines="Both" height="143px" itemheight="19" width="300px">
<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; color:#336699;" />
</eo:griditemstyleset>
</itemstyles>
<columnheaderstyle csstext="background-image:url('00050301');padding-left:8px;padding-top:2px;font-weight: bold;color:white;" />
<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>
<columns>
<eo:rownumbercolumn>
</eo:rownumbercolumn>
<eo:staticcolumn datafield="StockCode" headertext="Code" text="Cell">
</eo:staticcolumn>
<eo:staticcolumn datafield="Description" headertext="Description" text="Cell" width="200">
</eo:staticcolumn>
</columns>
</eo:grid>
</eo:splitterpane>
<eo:splitterpane id="SplitterPane2" runat="server" height="180px" scrollbars="None" width="100px">
</eo:splitterpane>
</eo:splitter>
</div>
</form>
</body>
</html>

//////////////
/// then the .cs code
//////////////

using System;
using System.Data;
using System.Configuration;
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;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DataTable table = CreateTestTable();

Grid1.DataSource = table;
Grid1.DataBind();

}

private DataTable CreateTestTable()
{
// Create a test DataTable with two columns and a some rows.
DataTable table = new DataTable("TestData");
DataColumn column = new DataColumn("StockCode", typeof(System.String));
table.Columns.Add(column);
column = new DataColumn("Description", typeof(System.String));
table.Columns.Add(column);

// Add 100 rows.
DataRow row;
for (int i = 0; i < 100; i++)
{
row = table.NewRow();
row["StockCode"] = i.ToString();
row["Description"] = "Item " + i.ToString();
table.Rows.Add(row);
}

table.AcceptChanges();
return table;
}

}

Norm

Posted: Monday, January 7, 2008 7:49:48 AM

Rank: Member
Groups: Member

Joined: 11/29/2007
Posts: 25

Perhaps just replace the columns section of the grid with this:

<columns>
<eo:rownumbercolumn>
</eo:rownumbercolumn>
<eo:staticcolumn datafield="StockCode" headertext="Code" >
</eo:staticcolumn>
<eo:staticcolumn datafield="Description" headertext="Description" width="200">
</eo:staticcolumn>
</columns>

eo_support

Posted: Monday, January 7, 2008 7:57:09 AM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194

Thanks. We will take a look and let you know if we find anything or need any more information from you.

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.

Message