Create a scrollable DataGrid custom Component

Discussion in 'ASP .Net Datagrid Control' started by Guillermo Castro, Dec 29, 2003.

  1. 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.

    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
     
    Guillermo Castro, Dec 29, 2003
    #1
    1. Advertising

  2. 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

    "Guillermo Castro" <> wrote in message
    news:...
    > 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.
    >
    > *** Sent via Developersdex http://www.developersdex.com ***
    > Don't just participate in USENET...get rewarded for it!
     
    Robert McLaws, Jan 6, 2004
    #2
    1. Advertising

  3. 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">


    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
     
    Walter Gomero, Jan 6, 2004
    #3
  4. 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

    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
     
    Walter Gomero, Jan 6, 2004
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. makthar

    Scrollable datagrid

    makthar, Jul 15, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    441
    Sukesh Ashok Kumar
    Jul 16, 2003
  2. EMW

    Scrollable Datagrid...

    EMW, Jun 3, 2004, in forum: ASP .Net
    Replies:
    5
    Views:
    606
  3. JezB
    Replies:
    3
    Views:
    379
  4. Noozer
    Replies:
    3
    Views:
    9,024
    dorayme
    May 15, 2005
  5. Andy Elvey
    Replies:
    0
    Views:
    784
    Andy Elvey
    Sep 27, 2009
Loading...

Share This Page