How do I freeze the first column of the grid? I am able to freeze the headers using StationaryMargins="HeaderAndFooter" property. My grid has 31 columns with date as first column. So when the user scrolls horizontally, the date column should remain pinned/pegged so that the user can make out for which date they are seeing the data. I have attached the screenshot of the grid.
Have been struggling for sometime. Really appreciate any help.
Thanks
The grid is designed so that you set the DisplayLayout.UseFixedHeaders = True in conjuction with setting the header for the column you want to have a property of Header.Fixed = True, but as you can read below, it causes issues for some.
http://forums.infragistics.com/forums/p/3438/37409.aspx#37409
Thanks for that lead. I tried using that and my grid went crazy. So do we have any other means or ways to achieve this?
Sure. I thought you are already aware of that behaviour. Attached is the screenshot.
The headers are missing. The cells are realigned in an ugly fashion like a brickwall.
Here the ultragrid tag I am using. The properties I used are underlined.
<igtbl:UltraWebGrid runat="server" ID="MyWebGrid" Height="500px" Width="100%">
<Bands>
<igtbl:UltraGridBand>
<AddNewRow View="NotSet" Visible="NotSet">
</AddNewRow>
<RowEditTemplate />
<RowTemplateStyle BackColor="White" BorderColor="White" BorderStyle="Ridge">
<BorderDetails WidthBottom="3px" WidthLeft="3px" WidthRight="3px" WidthTop="3px" />
</RowTemplateStyle>
<Columns>
<igtbl:UltraGridColumn AllowUpdate="No">
<HeaderStyle BackColor="LightGray" />
<CellStyle BackColor="#E0E0E0">
</CellStyle>
<Header Caption="Date,day" Title="Date,day" Fixed="true">
</Header>
</igtbl:UltraGridColumn>
</Columns>
</igtbl:UltraGridBand>
</Bands>
<DisplayLayout SelectTypeCellDefault="Extended" AllowRowNumberingDefault="NotSet" BorderCollapseDefault="Separate" Name="ctl00xMROWebGrid" RowHeightDefault="20px"
SelectTypeRowDefault="Extended" Version="4.00" AllowColumnMovingDefault="OnServer" StationaryMargins="Header" UseFixedHeaders="true" AllowUpdateDefault="Yes" SelectTypeColDefault="Single" TableLayout="Fixed" AllowColSizingDefault="Free" Section508Compliant="True" ColFootersVisibleDefault="Yes" JavaScriptFileName="" >
<FrameStyle Cursor="Default" BorderWidth="1px" Width="100%" Height="250px"
BorderStyle="Solid">
<ClientSideEvents MouseUpHandler="GridClick" ClipboardError="Grid_OnClipboardError"
CellChangeHandler="CellChange" InitializeLayoutHandler="Grid_InitializeLayout"/>
<ActivationObject BorderColor="Black" BorderWidth="">
<BorderDetails WidthLeft="0px" WidthRight="0px" />
</ActivationObject>
<FooterStyleDefault BackColor="LightGray" BorderStyle="Solid" BorderWidth="1px">
<BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" />
</FooterStyleDefault>
<RowStyleDefault BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="8pt">
<Padding Left="3px" />
<BorderDetails ColorLeft="White" ColorTop="White" />
</RowStyleDefault>
Font-Size="8pt" Font-Names="Verdana" BorderWidth="1px">
<Padding Left="3px" Right="3px" />
<BorderDetails WidthLeft="0px" WidthTop="0px" />
</RowAlternateStyleDefault>
<FilterOptionsDefault>
<FilterHighlightRowStyle BackColor="#151C55" ForeColor="White">
</FilterHighlightRowStyle>
<FilterDropDownStyle BackColor="White" BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px" CustomRules="overflow:auto;" Font-Names="Verdana,Arial,Helvetica,sans-serif" Font-Size="11px" >
<Padding Left="2px" />
</FilterDropDownStyle>
<FilterOperandDropDownStyle BackColor="White" BorderColor="Silver" BorderStyle="Solid"
BorderWidth="1px" Font-Names="Verdana,Arial,Helvetica,sans-serif"
Font-Size="11px">
</FilterOperandDropDownStyle>
</FilterOptionsDefault>
<HeaderStyleDefault BorderStyle="Solid" HorizontalAlign="Center" BackColor="LightGray">
</HeaderStyleDefault>
<EditCellStyleDefault CssClass="EditStyle" Height="19px" BackColor="#CCFFFF" BorderStyle="None" Font-Names="Trebuchet MS,Verdana,Arial,sans-serif" Font-Size="9pt">
</EditCellStyleDefault>
<AddNewBox>
<BoxStyle BackColor="LightGray" BorderStyle="Solid" BorderWidth="1px">
</BoxStyle>
</AddNewBox>
</igtbl:UltraWebGrid>
asairam said:Sure. I thought you are already aware of that behaviour.
I'm just a developer like you, who's been here a little bit longer.
asairam said:The headers are missing.
Before you added the FixedHeaders tags, what did your column headers look like and from where were they generated?
asairam said:cells are realigned in an ugly fashion like a brickwall.
Look at the differences between your <RowStyleDefault> and <RowAlternateStyleDefault> tags. (And their sub-tags.) I see a couple of differences that might impact column alignment.
WombatEd,
Wow, When i removed the differences between <RowStyleDefault> and <RowAlternateStyleDefault> tags, all the rows rendered correctly. I thankyou wholeheartedly and appreciate your patience in examining the tags so close. Now the only problem lies with header and footer. I am dynamically creating the column group headers, column headers and columns. In the footer, I am rendering some content using <DIV> and <HR> tags for showing multiple footer information. Attached are the images.
Creating the columns:
UltraGridColumn column = new UltraGridColumn(node.Attributes["code"].Value, strHeaderText, ColumnType.NotSet,null);
this.myWebGrid.Columns.Add(column);
Grouping the column headers:
ch.Caption = objSectionAttributes["name"].Value;
// set the origin to be on the top most level of the header
ch.RowLayoutColumnInfo.OriginY = 0;
ch.RowLayoutColumnInfo.OriginX = j;
// extend the newly added header over 3 columns
ch.RowLayoutColumnInfo.SpanX = GetParamNodesCount(nSection, GridParameterType);
myWebGrid.Bands[0].HeaderLayout.Add(ch);
Creating column footer:
myWebGrid.DisplayLayout.Bands[0].Columns[0].Footer.Caption = "<div style='TEXT-ALIGN: left;'>Average<hr>Maximum<hr>Minimum<hr>Data</div>";
The attached image shows the headers,footers before and after using the UseFixedHeaders="true" property.
The problem is : In place of headers and footer, blank space is rendered (marked by red rectangles in the image attached).
Sorry, If I am confusing you. Please let me know incase you need any more info. I am sure, we can make this work.
Thank you once again.
asairam,
I'm sorry, but I don't see what the problem is.
It looks like you've shown me how you generate the left-most column, with its header and its footer, but as far as I can see, you're not putting anything in the other headers or footers. (Which might explain why they're missing.) Obviously you're doing something to generate row values for more than one column, so I infer that the code samples you've posted are incomplete.
OK. May be I didnt give you a complete picture of the grid. I am rendering the webgrid based on XML which looks like:
(comments are underlined).
XML: <Root> <Section name="Raw Sewage"> //These form the column group<Parameters><Parameter units="string" code="SP6" type="input" name="Influent Flow Rate"> //This node becomes a column in webgrid<Average>1.0</Average> //This node forms the footer data<Maximum>2.0</Maximum> //This node forms the footer data<Minimum>3.0</Minimum> //This node forms the footer data<Data></Data>//This node forms the footer data<day type="value" number="1">0.3</day> //All these become rows in grid 1-30/31(no. of days in month)<day type="value" number="2">0.2</day><day type="value" number="3">0.1</day>....<day type="value" number="31"></day></Parameter></Parameters></Section></Root>
//****Reading above XML and creating a column for each parameter node :***//
XmlNodeList lstParameter = doc.SelectNodes("//*/*/Parameters/Parameter[@type=\"input\"]");
foreach (XmlNode node in lstParameter){strHeaderText = "<DIV style='width:50px;vertical-align:bottom;WRITING-MODE:tb-rl;filter:fliph flipv;'>(" + node.Attributes["code"].Value.Substring(0, 5) + ")" + node.Attributes["name"].Value.Replace(" ", "<BR>") + "(" + node.Attributes["units"].Value + ")"+ str+ "</DIV>";
UltraGridColumn column = new UltraGridColumn(node.Attributes["code"].Value, strHeaderText, ColumnType.NotSet,null);column.Width = Unit.Pixel(50);this.MROWebGrid.Columns.Add(column);
}
//***Creating Grid rows for number of days in the month***//
DateTime dtFrom = new DateTime();
XmlNodeList lstDays = doc.SelectNodes("//Root/Section[1]/Parameters/Parameter[1]/day");
for (int i = 0; i < lstDays.Count; i++){this.MROWebGrid.Rows.Add();this.MROWebGrid.Rows[i].Cells[0].Value = dtFrom.ToString("M/d/yy,ddd");this.MROWebGrid.Rows[i].Cells[0].AllowEditing = AllowEditing.No;dtFrom = dtFrom.AddDays(1);}
//***Creating the footer:**//
foreach (XmlNode node in lstParameter){
XmlNode AvgNode = node.SelectSingleNode("//Root/Section[@name=\"" + node.ParentNode.ParentNode.Attributes["name"].Value + "\"]/Parameters/Parameter[@code=\"" + node.Attributes["code"].Value + "\"]/Average");
//similarly max, min and data nodes
System.Text.StringBuilder sbFooterText = new System.Text.StringBuilder();sbFooterText.Append("<DIV style='width: 50px;TEXT-ALIGN: left;'>");if(AvgNode.InnerText.Equals("")) sbFooterText.Append(" "); else sbFooterText.Append(AvgNode.InnerText);sbFooterText.Append("<BR><HR>");if (MaxNode.InnerText.Equals("")) sbFooterText.Append(" "); else sbFooterText.Append(MaxNode.InnerText);sbFooterText.Append("<BR><HR>");if (MinNode.InnerText.Equals("")) sbFooterText.Append(" "); else sbFooterText.Append(MinNode.InnerText);sbFooterText.Append("<BR><HR>");if (DataNode.InnerText.Equals("")) sbFooterText.Append(" "); else sbFooterText.Append(DataNode.InnerText);sbFooterText.Append("</DIV>");this.MROWebGrid.DisplayLayout.Bands[0].Columns[intIdx].Footer.Caption = sbFooterText.ToString(); ;intIdx++;
Hope this gives a complete picture of how I am rendering the grid. Please help!!
Hey, for me the actual cause of such misalignment is presence of master page. I have found this after lot of struggle. Infragistics should test their controls in pages with master page. Everything was working in place when I remove the masterpage from that page. Hope this helps.
Please help me actually its urget
Hey i m having the same problem and i have set these property but in this case rest of the colums data is miss aligned with the headers. Rest of the columns means which are now being scrolled . Please help me.
Did you set both:
If that doesn't help, I'd suggest you post your markup and your code.
When I use UseFixedHeaders=true, it looks good. But when I scroll horizontally all the headers are fixed. I need only the first column header should be fixed and the remaining has to move along with the data. Please help me.