[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?
Code:
<%@ 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
-------------------------------------------------------------------------------------------------------------------
Code:
<%@ 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>
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.
