[CLOSED] TreeGrid : Need the Tree-Grid Column Header to be fixed while scrolling down the grid contents

  1. #1

    [CLOSED] TreeGrid : Need the Tree-Grid Column Header to be fixed while scrolling down the grid contents

    I have an aspx page which has an Ext Panel as seen below. The panel has a user control which has the Tree Grid definition.
    When I execute the below code, I get a Tree Grid whose Headers also move along with the scroll bar.
    Could you please let me know how I can keep the Tree-Grid Column Header fixed while scrolling down the grid contents?

    <%@ page language="C#" inherits="NexiantSuite.NxtWebControls.Pages.NxtViewPage" classname="CompanyLocation" %>
    
    <%@ register assembly="NexiantSuite.NxtWebUserControls" namespace="NexiantSuite.NxtWebUserControls"
        tagprefix="nxtwuc" %>
    <%@ register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Title</title>
        <style type="text/css">
            .gridColumn
            {
                padding-left: 20;
                color: Green;
            }
        </style>
    </head>
    <body>
        <ext:resourcemanager id="CompanyResourceManager" runat="server" />
        <ext:panel id="pnlLocations" runat="server" layout="FitLayout" bodyborder="false"
            autoscroll="false">
            <Content>
                <nxtwuc:TreeGrid ID="LocationGrid" runat="server" />
            </Content>
            <Listeners>
                <AfterRender Handler=""/>
            </Listeners>
        </ext:panel>
    </body>
    </html>
    -------------------------------------------------------------------------------------------------------------------
    User Control TreeGrid contains the below definition for the Tree Grid
    -------------------------------------------------------------------------------------------------------------------

    <%@ control language="C#" inherits="NexiantSuite.NxtWebControls.Controls.NxtViewUserControl"
        classname="NexiantSuite.NxtWebUserControls.TreeGrid" %>
    <%@ register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    <style type="text/css">
        .gridCol
        {
            padding-left: 5px;
        }
    </style>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            //registers the icons
            if (!IsPostBack && !X.IsAjaxRequest)
            {
                ResourceManager.GetInstance(this.Page).RegisterIcon(Icon.Building);
                ResourceManager.GetInstance(this.Page).RegisterIcon(Icon.BuildingKey);
                ResourceManager.GetInstance(this.Page).RegisterIcon(Icon.Smartphone);
                ResourceManager.GetInstance(this.Page).RegisterIcon(Icon.SmartphoneWrench);
                ResourceManager.GetInstance(this.Page).RegisterIcon(Icon.SmartphoneDelete);
                ResourceManager.GetInstance(this.Page).RegisterIcon(Icon.SmartphoneError);
                ResourceManager.GetInstance(this.Page).RegisterIcon(Icon.ShapesMany);
                ResourceManager.GetInstance(this.Page).RegisterIcon(Icon.DoorOpen);
                ResourceManager.GetInstance(this.Page).RegisterIcon(Icon.TextListBullets);
                ResourceManager.GetInstance(this.Page).RegisterIcon(Icon.Cart);
                ResourceManager.GetInstance(this.Page).RegisterIcon(Icon.TabBlue);
                ResourceManager.GetInstance(this.Page).RegisterIcon(Icon.Table);
                ResourceManager.GetInstance(this.Page).RegisterIcon(Icon.Box);
                ResourceManager.GetInstance(this.Page).RegisterIcon(Icon.Door);
                ResourceManager.GetInstance(this.Page).RegisterIcon(Icon.Basket);
                ResourceManager.GetInstance(this.Page).RegisterIcon(Icon.TabRed);
                ResourceManager.GetInstance(this.Page).RegisterIcon(Icon.Tab);
                ResourceManager.GetInstance(this.Page).RegisterIcon(Icon.CdAdd);
                ResourceManager.GetInstance(this.Page).RegisterIcon(Icon.Cdr);
                ResourceManager.GetInstance(this.Page).RegisterIcon(Icon.ControlBlankBlue);
                ResourceManager.GetInstance(this.Page).RegisterIcon(Icon.ControlRecordBlue);
                ResourceManager.GetInstance(this.Page).RegisterIcon(Icon.Exclamation);
            }
        }
    </script>
    <ext:menu runat="server" showseparator="true" id="mnuLocation">
        <Items>
            <ext:MenuItem ID="mnuView" runat="server" Text="View" Icon="Page">
                <Listeners>
                    <Click Handler="" />
                </Listeners>
            </ext:MenuItem>
            <ext:MenuSeparator />
            <ext:MenuItem ID="mnuConfigure" runat="server" Text="Configure" Icon="ApplicationDouble">
                <Listeners>
                    <Click Handler="" />
                </Listeners>
            </ext:MenuItem>        
        </Items>
        <Listeners>
            <BeforeShow Handler=""/>
        </Listeners>
    </ext:menu>
    <ext:treegrid id="tgLocations" runat="server" striperows="true" border="false" frame="false"
        layout="FitLayout" autodestroy="true" monitorresize="true" autoscroll="true"
        autoexpandcolumn="Address" anchorvertical="100%" anchorhorizontal="98%">
        <CustomConfig>
            <ext:ConfigItem Name="EnableColumnHide" Value="false" Mode="Raw" />
        </CustomConfig>
        <Loader>
            <ext:TreeLoader DataUrl="/Common/GetData" PreloadChildren="true" AutoDataBind="true">            
                <Listeners>
                    <BeforeLoad Handler="" />
                    <Load Handler="" />
                    <LoadException Handler="" />
                </Listeners>
            </ext:TreeLoader>
        </Loader>
        <Columns>
            <ext:TreeGridColumn Header="Name" Width="225" DataIndex="Name" Cls="gridCol" />
            <ext:TreeGridColumn Header="Mnemonic" Width="225" DataIndex="Mnemonic" Cls="gridCol" />
            <ext:TreeGridColumn Header="Type" Width="150" DataIndex="Type" Cls="gridCol"/>
            <ext:TreeGridColumn Header="Primary Contact" Width="150" DataIndex="PrimaryContact" Cls="gridCol"/>
            <ext:TreeGridColumn Header="Address" Width="230" DataIndex="Address" Cls="gridCol"/>        
        </Columns>
        <Root>
            <ext:AsyncTreeNode NodeID='0' Draggable="false" Icon="BuildingKey" Expanded="false">
            </ext:AsyncTreeNode>
        </Root>
        <Listeners>
            <ContextMenu Handler="#{mnuLocation}.node = node;node.select();#{mnuLocation}.showAt(e.getXY());" />
            <Click Handler="" />
            <BeforeRender Handler="" />
            <AfterRender Handler="" />
        </Listeners>
    </ext:treegrid>
    Last edited by Daniil; Sep 06, 2012 at 6:52 PM. Reason: [CLOSED]
  2. #2
  3. #3

    Edited my post as per your request

    I have edited my original post as per #3, in http://forums.ext.net/showthread.php?10205.
    Please take a look at the code.

    Regards.
  4. #4
    #3 says:

    Please EDIT your [CODE] sample and re-format.
    Please do not repost the same code block in a new post... just EDIT your original post.
    ...
    I see you posted more code, but didn't wrap in [CODE] tags.
  5. #5

    Wrapped in [CODE] tags

    Please check now.
  6. #6
    Thank you.

    I think you should set up explicit Height for the TreeGrid.

    Please look at this example.
    https://examples1.ext.net/#/TreePane...nced/TreeGrid/

    Try to expand some node, a vertical scrollbar appears automatically and it doesn't affect on the TreeGrid header during scrolling.

Similar Threads

  1. [CLOSED] Hide the column option(on click of column header) for treegrid
    By AnulekhaK in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 01, 2012, 12:16 PM
  2. Replies: 1
    Last Post: Nov 24, 2011, 7:48 AM
  3. Replies: 2
    Last Post: Jul 06, 2011, 11:51 PM
  4. Replies: 16
    Last Post: Feb 23, 2011, 11:03 AM
  5. Contents First Column Grid
    By Maia in forum 1.x Help
    Replies: 1
    Last Post: May 27, 2009, 8:51 PM

Tags for this Thread

Posting Permissions