[Solved] Grid Scrolling messes up styling

[Juan]

Hey All,

We've got a RadGrid that's used to display data and the list of data can be extensively long. Our client has requested that the Grid's headers be static and the content of the grid be scrollable (totally do-able in RadGrid). However, when I enable AllowScroll and UseStaticHeaders, the entire styling of my Grid is messed up!

Points of Interest:
1. The Grid uses a custom skin (I have taken the Default skin and literally just changed the header background colour, font sizes and those sort of things, nothing major).
2. The Grid GroupHeader is built up programmatically.

ASPX:

<telerik:RadGrid ID="RadGridBuilding" runat="server" AllowSorting="true" ShowFooter="true" EnableEmbeddedSkins="false" Skin="DimsRed" DataSourceID="sqlBuilding" GridLines="None" OnItemDataBound="RadGridBuilding_ItemDataBound" OnItemCommand="RadGridBuilding_ItemCommand" OnItemCreated="RadGridBuilding_ItemCreated">
                <ClientSettings EnableRowHoverStyle="true">
                    <%--<Scrolling UseStaticHeaders="true" AllowScroll="true" />--%>
                </ClientSettings>
                <MasterTableView AutoGenerateColumns="false" CellSpacing="-1" DataKeyNames="primaryID, buildingID, floorNumber, PocketInternalID, TotalUsableArea, TotalRentableArea, TenantName" DataSourceID="sqlBuilding">
                    <ExpandCollapseColumn Display="false" Visible="false"></ExpandCollapseColumn>
                    <HeaderStyle Font-Bold="true" VerticalAlign="Bottom" />
                    <FooterStyle Font-Bold="true" Font-Size="10pt" BackColor="#444444" ForeColor="White" Height="40px" />
                    <GroupHeaderItemStyle Font-Bold="true" />
                    <ColumnGroups>
                        <telerik:GridColumnGroup HeaderText="Rentable Area" Name="groupRentableArea" HeaderStyle-HorizontalAlign="Center"></telerik:GridColumnGroup>
                        <telerik:GridColumnGroup HeaderText="Add Supplementary" Name="groupAddSupplementary" HeaderStyle-HorizontalAlign="Center"></telerik:GridColumnGroup>
                        <telerik:GridColumnGroup HeaderText="Parking Allocated" Name="groupParkingAllocated" HeaderStyle-HorizontalAlign="Center"></telerik:GridColumnGroup>
                    </ColumnGroups>
                    <Columns>
                        <telerik:GridBoundColumn DataField="primaryID" HeaderText="primaryID" UniqueName="primaryID" SortExpression="primaryID" Visible="false"></telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="buildingID" HeaderText="buildingID" UniqueName="buildingID" SortExpression="buildingID" Visible="false"></telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="PocketInternalID" HeaderText="PocketInternalID" UniqueName="PocketInternalID" SortExpression="PocketInternalID" Visible="false"></telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="pocketName" HeaderText="pocketName" UniqueName="pocketName" SortExpression="pocketName" Visible="false"></telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="tenantID" HeaderText="tenantID" UniqueName="tenantID" SortExpression="tenantID" Visible="false"></telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn HeaderText="Premises Code" UniqueName="PremisesCode" Visible="false">
                            <HeaderStyle Width="90px" />
                            <ItemStyle Width="90px" />
                            <ItemTemplate>
                                <asp:Label ID="lblPremisesCode" runat="server"></asp:Label>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn DataField="TenantName" FooterText="Grand Total" HeaderText="Tenant Name" UniqueName="TenantName" SortExpression="TenantName"></telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="TotalTenants" HeaderText="Total No. Tenants" DataType="System.Int32" Aggregate="Sum" FooterAggregateFormatString="{0:G}" FooterStyle-HorizontalAlign="Center" UniqueName="TotalTenants" SortExpression="TotalTenants">
                            <HeaderStyle Width="80px" HorizontalAlign="Center" />
                            <ItemStyle Width="80px" HorizontalAlign="Center" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="TotalUsableArea" HeaderText="Usable Area" DataType="System.Decimal" Aggregate="Sum" FooterStyle-HorizontalAlign="Center" ColumnGroupName="groupRentableArea" UniqueName="TotalUsableArea" SortExpression="TotalUsableArea" DataFormatString="{0:N2}">
                            <HeaderStyle Width="80px" HorizontalAlign="Center" />
                            <ItemStyle Width="80px" HorizontalAlign="Center" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="TotalRentableArea" HeaderText="Total Rentable" Aggregate="Sum" FooterStyle-HorizontalAlign="Center" ColumnGroupName="groupRentableArea" UniqueName="TotalRentableArea" SortExpression="TotalRentableArea" DataFormatString="{0:N2}">
                            <HeaderStyle Width="80px" HorizontalAlign="Center" />
                            <ItemStyle Width="80px" HorizontalAlign="Center" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="RURatio" HeaderText="R/U Ratio" ColumnGroupName="groupRentableArea" FooterStyle-HorizontalAlign="Center" UniqueName="RURatio" SortExpression="RURatio" DataFormatString="{0:N2}">
                            <HeaderStyle Width="80px" HorizontalAlign="Center" />
                            <ItemStyle Width="80px" HorizontalAlign="Center" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="TotalSupplementaryArea" ColumnGroupName="groupAddSupplementary" Aggregate="Sum" FooterStyle-HorizontalAlign="Center" HeaderText="Supplementary Area/Tenant" UniqueName="TotalSupplementaryArea" SortExpression="TotalSupplementaryArea" DataFormatString="{0:N2}">
                            <HeaderStyle Width="80px" HorizontalAlign="Center" />
                            <ItemStyle Width="80px" HorizontalAlign="Center" Font-Bold="true" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="TotalIncomeGeneratingArea" HeaderText="Total Income Generating" Aggregate="Sum" FooterStyle-HorizontalAlign="Center" ColumnGroupName="groupAddSupplementary" UniqueName="TotalIncomeGeneratingArea" SortExpression="TotalIncomeGeneratingArea" DataFormatString="{0:N2}">
                            <HeaderStyle Width="100px" HorizontalAlign="Center" />
                            <ItemStyle Width="100px" HorizontalAlign="Center" Font-Bold="true" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="TotalParkingBasement" HeaderText="Basement Parking" Aggregate="Sum" FooterAggregateFormatString="{0:G}" FooterStyle-HorizontalAlign="Center" ColumnGroupName="groupParkingAllocated" UniqueName="TotalParkingBasement" SortExpression="TotalParkingBasement">
                            <HeaderStyle Width="80px" HorizontalAlign="Center" />
                            <ItemStyle Width="80px" HorizontalAlign="Center" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="TotalParkingCovered" HeaderText="Covered Parking" Aggregate="Sum" FooterAggregateFormatString="{0:G}" FooterStyle-HorizontalAlign="Center" ColumnGroupName="groupParkingAllocated" UniqueName="TotalParkingCovered" SortExpression="TotalParkingCovered">
                            <HeaderStyle Width="80px" HorizontalAlign="Center" />
                            <ItemStyle Width="80px" HorizontalAlign="Center" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="TotalParkingOpen" HeaderText="Open Parking" Aggregate="Sum" FooterAggregateFormatString="{0:G}" FooterStyle-HorizontalAlign="Center" ColumnGroupName="groupParkingAllocated" UniqueName="TotalParkingOpen" SortExpression="TotalParkingOpen">
                            <HeaderStyle Width="80px" HorizontalAlign="Center" />
                            <ItemStyle Width="80px" HorizontalAlign="Center" />
                        </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn HeaderText="Files" UniqueName="FilesCol">
                            <HeaderStyle Width="20px" HorizontalAlign="Center" />
                            <ItemStyle Width="20px" HorizontalAlign="Center" />
                            <ItemTemplate>
                                <asp:ImageButton ID="imgFiles" runat="server" ImageUrl="Images/imgViewFiles.png" CommandName="ViewFiles" OnClientClick="OpenPopup('ModalWindow');" />
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridTemplateColumn HeaderText="Notes" UniqueName="NotesCol">
                            <HeaderStyle Width="20px" HorizontalAlign="Center" />
                            <ItemStyle Width="20px" HorizontalAlign="Center" />
                            <ItemTemplate>
                                <asp:ImageButton ID="imgNotes" runat="server" ImageUrl="Images/imgViewNotes.png" CommandName="ViewNotes" OnClientClick="OpenPopup('ModalWindowNotes');" />
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridTemplateColumn HeaderText="" UniqueName="SliderCol">
                            <HeaderStyle CssClass="CenterSliderHeader" Width="7px" />
                            <ItemStyle CssClass="CenterSlider" Width="7px" />
                            <ItemTemplate>
                                <div style="width: 7px;">
                                    <asp:Panel ID="panelMasterContainer" runat="server" CssClass="SliderMasterContainer">
                                        <asp:Panel ID="panelImageContainer" runat="server" CssClass="SliderMasterImage">
                                            <asp:Image ID="imgSliderImage" runat="server" ImageUrl="" AlternateText="" />
                                        </asp:Panel>
                                        <asp:Panel ID="panelContentContainer" CssClass="SliderContent" runat="server">
                                            <div class="SliderTextSection">
                                                <asp:Literal ID="litSliderNoteContent" runat="server"></asp:Literal>
                                            </div>
                                            <div class="SliderButtonSection">
                                                <div style="text-align: center;">
                                                    <asp:Button ID="btnEditNote" runat="server" Text="View" CssClass="buttonLink" OnClick="btnEdit_Click" />
                                                    <asp:Button ID="btnCloseSlider" runat="server" Text="Close" CssClass="buttonLink" />
                                                </div>
                                            </div>
                                        </asp:Panel>
                                    </asp:Panel>
                                </div>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                    <GroupByExpressions>
                        <telerik:GridGroupByExpression>
                            <GroupByFields>
                                <telerik:GridGroupByField FieldName="floorNumber" />
                            </GroupByFields>
                            <SelectFields>
                                <telerik:GridGroupByField FieldName="floorNumber" HeaderText=" " HeaderValueSeparator="" />
                                <telerik:GridGroupByField FieldName="primaryID" FieldAlias="FloorID" />
                                <telerik:GridGroupByField FieldName="TotalTenants" FieldAlias="TtlTenants" Aggregate="Sum" />
                                <telerik:GridGroupByField FieldName="TotalUsableArea" FieldAlias="TtlUsableArea" Aggregate="Sum" />
                                <telerik:GridGroupByField FieldName="TotalRentableArea" FieldAlias="TtlRentableArea" Aggregate="Sum" />
                                <telerik:GridGroupByField FieldName="TotalSupplementaryArea" FieldAlias="TtlSupplementaryArea" Aggregate="Sum" />
                                <telerik:GridGroupByField FieldName="TotalIncomeGeneratingArea" FieldAlias="TtlIncomeGeneratingArea" Aggregate="Sum" />
                                <telerik:GridGroupByField FieldName="TotalParkingBasement" FieldAlias="TtlParkingBasement" Aggregate="Sum" />
                                <telerik:GridGroupByField FieldName="TotalParkingCovered" FieldAlias="TtlParkingCovered" Aggregate="Sum" />
                                <telerik:GridGroupByField FieldName="TotalParkingOpen" FieldAlias="TtlParkingOpen" Aggregate="Sum" />
                            </SelectFields>
                        </telerik:GridGroupByExpression>
                    </GroupByExpressions>
                </MasterTableView>
            </telerik:RadGrid>

