Create a scrollable DataGrid custom Component

[Guillermo Castro]

Hi,

I want to create a custom Datagrid component that derives from the
default DataGrid and adds a <div> tag with the 'overflow' style. I've
added two properties to my custom datagrid, ScrollWidth and
ScrollHeight, to be set on the div. However, when I try to set the
properties on the designer, I get a "Invalid property value" error.

Has anyone done something similar, or can someone point me to a good
example on how to subclass DataGrid to get this kind of behavior?

Thanks.

 

[Robert McLaws]

Guillermo,

Unfortunately, this is nowhere near as easy as it looks. It took me over a
year of experimentation on and off to get it right. Instead of spending 5+
hours trying to figure it out, I would suggest that you check out
http://www.scrollingdatagrid.com instead. For $10, you can have a simple
control that allows the header and footer to stay stationary, while the data
area scrolls. For $40 you can get the source code and see how it all is
done.

Feel free to e-mail me if you have any questions, and let me know if I can
help you in any way.

Sincerely,
Robert W. McLaws
President and Chief Software Architect
Microsoft ASP.NET MVP
Interscape Technologies, Inc.
Simple. Affordable. Solutions.T
http://www.interscapeusa.com
http://www.codesideassistance.com
http://www.genxdotnet.com
http://www.scrollingdatagrid.com
http://www.longhornblogs.com
http://www.patchdayreview.com

 

[Walter Gomero]

Guillermo here's the code:
create a file scroll.htc and add this:

// JavaScript Document
<PUBLIC:ATTACH event="ondocumentready" handler="onDocumentReady" />
<SCRIPT language="JScript">
function onDocumentReady()
{
// Create elements
var tblHeader = this.cloneNode(false);
var tblBody = this.cloneNode(false);
var divCntr = document.createElement("DIV");

// Get column widths
var rgWidths = new Array();
for (var i = 0; i < this.rows[0].cells.length; i++)
{
rgWidths = this.rows[0].cells.offsetWidth;
}

// Add header row
var tbdyHeader = document.createElement("TBODY");
tblHeader.appendChild(tbdyHeader);
tbdyHeader.appendChild(this.rows[0].cloneNode(true));

// Add body rows
var tbdyBody = document.createElement("TBODY");
tblBody.appendChild(tbdyBody);

for (var i = 1; i < this.rows.length; i++)
{
var oRow = this.rows.cloneNode(true);
tbdyBody.appendChild(oRow);
}

// Set up body container
divCntr.style.overflow = "auto";
if (this.bodyHeight) divCntr.style.height = this.bodyHeight;
divCntr.appendChild(tblBody);

// Change existing table
for (var i = this.rows.length; i > 0; i--)
{
this.rows[i-1].removeNode(true);
}
var tr1 = this.insertRow();
var td1 = tr1.insertCell();
var tr2 = this.insertRow();
var td2 = tr2.insertCell();

td1.appendChild(tblHeader);
td2.appendChild(divCntr);

// Set column widths of all but the last column
for (var i = 0; i < rgWidths.length - 1; i++)
{
tblHeader.rows[0].cells.width = rgWidths;
tblBody.rows[0].cells.width = rgWidths;
}

tblHeader.style.fontSize = "100%";
tblHeader.width = "100%";
tblHeader.style.tableLayout = "fixed";
tblHeader.className = this.headerCSS ? this.headerCSS : "";
tblHeader.border = 0;

tblBody.style.fontSize = "100%";
tblBody.width = "100%";
tblBody.style.tableLayout = "fixed";
tblBody.className = this.bodyCSS ? this.bodyCSS : "";

tblBody.border = 0;

this.cellSpacing = 0;
this.cellPadding = 0;
}
</SCRIPT>

then add the following to you css:

tblMain
{
behavior:url(scroll.htc);
background-color: highlight;
border: 1px solid darkblue;
font-family: Verdana;
font-size: .8em;
}
tblHeader
{
color: highlighttext;
}
tblBody
{
background-color: #EEEEEE;
color: darkblue;
}

finally add (bodyCSS, headerCSS, cssClass and bodyHeight) to your
datagrid:

<asp:datagrid
id="mainGrid"
runat="server"
bodyCSS="tblBody"
headerCSS="tblHeader"
cssclass="tblMain"
bodyHeight="600px"
width="100%"
CellPadding="2"
CellSpacing="2"
GridLines="none"
Font-Size="9"
HeaderStyle-Font-Bold="true"
AllowSorting="true"
OnSortCommand="SortCommand"
autogeneratecolumns="false"
AllowPaging="true"
OnPreRender="DataGrid1_PreRender"
OnItemCreated="ItemCreated"
onPageIndexChanged="setPage"
ShowFooter="true" ShowHeader="true"
HeaderStyle-HorizontalAlign="Center">

 

[Walter Gomero]

create a file scroll.htc and add the following:
// JavaScript Document
<PUBLIC:ATTACH event="ondocumentready" handler="onDocumentReady" />
<SCRIPT language="JScript">
function onDocumentReady()
{
// Create elements
var tblHeader = this.cloneNode(false);
var tblBody = this.cloneNode(false);
var divCntr = document.createElement("DIV");

// Get column widths
var rgWidths = new Array();
for (var i = 0; i < this.rows[0].cells.length; i++)
{
rgWidths = this.rows[0].cells.offsetWidth;
}

// Add header row
var tbdyHeader = document.createElement("TBODY");
tblHeader.appendChild(tbdyHeader);
tbdyHeader.appendChild(this.rows[0].cloneNode(true));

// Add body rows
var tbdyBody = document.createElement("TBODY");
tblBody.appendChild(tbdyBody);

for (var i = 1; i < this.rows.length; i++)
{
var oRow = this.rows.cloneNode(true);
tbdyBody.appendChild(oRow);
}

// Set up body container
divCntr.style.overflow = "auto";
if (this.bodyHeight) divCntr.style.height = this.bodyHeight;
divCntr.appendChild(tblBody);

// Change existing table
for (var i = this.rows.length; i > 0; i--)
{
this.rows[i-1].removeNode(true);
}
var tr1 = this.insertRow();
var td1 = tr1.insertCell();
var tr2 = this.insertRow();
var td2 = tr2.insertCell();

td1.appendChild(tblHeader);
td2.appendChild(divCntr);

// Set column widths of all but the last column
for (var i = 0; i < rgWidths.length - 1; i++)
{
tblHeader.rows[0].cells.width = rgWidths;
tblBody.rows[0].cells.width = rgWidths;
}

tblHeader.style.fontSize = "100%";
tblHeader.width = "100%";
tblHeader.style.tableLayout = "fixed";
tblHeader.className = this.headerCSS ? this.headerCSS : "";
tblHeader.border = 0;

tblBody.style.fontSize = "100%";
tblBody.width = "100%";
tblBody.style.tableLayout = "fixed";
tblBody.className = this.bodyCSS ? this.bodyCSS : "";

tblBody.border = 0;

this.cellSpacing = 0;
this.cellPadding = 0;
}
</SCRIPT>

add the following lines to you css style:

.tblMain
{
behavior:url(scroll.htc);
background-color: highlight;
border: 1px solid darkblue;
font-family: Verdana;
font-size: .8em;
}
.tblHeader
{
color: highlighttext;
}
.tblBody
{
background-color: #EEEEEE;
color: darkblue;
}

finally add the following to your datagrid:
bodyCSS="tblBody"
headerCSS="tblHeader"
cssclass="tblMain"
bodyHeight="600px"

<asp:datagrid
id="mainGrid"
runat="server"
bodyCSS="tblBody"
headerCSS="tblHeader"
cssclass="tblMain"
bodyHeight="600px"
width="100%"
CellPadding="2"
CellSpacing="2"
GridLines="none"
Font-Size="9"
HeaderStyle-Font-Bold="true"
AllowSorting="true"
OnSortCommand="SortCommand"
autogeneratecolumns="false"
AllowPaging="true"
OnPreRender="DataGrid1_PreRender"
OnItemCreated="ItemCreated"
onPageIndexChanged="setPage"
ShowFooter="true" ShowHeader="true"
HeaderStyle-HorizontalAlign="Center">

regards,

walter gomero