This is a migrated thread and some comments may be shown as answers.

Radgrid scrollbar header background, empty row at the end of grid

17 Answers 392 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Rabeek Ahamed asked on 13 Jan 2011, 12:53 PM

RadGrid-Problem.JPG

RadGrid-Problem-Firefox.JPG

I set EnableEmbeddedSkins="false" and set my custom skin for my radgrid.

The below 3 problems occured when the grid has scrollbar :

1. scrollbar Header background image is not displaying. How to get scrollbar header background.
2. When scrolls, the scrollbar displays tooltip saying that "Page 1 of 1". How to remove this.
3. After the data rows in the grid, one empty row was added at the end. How to remove this.
4. The styles are not applied to the grid when I browse from Firefox.

Kindly help me to fix those problems.

See the attached image for your reference. The problems are circled in Red color in the image.

17 Answers, 1 is accepted

answered on 18 Jan 2011, 11:05 AM

Hi Gopinath,

When using RadGrid scrolling with static headers, there is some empty space above the vertical scrollbar. By default it is filled with a background image, which is aligned if the header row is single-lined. Unfortunately, the background image cannot expand automatically to match any header row height.

I suggest you to remove the background image by setting

<telerik:RadGrid CssClass="rgNoScrollImage" />

Alternatively, create and apply a custom background image, adjusted to match the header row height in your specific scenario. The custom image should be set like this:

ASPX

<telerik:RadGrid CssClass="MyCustomScrollImage" />

CSS

div.MyCustomScrollImage .rgHeaderDiv
{
background:0 0 repeat-x url("...............") ;
}

Regarding the other issues it will be best if you send us a runnable test project or a live URL that demonstrates them. We shall test it on our side and get back to you with more information on that.

Regards,
Pavlina
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 08 Feb 2011, 02:15 PM

Hi,

I am not able to attach my sample files in ZIP format. So I copied my sample code below: Also, the solution you gave me for the scroll bar header image was not working. Kindly help me to resolve this.

Thank you.

ASPX: (RadGrid.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadGrid.aspx.cs" Inherits="Log_RadGrid" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!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>Rad grid sample</title>

<link rel="stylesheet" type="text/css" href="..\style\Stylesheet.css" />

<link rel="stylesheet" type="text/css" href="..\style\SpasGrid.css" />

<style type="text/css">

.class1

{

cursor: pointer;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<div style="width: 100%">

<telerik:RadGrid ID="gridSumm" runat="server" AutoGenerateColumns="false" CssClass="MyCustomScrollImage"

Height="188px" OnPreRender="gridSumm_PreRender" Skin="SpasSkin" SkinID="SpasGrid"

EnableEmbeddedSkins="false" AllowPaging="false" PageSize="6" OnItemDataBound="gridSumm_ItemDataBound"

OnSelectedIndexChanged="gridSumm_SelectedIndexChanged">

<MasterTableView DataKeyNames="Type" Width="100%">

<RowIndicatorColumn UniqueName="RowIndicator">

</RowIndicatorColumn>

<EditFormSettings>

<EditColumn UniqueName="EditCommandColumn1">

</EditColumn>

</EditFormSettings>

<Columns>

<telerik:GridBoundColumn HeaderText="Type" DataField="Type" UniqueName="Type" ItemStyle-Width="20%">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Source" DataField="Source" UniqueName="Source"

ItemStyle-Width="20%">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn UniqueName="GroupColumn1" ItemStyle-Width="60%">

<HeaderTemplate>

<table id="tblTotalBooking" width="100%" cellpadding="0" cellspacing="0">

<tr>

<td width="100%" colspan="3" align="center" class="gridMergeColHeader">

<b>Total Booking</b>

</td>

</tr>

<tr>

<td style="width: 33%;" align="center" class="gridSubColHeader">

<b>May'10</b>

</td>

<td style="width: 33%;" align="center" class="gridSubColHeader">

<b>May'09</b>

</td>

<td style="border-right: none;" align="center">

<b>Growth %</b>

</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<table id="tblTotalBookingValue" width="100%" cellpadding="0" cellspacing="0">

<tr>

<td class="gridSubCol" style="width: 33%; text-align: right;">

<asp:Label ID="lblMay10" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "May10") %>'></asp:Label>

</td>

<td class="gridSubCol" style="width: 33%; text-align: right;">

<asp:Label ID="lblMay09" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "May09") %>'></asp:Label>