CS:

protected void RadGridBuilding_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem dataItem = (GridDataItem)e.Item;

            if (dataItem["TenantName"].Text == " ")
                dataItem["TenantName"].Text = "Vacant";
        }

        if (e.Item.ItemType == GridItemType.Item || e.Item.ItemType == GridItemType.AlternatingItem)
        {
            totalRentable += NecHelper.ParseDecimal(e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["TotalRentableArea"].ToString());
            totalUsable += NecHelper.ParseDecimal(e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["TotalUsableArea"].ToString());

            Panel panelMasterContainer = (Panel)e.Item.FindControl("panelMasterContainer");
            Panel panelImageContainer = (Panel)e.Item.FindControl("panelImageContainer");
            Image imgSliderImage = (Image)e.Item.FindControl("imgSliderImage");
            Literal litSliderNoteContent = (Literal)e.Item.FindControl("litSliderNoteContent");

            panelImageContainer.Attributes.Add("onclick", string.Format("SliderOpenClose('{0}');", panelMasterContainer.ClientID));

            int floorID = NecHelper.ParseInteger(e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["primaryID"].ToString());
            int pocketID = NecHelper.ParseInteger(e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["PocketInternalID"].ToString());
            int buildingID = NecHelper.ParseInteger(e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["buildingID"].ToString());
            taSliderNotes.FillSliderNotes(ds.BuildingStatuses, buildingID, floorID, pocketID, true);
            if (ds.BuildingStatuses.Rows.Count == 0)
            {
                //Apply defaults.
                imgSliderImage.ImageUrl = "Images/imgSliderGreen.png";
                imgSliderImage.AlternateText = "OK";
                litSliderNoteContent.Text = "";
            }
            else
            {
                //Apply row data.
                DataRow dr = ds.BuildingStatuses.Rows[0];
                if (NecHelper.ParseInteger(dr["currentStatus"].ToString()) == 0)
                {
                    imgSliderImage.ImageUrl = "Images/imgSliderGreen.png";
                    imgSliderImage.AlternateText = "OK";
                }
                else if (NecHelper.ParseInteger(dr["currentStatus"].ToString()) == 1)
                {
                    imgSliderImage.ImageUrl = "Images/imgSliderOrange.png";
                    imgSliderImage.AlternateText = "Warning";
                }
                else if (NecHelper.ParseInteger(dr["currentStatus"].ToString()) == 2)
                {
                    imgSliderImage.ImageUrl = "Images/imgSliderRed.png";
                    imgSliderImage.AlternateText = "Attention";
                }

                litSliderNoteContent.Text = dr["statusNote"].ToString().Replace(System.Environment.NewLine, "<br />").Replace("\n", "<br />"); ;
            }

            Button btnEdit = (Button)e.Item.FindControl("btnEditNote");
            btnEdit.Attributes.Add("SliderContainer", panelMasterContainer.ClientID);
            btnEdit.Attributes.Add("BuildingID", buildingID.ToString());
            btnEdit.Attributes.Add("FloorID", floorID.ToString());
            btnEdit.Attributes.Add("PocketID", pocketID.ToString());

            Button btnClose = (Button)e.Item.FindControl("btnCloseSlider");
            btnClose.OnClientClick = string.Format("return SliderClose('{0}');", panelMasterContainer.ClientID);
        }

        if (e.Item is GridFooterItem)
        {
            GridFooterItem dataItem = (GridFooterItem)e.Item;
            decimal ruRatio = (totalRentable / totalUsable);
            dataItem["RURatio"].Text = Math.Round(ruRatio, 2).ToString();
        }

        if (e.Item is GridGroupHeaderItem)
        {
            GridGroupHeaderItem headerItem = (GridGroupHeaderItem)e.Item;
            if (!GroupWasExpanded(headerItem.GroupIndex))
                headerItem.Expanded = false;
        }
    }

