I know what I'm doing is getting into unsupportedland, but I think it might just be a styling issue that I can be helped with. I have a RadGrid within a <div> with a fixed width so that the overflow of the grid scrolls horizontally. This works fine.
I added an extra row to the top of the header, so there are 2 column header rows. The top row I will call the "main title" row of the header. This works fine. See attachement (Uncentered.jpg).
When scrolling with the <div>, the main title row of the header should stay centered. The scrolling/centering part works fine. See attachment (Centered.jpg).
This is difficult to explain and point out, but the problem I'm experiencing is the code that centers the main title row's text is causing the height of the row to shrink by a couple of pixels as if the padding is removed or something similar. I believe the offender has something to do with positon:fixed & margin-left attribute settings.
Please view and zoom in closely on the image (HeightCompare.jpg). I overlayed the centered image over the uncentered image. You will notice that the main title row is about 2px smaller for the centered (right) vs uncentered (left). So basically if you were running these 2 examples side by side you would notice that the size of the main title rows differ and I would like them to be the same. In other words I would not like the row to shrink when this code is applied.
In the code I commented out the line for uncentered and am currently executing the line for centered.
Please advise.
Thanks,
Rob
I added an extra row to the top of the header, so there are 2 column header rows. The top row I will call the "main title" row of the header. This works fine. See attachement (Uncentered.jpg).
When scrolling with the <div>, the main title row of the header should stay centered. The scrolling/centering part works fine. See attachment (Centered.jpg).
This is difficult to explain and point out, but the problem I'm experiencing is the code that centers the main title row's text is causing the height of the row to shrink by a couple of pixels as if the padding is removed or something similar. I believe the offender has something to do with positon:fixed & margin-left attribute settings.
Please view and zoom in closely on the image (HeightCompare.jpg). I overlayed the centered image over the uncentered image. You will notice that the main title row is about 2px smaller for the centered (right) vs uncentered (left). So basically if you were running these 2 examples side by side you would notice that the size of the main title rows differ and I would like them to be the same. In other words I would not like the row to shrink when this code is applied.
In the code I commented out the line for uncentered and am currently executing the line for centered.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="FixedHeader.aspx.vb" Inherits="FixedHeader" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <telerik:RadScriptManager runat="server" ID="mgrJS"> </telerik:RadScriptManager> <div style="overflow:scroll;overflow-y:hidden;width:400px" > <telerik:RadGrid runat="server" ID="dgHeader" Skin="Web20" > <ClientSettings> <Scrolling UseStaticHeaders="True" /> <Selecting EnableDragToSelectRows="False" /> </ClientSettings> <MasterTableView BorderWidth="1px" GridLines="Both" style="border-collapse: collapse !Important;" Font-Bold="false" TableLayout="Fixed" AutoGenerateColumns="false" ShowHeader="True"> <RowIndicatorColumn Visible="False"> <HeaderStyle Width="20px" /> </RowIndicatorColumn> <ExpandCollapseColumn Resizable="False" Visible="False"> <HeaderStyle Width="20px" /> </ExpandCollapseColumn> <EditFormSettings> <PopUpSettings ScrollBars="None" /> </EditFormSettings> </MasterTableView> </telerik:RadGrid> </div> </div> </form> </body> </html> Partial Class FixedHeader Inherits System.Web.UI.Page Dim dtCols As New DataTable Dim dtHeader As New DataTable Protected Sub dgHeaderAPO_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles dgHeader.NeedDataSource dgHeader.DataSource = dtHeader End Sub Protected Sub FixedHeader_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 'Grid columns will be defined off of this table dtCols.Columns.Add(New DataColumn("COL_ID", GetType(String))) Dim colRow As DataRow = dtCols.NewRow colRow(0) = "1234567" dtCols.Rows.Add(colRow) colRow = dtCols.NewRow colRow(0) = "2345678" dtCols.Rows.Add(colRow) colRow = dtCols.NewRow colRow(0) = "3456789" dtCols.Rows.Add(colRow) colRow = dtCols.NewRow colRow(0) = "4567890" dtCols.Rows.Add(colRow) colRow = dtCols.NewRow colRow(0) = "5678901" dtCols.Rows.Add(colRow) colRow = dtCols.NewRow colRow(0) = "6789012" dtCols.Rows.Add(colRow) colRow = dtCols.NewRow colRow(0) = "7890123" dtCols.Rows.Add(colRow) 'Create Header table For Each dr As DataRow In dtCols.Rows dtHeader.Columns.Add(New DataColumn(dr("COL_ID"), GetType(Integer))) Next 'Populate w/ data Dim Generator As System.Random = New System.Random() Dim r As DataRow = dtHeader.NewRow For j As Integer = 0 To 6 r(j) = Generator.Next(0, 100) Next dtHeader.Rows.Add(r) 'Define columns of master table view. For Each row As DataRow In dtCols.Rows Dim newCol As New GridBoundColumn dgHeader.MasterTableView.Columns.Add(newCol) newCol.HeaderText = row("COL_ID") newCol.DataField = row("COL_ID") newCol.DataFormatString = "{0:N0}" newCol.HeaderStyle.Width = 100 newCol.ItemStyle.Width = 100 Next End Sub Protected Sub dgHeaderAPO_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles dgHeader.PreRender If dgHeader.MasterTableView.GetItems(GridItemType.Header).Length > 0 Then Dim header As GridHeaderItem = DirectCast(dgHeader.MasterTableView.GetItems(GridItemType.Header)(0), GridHeaderItem) Dim head As GridTHead = DirectCast(header.Parent, GridTHead) 'create a new GridHeaderItem which will be the new row Dim newHeaderItem As New GridHeaderItem(dgHeader.MasterTableView, 0, 0) 'add 2 empty table header cells, as there are 2 hidden columns always created in RadGrid newHeaderItem.Cells.Add(New GridTableHeaderCell()) newHeaderItem.Cells.Add(New GridTableHeaderCell()) Dim leftMargin As Integer = 0 Select Case dtCols.Rows.Count Case 1, 2 leftMargin = 0 Case 3 leftMargin = 50 Case 4 leftMargin = 75 Case 4 leftMargin = 100 Case Else leftMargin = 125 End Select 'Uncentered code without resizing issue 'newHeaderItem.Cells.Add(New GridTableHeaderCell() With {.Text = "<input id='cbAll' type='checkbox');' \>CENTER ME", .ColumnSpan = dtCols.Rows.Count}) 'Centered code with resizing issue newHeaderItem.Cells.Add(New GridTableHeaderCell() With {.Text = "<div style='width:130px;position:fixed;margin-left:" & leftMargin & "px;'><input id='cbAll' type='checkbox');' \>CENTER ME</div>", .ColumnSpan = dtCols.Rows.Count}) head.Controls.AddAt(0, newHeaderItem) End If End SubEnd ClassPlease advise.
Thanks,
Rob
1 Answer, 1 is accepted
0
Rob
Top achievements
Rank 1
Rank 1
answered on 29 Nov 2011, 10:11 PM
Yep, I wouldn't be excited about figuring this one out either, but with persistence I did, so I will share. First of all, this is NOT a Telerik issue. It IS an HTML issue. I was able to reproduce the issue without the RadGrid by using HTML table's and div's. If the <div> does NOT have style="position:fixed" then the sizing is as expected. If the <div> DOES have style="position:fixed" then the sizing shrinks/reduces/gets lost. My solution to the problem was to add <div> </div> right before the offending <div> and it goes back to the expected size. After that I tweak the margin-left & margin-top attributes until I get the desired positioning.
I sure hope nobody else ever has to do this!