</td>

<td class="gridSubCol" style="border-right: none !important; text-align: right;">

<asp:Label ID="lblGrowth" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Growth") %>'></asp:Label>

</td>

</tr>

</table>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

<PagerStyle Mode="NumericPages" PagerTextFormat="{0}" CssClass="rgPager" />

<ClientSettings>

<Scrolling AllowScroll="True" EnableVirtualScrollPaging="True" UseStaticHeaders="true"

SaveScrollPosition="True"></Scrolling>

<Selecting AllowRowSelect="True"></Selecting>

</ClientSettings>

</telerik:RadGrid>

</div>

</form>

</body>

</html>

C# Code: (RadGrid.aspx.cs)

using System;

using System.Collections;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

using Telerik.Web.UI;



public partial class Log_RadGrid : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        DataTable dt = new DataTable("Sample");

        DataColumn dc = new DataColumn("Type", System.Type.GetType("System.String"));

        dt.Columns.Add(dc);

        dc = new DataColumn("Source", System.Type.GetType("System.String"));

        dt.Columns.Add(dc);

        dc = new DataColumn("May10", System.Type.GetType("System.String"));

        dt.Columns.Add(dc);

        dc = new DataColumn("May09", System.Type.GetType("System.String"));

        dt.Columns.Add(dc);

        dc = new DataColumn("Growth", System.Type.GetType("System.String"));

        dt.Columns.Add(dc);



        //Passenger

        DataRow dr = dt.NewRow();

        dr.SetField("Type", "Passenger");

        dr.SetField("Source", "Actual LY");

        dr.SetField("May10", "1158");

        dr.SetField("May09", "0");

        dr.SetField("Growth", "0.0");

        dt.Rows.Add(dr);



        dr = dt.NewRow();

        dr.SetField("Type", "Passenger");

        dr.SetField("Source", "Budget");

        dr.SetField("May10", "205");

        dr.SetField("May09", "5");

        dr.SetField("Growth", "6.5");

        dt.Rows.Add(dr);



        dr = dt.NewRow();

        dr.SetField("Type", "Passenger");

        dr.SetField("Source", "Budget Growth %");

        dr.SetField("May10", "100.2");

        dr.SetField("May09", "-5.2");

        dr.SetField("Growth", "2.0");

        dt.Rows.Add(dr);





        //ATV

        dr = dt.NewRow();

        dr.SetField("Type", "ATV");

        dr.SetField("Source", "Actual LY");

        dr.SetField("May10", "1158");

        dr.SetField("May09", "0");

        dr.SetField("Growth", "0.0");

        dt.Rows.Add(dr);



        dr = dt.NewRow();

        dr.SetField("Type", "ATV");

        dr.SetField("Source", "Budget");

        dr.SetField("May10", "205");

        dr.SetField("May09", "5");

        dr.SetField("Growth", "6.5");

        dt.Rows.Add(dr);



        dr = dt.NewRow();

        dr.SetField("Type", "ATV");

        dr.SetField("Source", "Budget Growth %");

        dr.SetField("May10", "100.2");

        dr.SetField("May09", "-5.2");

        dr.SetField("Growth", "2.0");

        dt.Rows.Add(dr);



        //Revenue

        dr = dt.NewRow();

        dr.SetField("Type", "Revenue");

        dr.SetField("Source", "Actual LY");

        dr.SetField("May10", "115");

        dr.SetField("May09", "0");

        dr.SetField("Growth", "115.0");

        dt.Rows.Add(dr);



        dr = dt.NewRow();

        dr.SetField("Type", "Revenue");

        dr.SetField("Source", "Budget");

        dr.SetField("May10", "205");

        dr.SetField("May09", "250");

        dr.SetField("Growth", "6.5");

        dt.Rows.Add(dr);



        dr = dt.NewRow();

        dr.SetField("Type", "Revenue");

        dr.SetField("Source", "Budget Growth %");

        dr.SetField("May10", "100.2");

        dr.SetField("May09", "120");

        dr.SetField("Growth", "-20.0");

        dt.Rows.Add(dr);



        gridSumm.DataSource = dt;

    }



    protected void gridSumm_PreRender(object sender, EventArgs e)

    {

        /*//foreach (Telerik.Web.UI.GridDataItem dataItem in gridSumm.MasterTableView.Items)

        //{

            ////Column merge

            //if (dataItem["Type"].Text == dataItem["Source"].Text)

            //{

            //    dataItem["Type"].ColumnSpan = 2;

            //    dataItem["Source"].Visible = false;

            //}



            ////Set forecolor for the bound column text

            //if (Convert.ToDouble(dataItem["Apr09"].Text) < 0)

            //{

            //    dataItem["Apr09"].ForeColor = System.Drawing.Color.Red;

            //}

        //}*/



        for (int i = gridSumm.Items.Count - 1; i > 0; i--)

        {

            if (gridSumm.Items[i][gridSumm.Columns[0]].Text == gridSumm.Items[i - 1][gridSumm.Columns[0]].Text)

            {

                gridSumm.Items[i - 1][gridSumm.Columns[0]].RowSpan = gridSumm.Items[i][gridSumm.Columns[0]].RowSpan < 2 ? 2 : gridSumm.Items[i][gridSumm.Columns[0]].RowSpan + 1;

                gridSumm.Items[i][gridSumm.Columns[0]].Visible = false;

                gridSumm.Items[i][gridSumm.Columns[0]].Text = " ";

                gridSumm.Items[i][gridSumm.Columns[0]].BackColor = System.Drawing.Color.White;

            }



            //Set background for the bound column

            Label lbl1 = (Label)gridSumm.Items[i].FindControl("lblMay10");

            if (Convert.ToDouble(lbl1.Text) < 0)

                lbl1.ForeColor = System.Drawing.Color.Red; ;



            Label lbl2 = (Label)gridSumm.Items[i].FindControl("lblMay09");

            if (Convert.ToDouble(lbl2.Text) < 0)

                lbl2.ForeColor = System.Drawing.Color.Red; ;



            Label lbl3 = (Label)gridSumm.Items[i].FindControl("lblGrowth");

            if (Convert.ToDouble(lbl3.Text) < 0)

                lbl3.ForeColor = System.Drawing.Color.Red;



            /*////Set forecolor for the bound column text

            //for (int j = gridSumm.Items.Count - 1; j > 1; j--)

            //{

            //    if (Convert.ToDouble(gridSumm.Items[i][gridSumm.Columns[j]].Text) < 0)

            //    {

            //        gridSumm.Items[i][gridSumm.Columns[j]].ForeColor = System.Drawing.Color.Red;

            //    }

            //}*/



        }





    }



    /// <summary>

    /// Get the selected row key value

    /// </summary>

    /// <param name="sender"></param>

    /// <param name="e"></param>

    protected void gridSumm_SelectedIndexChanged(object sender, EventArgs e)

    {

        string type = gridSumm.SelectedItems[0].OwnerTableView.DataKeyValues[gridSumm.SelectedItems[0].ItemIndex]["Type"].ToString();

    }



    /// <summary>

    /// Add more option for page size dropdown

    /// </summary>

    /// <param name="sender"></param>

    /// <param name="e"></param>

    protected void gridSumm_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)

    {

        if (e.Item is GridPagerItem)

        {

            /*RadComboBox PageSizeCombo = (RadComboBox)e.Item.FindControl("PageSizeComboBox");



            PageSizeCombo.Items.Clear();

            PageSizeCombo.Items.Add(new RadComboBoxItem("15"));

            PageSizeCombo.FindItemByText("15").Attributes.Add("ownerTableViewId", gridSumm.MasterTableView.ClientID);

            PageSizeCombo.Items.Add(new RadComboBoxItem("50"));

            PageSizeCombo.FindItemByText("50").Attributes.Add("ownerTableViewId", gridSumm.MasterTableView.ClientID);

            PageSizeCombo.Items.Add(new RadComboBoxItem("150"));

            PageSizeCombo.FindItemByText("150").Attributes.Add("ownerTableViewId", gridSumm.MasterTableView.ClientID);

            PageSizeCombo.Items.Add(new RadComboBoxItem("250"));

            PageSizeCombo.FindItemByText("250").Attributes.Add("ownerTableViewId", gridSumm.MasterTableView.ClientID);

            //PageSizeCombo.FindItemByText(e.Item.OwnerTableView.PageSize.ToString()).Selected = true;*/



            /*RadComboBox PageSizeCombo = (RadComboBox)e.Item.FindControl("PageSizeComboBox");

            PageSizeCombo.Items[0].Text = "100";

            PageSizeCombo.Items[1].Text = "150";

            PageSizeCombo.Items[2].Text = "300";

            PageSizeCombo.FindItemByText(e.Item.OwnerTableView.PageSize.ToString()).Selected = true;*/

        }

        /*if (e.Item is GridDataItem)

        {

            GridDataItem dataItem = (GridDataItem)e.Item;

            dataItem["Column1"].CssClass = "class1";

        } */



    }

}