protected void RadGridBuilding_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridGroupHeaderItem)
        {
            (e.Item as GridGroupHeaderItem).DataCell.Visible = false;
            e.Item.PreRender += new EventHandler(HeaderItemPreRender);
        }
    }

protected void HeaderItemPreRender(object sender, EventArgs e)
    {
        GridGroupHeaderItem header = (GridGroupHeaderItem)sender;
        DataRowView drv = (DataRowView)header.DataItem;
        bool useSavedArray = (drv == null);

        for (int i = 9; i < header.OwnerTableView.RenderColumns.Length; i++)
        {
            TableCell headerCell = new TableCell();
            headerCell.HorizontalAlign = HorizontalAlign.Center;
            headerCell.Font.Bold = true;

            //if (i == 8)
            //    headerCell.ColumnSpan = 2;
            //else if (i == 9)
            //    continue;

            List<string> groupArray = new List<string>();
            string groupName = string.Format("group_{0}", header.GroupIndex.ToString());

            string floorName = "";
            string floorID = "";
            string totalTenants = "";
            string totalUsableArea = "";
            string totalRentableArea = "";
            string finalRURatio = "";
            string totalSupplementaryArea = "";
            string totalIncomeGeneratingArea = "";
            string totalParkingBasement = "";
            string totalParkingCovered = "";
            string totalParkingOpen = "";

            if (useSavedArray)
            {
                //Load items persisted in ViewState.
                string[] savedArray = null;
                if (ViewState[groupName] != null)
                    savedArray = (string[])ViewState[groupName];

                totalTenants = savedArray[0].ToString();
                totalUsableArea = savedArray[1].ToString();
                totalRentableArea = savedArray[2].ToString();
                finalRURatio = savedArray[3].ToString();
                totalSupplementaryArea = savedArray[4].ToString();
                totalIncomeGeneratingArea = savedArray[5].ToString();
                totalParkingBasement = savedArray[6].ToString();
                totalParkingCovered = savedArray[7].ToString();
                totalParkingOpen = savedArray[8].ToString();
                floorName = savedArray[9].ToString();
                floorID = savedArray[10].ToString();
            }
            else
            {
                //Load items from GroupExpressions.
                totalTenants = drv["TtlTenants"].ToString();
                totalUsableArea = Math.Round(NecHelper.ParseDecimal(drv["TtlUsableArea"].ToString()), 2).ToString("N");
                totalRentableArea = Math.Round(NecHelper.ParseDecimal(drv["TtlRentableArea"].ToString()), 2).ToString("N");

                //Calculate RU Ratio:
                decimal calculatedRURatio = 0;
                decimal rentable = NecHelper.ParseDecimal(drv["TtlRentableArea"].ToString());
                decimal usable = NecHelper.ParseDecimal(drv["TtlUsableArea"].ToString());

                try
                {
                    calculatedRURatio = (rentable / usable);
                }
                catch { }

                finalRURatio = Math.Round(calculatedRURatio, 2).ToString();

                totalSupplementaryArea = Math.Round(NecHelper.ParseDecimal(drv["TtlSupplementaryArea"].ToString()), 2).ToString("N");
                totalIncomeGeneratingArea = Math.Round(NecHelper.ParseDecimal(drv["TtlIncomeGeneratingArea"].ToString()), 2).ToString("N");
                totalParkingBasement = drv["TtlParkingBasement"].ToString();
                totalParkingCovered = drv["TtlParkingCovered"].ToString();
                totalParkingOpen = drv["TtlParkingOpen"].ToString();
                floorName = drv["floorNumber"].ToString();
                floorID = drv["FloorID"].ToString();

                //Now add items to list.
                groupArray.Add(totalTenants);
                groupArray.Add(totalUsableArea);
                groupArray.Add(totalRentableArea);
                groupArray.Add(finalRURatio);
                groupArray.Add(totalSupplementaryArea);
                groupArray.Add(totalIncomeGeneratingArea);
                groupArray.Add(totalParkingBasement);
                groupArray.Add(totalParkingCovered);
                groupArray.Add(totalParkingOpen);
                groupArray.Add(floorName);
                groupArray.Add(floorID);

                if (ViewState[groupName] != null)
                    ViewState.Remove(groupName);

                ViewState.Add(groupName, groupArray.ToArray());
                SaveViewState();
            }

            //if (header.OwnerTableView.RenderColumns[i].UniqueName == "PremisesCode")
            //{
            //    headerCell.HorizontalAlign = HorizontalAlign.Left;
            //    headerCell.Text = floorName;
            //}

            if (header.OwnerTableView.RenderColumns[i].UniqueName == "TenantName")
            {
                headerCell.HorizontalAlign = HorizontalAlign.Left;
                headerCell.Text = floorName;
            }
            else if (header.OwnerTableView.RenderColumns[i].UniqueName == "TotalTenants")
                headerCell.Text = totalTenants;
            else if (header.OwnerTableView.RenderColumns[i].UniqueName == "TotalUsableArea")
                headerCell.Text = totalUsableArea;
            else if (header.OwnerTableView.RenderColumns[i].UniqueName == "TotalRentableArea")
                headerCell.Text = totalRentableArea;
            else if (header.OwnerTableView.RenderColumns[i].UniqueName == "RURatio")
                headerCell.Text = finalRURatio;
            else if (header.OwnerTableView.RenderColumns[i].UniqueName == "TotalSupplementaryArea")
                headerCell.Text = totalSupplementaryArea;
            else if (header.OwnerTableView.RenderColumns[i].UniqueName == "TotalIncomeGeneratingArea")
                headerCell.Text = totalIncomeGeneratingArea;
            else if (header.OwnerTableView.RenderColumns[i].UniqueName == "TotalParkingBasement")
                headerCell.Text = totalParkingBasement;
            else if (header.OwnerTableView.RenderColumns[i].UniqueName == "TotalParkingCovered")
                headerCell.Text = totalParkingCovered;
            else if (header.OwnerTableView.RenderColumns[i].UniqueName == "TotalParkingOpen")
                headerCell.Text = totalParkingOpen;
            else if (header.OwnerTableView.RenderColumns[i].UniqueName == "NotesCol")
            {
                //Add button
                ImageButton imgButton = new ImageButton();
                imgButton.ID = string.Format("imgViewNotes_{0}", floorID);
                imgButton.ImageUrl = "Images/imgViewNotes.png";
                imgButton.Click += new ImageClickEventHandler(GroupViewNotes);
                imgButton.OnClientClick = string.Format("wasTemporary('{0}','{1}')", "ModalWindowNotes", imgButton.ID);

                headerCell.Controls.Add(imgButton);
            }
            else if (header.OwnerTableView.RenderColumns[i].UniqueName == "FilesCol")
            {
                //Add button
                ImageButton imgButton = new ImageButton();
                imgButton.ID = string.Format("imgViewFiles_{0}", floorID);
                imgButton.ImageUrl = "Images/imgViewFiles.png";
                imgButton.Click += new ImageClickEventHandler(GroupViewFiles);
                imgButton.OnClientClick = string.Format("wasTemporary('{0}','{1}')", "ModalWindow", imgButton.ID);

                headerCell.Controls.Add(imgButton);
            }
            else if (header.OwnerTableView.RenderColumns[i].UniqueName == "SliderCol")
            {
                int buildingID = NecHelper.ParseInteger(DSController.DecryptString(Request.QueryString["Bx"].ToString()));
                int pocketID = 0;

                //Outer Wrapper
                HtmlGenericControl containerDiv = new HtmlGenericControl("DIV");
                containerDiv.Attributes.Add("class", "CenterSlider");
                containerDiv.Style.Add("width", "7px");
                containerDiv.Style.Add("margin-left", "-20px");
                containerDiv.Style.Add("margin-top", "2px");

                //Inner Wrapper
                HtmlGenericControl panelWrapperDiv = new HtmlGenericControl("DIV");
                panelWrapperDiv.Style.Add("width", "7px");

                //Master Panel Container
                Panel panelMasterContainer = new Panel();
                panelMasterContainer.ID = "panelMasterContainer_" + floorID.ToString();
                panelMasterContainer.CssClass = "SliderMasterContainer";
                panelMasterContainer.ClientIDMode = System.Web.UI.ClientIDMode.Static;

                //Image Panel Container
                Panel panelImageContainer = new Panel();
                panelImageContainer.ID = "panelImageContainer_" + floorID.ToString();
                panelImageContainer.CssClass = "SliderMasterImage";
                panelImageContainer.ClientIDMode = System.Web.UI.ClientIDMode.Static;

                //Slider image
                Image imgSliderImage = new Image();
                imgSliderImage.ID = "imgSliderImage";

                //Slider notes content
                Label lblSliderNoteContent = new Label();
                lblSliderNoteContent.ID = "lblSliderNoteContent";

                //Get data needed for slider.
                taSliderNotes.FillSliderNotes(ds.BuildingStatuses, buildingID, NecHelper.ParseInteger(floorID), pocketID, true);
                if (ds.BuildingStatuses.Rows.Count == 0)
                {
                    imgSliderImage.ImageUrl = "Images/imgSliderGreen.png";
                    imgSliderImage.AlternateText = "OK";
                    lblSliderNoteContent.Text = "";
                }
                else
                {
                    DataRow dr = ds.BuildingStatuses.Rows[0];
                    if (NecHelper.ParseInteger(dr["currentStatus"].ToString()) == 0)
                    {
                        imgSliderImage.ImageUrl = "Images/imgSliderGreen.png";
                        imgSliderImage.AlternateText = "OK";
                    }
                    else if (NecHelper.ParseInteger(dr["currentStatus"].ToString()) == 1)
                    {
                        imgSliderImage.ImageUrl = "Images/imgSliderOrange.png";
                        imgSliderImage.AlternateText = "Warning";
                    }
                    else if (NecHelper.ParseInteger(dr["currentStatus"].ToString()) == 2)
                    {
                        imgSliderImage.ImageUrl = "Images/imgSliderRed.png";
                        imgSliderImage.AlternateText = "Attention";
                    }

                    lblSliderNoteContent.Text = dr["statusNote"].ToString().Replace(System.Environment.NewLine, "<br />").Replace("\n", "<br />");
                }

                //Add image to containers.
                panelImageContainer.Controls.Add(imgSliderImage);
                panelImageContainer.Attributes.Add("onclick", string.Format("SliderOpenClose('{0}');", panelMasterContainer.ClientID));
                panelMasterContainer.Controls.Add(panelImageContainer);

                //Content Panel Container
                Panel panelContentContainer = new Panel();
                panelContentContainer.ID = "panelContentContainer";
                panelContentContainer.CssClass = "SliderContent";

                //Inner content container.
                HtmlGenericControl divText = new HtmlGenericControl("DIV");
                divText.Attributes.Add("class", "SliderTextSection");
                divText.Style.Add("font-weight", "normal");
                divText.Style.Add("text-align", "left");
                divText.Style.Add("font-size", "12px");

                //Add slider label to content container.
                divText.Controls.Add(lblSliderNoteContent);

                //Inner button container.
                HtmlGenericControl divButton = new HtmlGenericControl("DIV");
                divButton.Attributes.Add("class", "SliderButtonSection");

                //Actual button container.
                HtmlGenericControl divButtonInner = new HtmlGenericControl("DIV");
                divButtonInner.Style.Add("text-align", "center");

                //Define button.
                Button btnEditNote = new Button();
                btnEditNote.ID = string.Format("btnEditNote${0}${1}${2}${3}", panelMasterContainer.ID, buildingID.ToString(), floorID, pocketID.ToString());
                btnEditNote.Text = "View";
                btnEditNote.CssClass = "buttonLink";
                btnEditNote.OnClientClick = string.Format("sliderManualOpen('{0}');", btnEditNote.ID);

                Button btnCloseSlider = new Button();
                btnCloseSlider.ID = "btnCloseSlider";
                btnCloseSlider.Text = "Close";
                btnCloseSlider.CssClass = "buttonLink";
                btnCloseSlider.OnClientClick = string.Format("return SliderClose('{0}');", panelMasterContainer.ID);

                //Add all controls to relevant containers.
                divButtonInner.Controls.Add(btnEditNote);
                divButtonInner.Controls.Add(btnCloseSlider);
                divButton.Controls.Add(divButtonInner);
                panelContentContainer.Controls.Add(divText);
                panelContentContainer.Controls.Add(divButton);
                panelMasterContainer.Controls.Add(panelContentContainer);
                panelWrapperDiv.Controls.Add(panelMasterContainer);
                containerDiv.Controls.Add(panelWrapperDiv);

                headerCell.Controls.Add(containerDiv);
            }

            header.Cells.Add(headerCell);
        }
    }

To this post I have attached two files (a) screenshot without grid scrolling, and (b) screenshot with grid scrolling. The grid is wrapped in a DIV:

<div style="margin-top: 1px; margin-left: 3px; margin-right: 3px; overflow: hidden;">
<%-- GRID IN HERE --%>
</div>

The 'overflow' cannot be removed and is required by one of the components inside the grid. If someone could please just guide me to possible causes for the styling mess up?

[Venelin]

Hi Juan,

I tried to replicate the issue on my side using the provided code but to no avail. I tested it and the same problem as on the attached images is not occurring. The C# code seem to be coupled with some other code since it contains many objects that are not presenting in the current context, thus it is not runnable and it is hard to track the source of the problem.

Please find attached a modified version of your code where the issues does not present. Examine it and try to see if it helps you resolving your case. If not, please provide more information like which browser do you use, the version of the controls and if possible a sample runnable code that is reproducing the issue.

Note that it is not recommended to use ItemStyle-Width property. Only HeaderStyle-Width must be used.

Regards,
Venelin
Telerik