CSS File: (SpasGrid.css)

.RadGrid {

    background-color: White;

    color: WindowText;

    border-width: 1px;

    border-style: outset;

    max-width: 100%;

    border: solid 1px #e0e0e0;

}



.RadGrid a {

    color: White;

    text-decoration: none;

}

.RadGrid a :hover {

    text-decoration: underline;

}



/* Radgrid MasterTable*/

.rgHeader,

.rgMasterTable th

{

    /* background-color: #8E3A6B;*/

    background: url('../Images/Section_Header_12.jpg');

    border-right: solid 1px #e0e0e0;

    border-bottom: solid 1px #e0e0e0;

    color: White;

    font: 12px/16px "segoe ui" ,arial,sans-serif;

    text-align:center !important;

    padding:0px !important;

    padding-right:1px !important;

}



.rgMasterTable td

{

    border-collapse:collapse !important;

    padding-top:0px;

    padding-bottom:0px !important;

}



/* Radgrid Group panel*/

.rgGroupPanel {

    background-color: #97948a;

    width: 100%;

    color: white;

    font-size: small;

}

.rgGroupPanelItems {

    background-color: ButtonFace;

    color: WindowText;

    border-width: 1px;

    border-style: outset;

    white-space: nowrap;

    font-size: 11px;

}



.rgGroupHeader {

    background-color: ButtonFace;

    color: WindowText;

    font-weight: bold;

}



.rgGroupHeader td {

    border: 0px;

    border-bottom: 1px outset ButtonFace;

}



/* Radgrid Items*/

.rgRow,

.rgAltRow

{

    color: WindowText;

    background-color: white;

    height:25px;

}

.rgAltRow

{

    background-color:#f0f0f0;

}



.rgRow td,

.rgAltRow td

{

    font: 12px/16px "segoe ui" ,arial,sans-serif;

    cursor:hand;

    border-right: solid 1px #e0e0e0 ;

    border-bottom: solid 1px #e0e0e0 ;

    padding-top:0px !important;

    padding-bottom:0px !important;

    padding-left: 0px !important;

    padding-right: 2px !important;

}



.ResizeItem {

    background-color: #f8f6f0;

    border-top: 1px solid white;

    background-image: none;

}



.rgSelectedRow {

    background-color: Gray;

}



/* Radgrid Footer*/

.rgFooter {

    background-color: White;

    color: WindowText;

    height: 7px;

}



.rgFooter TD {

    border: 1px outset ButtonFace;

}



/* Radgrid Pager*/

.rgPager {

    background-color: #f8f8f8;

    font-family: "segoe ui" ,arial,sans-serif;

    font-size:11px;

    font-weight:bold;

    color:#505050;

    height: 3px;

}

.rgPager a

{

    color:Black;

}

.rgPager a:hover

{

    color:Black;

    text-decoration:'underline';

}

.rgPager .rgAdvPart

{

   display:none;

}

div.RadGrid .rgPager .NumericPages .rgNumPart

{

    padding-left:0;

}

div.RadGrid .rgPager .rgNumPart a

{

    text-decoration:underline;

}

div.RadGrid .rgPager .rgNumPart a.rgCurrentPage

{

    text-decoration:none;

}



div.MyCustomScrollImage .rgHeaderDiv

{

       background:0 0 repeat-x url('../Images/Section_Header_12.jpg') ;

}





/*Grid Merged column*/

.gridSubCol

{

    font: 12px/16px "segoe ui" ,arial,sans-serif;

    border-bottom: none !important;

    height:25px;

}

.gridMergeColHeader

{

    border-bottom: solid 1px #e0e0e0;

}

.gridSubColHeader

{

    border-right: solid 1px #e0e0e0;

}

Skin file: (RadGrid.skin)

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<telerik:RadGrid skinid="SpasGrid" CssClass="RadGrid_Spas" CssFile="~/Style/SpasGrid.css" runat="server"

               AllowSorting="True" ShowFooter="True"

               PagerStyle-FirstPageText="First Page" PagerStyle-LastPageText="Last Page" BorderWidth="1px">

    <GroupPanel>

        <PanelItemsStyle CssClass="rgGroupPanelItems" />

        <PanelStyle CssClass="rgGroupPanel" />

    </GroupPanel>

    <HeaderStyle CssClass="rgHeader" />

    <FooterStyle CssClass="rgFooter" />

    <GroupHeaderItemStyle CssClass="rgGroupHeader" />

    <PagerStyle Mode="NumericPages" PagerTextFormat="{0}" CssClass="rgPager" />

    <ItemStyle CssClass="rgRow" />

    <AlternatingItemStyle CssClass="rgAltRow" />

    <SelectedItemStyle BackColor="#ffffe1"></SelectedItemStyle>

    <MasterTableView CssClass="rgMasterTable">

        <RowIndicatorColumn>

            <ItemStyle CssClass="ResizeItem"></ItemStyle>

        </RowIndicatorColumn>

    </MasterTableView>

    <ClientSettings>

        <Resizing AllowColumnResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="True"></Resizing>

        <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True"></Scrolling>

        <Selecting AllowRowSelect="True"></Selecting>

    </ClientSettings>

</telerik:RadGrid>

answered on 11 Feb 2011, 11:28 AM

Hello Gopinath,

Please have in mind that RadGrid does not support mixing declarative grid columns with grid columns added dynamically at runtime. You should either create all the columns in the grid programmatically, or else define them all in the ASPX file.

I recommend that you follow strictly the conventions for dynamic grid structure creation explained here and see if the problem still persists.

All the best,
Pavlina
the Telerik team

answered on 15 Feb 2011, 01:09 PM

default-2.zip

Hello Gopinath,

I tried to replicate the problem in a simple test page based on the provided code, but to no avail. Could you please modify the attached sample so that the problem can be observed?

Greetings,
Pavlina
the Telerik team

answered on 22 Feb 2011, 03:34 PM

default-3-5.zip

Hello Rabeek Ahamed,

I have modified the project from the previous post to use 3.5 framework. Find it attached to this message.

Best wishes,
Pavlina
the Telerik team

Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!

answered on 23 Mar 2011, 07:15 AM

All the issues has been resolved except the browser compatibility issue. The same grid is displayed in firefox without the style applied. Kindly suggest me some solution to fix that issue.

1. scrollbar Header background image is not displaying. How to get scrollbar header background. (resolved)
Solution: Set the background for the div

div.RadGrid

{

background:0 0 repeat-x url('../Images/Section_Header_12.jpg');

}

2. When scrolls, the scrollbar displays tooltip saying that "Page 1 of 1". How to remove this. (resolved)
3. After the data rows in the grid, one empty row was added at the end. How to remove this. (resolved)
Solution: Set the EnableVirtualScrollPaging="false"

4. The styles are not applied to the grid when I browse from Firefox.
Not resolved.

Accepted

answered on 28 Mar 2011, 02:08 PM

RadGrid-Scrollbar-issue-new.zip

Hello Rabeek,

Thank you for the provided project. Please find attached to this message a modified application which demonstrates how you can achieve the desired result. Give it a try and let me know if other questions arise.

To avoid appearance of Page 1 of 1 tooltip that will be displayed when you hover the vertical scroll when virtual scrolling is enabled you should set PagerTooltipFormatString="". More information is available here:
http://www.telerik.com/help/aspnet-ajax/grid-localizing-tooltips.html

Kind regards,
Pavlina
the Telerik team

Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!