This is a migrated thread and some comments may be shown as answers.
RADGrid Scrolling + Blank Space
7 Answers 354 Views
This is a migrated thread and some comments may be shown as answers.
Das
Top achievements
Rank 1
Das asked on 16 Jan 2009, 06:25 AM
Hi,

I am using the scolling feature in RADGrid. When there are more than 6 records in the grid it looks fine. If there are lesser records then I can see an empty area in the bottom of the grid. I set the height of the grid to 350 px. If I use StaticHeaders="true" I can see the space in both the sides, right and bottom. Please give me some workaround for this. Any suggestions are highly appreciated.

7 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 19 Jan 2009, 10:55 AM
Hello Das,

The empty space on the right is expected and appears when the RadGrid MasterTableView is in automatic TableLayout mode. In order to remove the empty space, please do one of the following:

1) set TableLayout="Fixed" for the MasterTableView
2) set Width for the MasterTableView
3) set larger column widths

The following simple example shows how to remove the empty space below the last record. Please note that when using the ScrollHeight property, the RadGrid Height property must not be used. The number 24 in the C# code, which is actually the height of a single row, depends on the RadGrid skin and any custom styles being used.

ASPX

<telerik:RadGrid 
    ID="RadGrid1" 
    runat="server" 
    Width="600px" 
    Skin="Gray" 
    OnDataBound="RadGrid1_DataBound"
    <MasterTableView TableLayout="Fixed" /> 
    <ClientSettings> 
        <Scrolling AllowScroll="true" UseStaticHeaders="true" /> 
    </ClientSettings> 
</telerik:RadGrid> 


C#

    protected void RadGrid1_DataBound(object sender, EventArgs e) 
    { 
        RadGrid grid = sender as RadGrid; 
        int gridItems = grid.MasterTableView.Items.Count; 
        if (gridItems < 7) 
        { 
            grid.ClientSettings.Scrolling.ScrollHeight = Unit.Pixel(gridItems * 24); 
        } 
    } 
 


All the best,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Das
Top achievements
Rank 1
answered on 19 Jan 2009, 12:31 PM
Thanks Dimo. This does not seem to work for me. I am not using any styles. I use Skin='Default' and have css class which has font-style:normal; What happens after I add this is all the rows become very small in height thereby leaving space in the bottom. Any other suggestions please. I have added the grid code below:

<

rad:RadGrid ID="rg1" CssClass="ms-WPTitle" AutoGenerateColumns="False"

 

 

PageSize="10" AllowPaging="True" AllowSorting="True" runat="server"

 

 

Width="100%" AllowFilteringByColumn="True" OnItemDataBound="rg1_OnItemDataBound"

 

 

HorizontalAlign="NotSet" ShowGroupPanel="True" Skin="Default" FilterMenu-CssClass="FilterMenuClass1"

 

 

OnNeedDataSource="rg1_OnNeedDataSource" OnDataBound="rg1_DataBound"

 

 

OnItemCreated="rg1_OnItemCreated">

 

 

<AlternatingItemStyle BackColor="White" />

 

<%

-- <SelectedItemStyle BackColor="#CCFFCC" /> --%>

 

 

<SelectedItemStyle Font-Bold="true" />

 

 

<ClientSettings AllowDragToGroup="True">

 

 

<Scrolling AllowScroll="true" ScrollHeight="350px" />

 

 

<Resizing AllowColumnResize="true" ResizeGridOnColumnResize="true" AllowRowResize="true" />

 

 

</ClientSettings>

 

 

<MasterTableView GridLines="None" CommandItemDisplay="Top" Width="100%" >

 

 

<CommandItemStyle HorizontalAlign="right" />

 

 

<CommandItemTemplate>

 

 

<asp:LinkButton ID="lnkRefresh" runat="server" CommandName="RebindGrid"><img style="border:0px" alt="" src="/wpresources/VesselAssurance/Images/Refresh.gif" /> Refresh </asp:LinkButton>

 

 

</CommandItemTemplate>

 

 

<Columns>
    <!--My columns here-->

 

</

Columns>

 

 

 

 

<ExpandCollapseColumn Visible="False" Resizable="False">

 

 

 

 

<HeaderStyle Width="20px"></HeaderStyle>

 

 

 

 

</ExpandCollapseColumn>

 

 

 

 

<RowIndicatorColumn Visible="False">

 

 

 

 

<HeaderStyle Width="20px"></HeaderStyle>

 

 

 

 

</RowIndicatorColumn>

 

 

 

 

</MasterTableView>

 

 

 

 

<ActiveItemStyle BackColor="White"></ActiveItemStyle>

 

 

 

 

<PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true" />

 

 

 

 

</rad:RadGrid>

 

0
Dimo
Telerik team
answered on 22 Jan 2009, 10:15 AM
Hi Das,

In my previous post I assumed that you are using staic headers, however this is not the case.

Here is another example with modified calculations of the ScrollHeight property. I hope this is what you are after:

<%@ Page Language="C#" %> 
<%@ Import Namespace="System.Data" %> 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
 
<script runat="server"
 
protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) 
    DataTable dt = new DataTable(); 
    DataRow dr; 
    int colsNum = 3
    int rowsNum = 6
    string colName = "Column"
 
    for (int j = 1; j <= colsNum; j++) 
    { 
        dt.Columns.Add(String.Format("{0}{1}", colName, j)); 
    } 
 
    for (int i = 1; i <= rowsNum; i++) 
    { 
        dr = dt.NewRow(); 
 
        for (int k = 1; k <= colsNum; k++) 
        { 
            dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i); 
        } 
        dt.Rows.Add(dr); 
    } 
 
    (sender as RadGrid).DataSource = dt
 
    protected void RadGrid1_DataBound(object sender, EventArgs e) 
    { 
        RadGrid grid = sender as RadGrid; 
        int gridgridItems = grid.MasterTableView.Items.Count; 
        if (gridItems < 7
        { 
            grid.ClientSettings.Scrolling.ScrollHeight = Unit.Pixel(gridItems * 24 + 130); 
        } 
    }  
     
</script> 
 
<!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"
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>RadControls for ASP.NET AJAX</title> 
</head> 
<body> 
<form id="form1" runat="server"
<asp:ScriptManager ID="ScriptManager1" runat="server" /> 
 
    <telerik:RadGrid ID="rg1" CssClass="ms-WPTitle" PageSize="10" 
        AllowPaging="True" AllowSorting="True" runat="server" Width="100%" AllowFilteringByColumn="True" 
        HorizontalAlign="NotSet" ShowGroupPanel="True" OnDataBound="RadGrid1_DataBound" 
        Skin="Default" OnNeedDataSource="RadGrid_NeedDataSource"
        <AlternatingItemStyle BackColor="White" /> 
        <SelectedItemStyle Font-Bold="true" /> 
        <ClientSettings AllowDragToGroup="True"
            <Scrolling AllowScroll="true" ScrollHeight="350px" /> 
            <Resizing AllowColumnResize="true" ResizeGridOnColumnResize="true" AllowRowResize="true" /> 
        </ClientSettings> 
        <MasterTableView GridLines="None" CommandItemDisplay="Top" Width="100%"
            <CommandItemStyle HorizontalAlign="right" /> 
            <CommandItemTemplate> 
                <asp:LinkButton ID="lnkRefresh" runat="server" CommandName="RebindGrid"><img style="border:0px" alt="" src="/wpresources/VesselAssurance/Images/Refresh.gif" /> Refresh </asp:LinkButton> 
            </CommandItemTemplate> 
            <Columns> 
 
            </Columns> 
        </MasterTableView> 
        <ActiveItemStyle BackColor="White"></ActiveItemStyle> 
        <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true" /> 
    </telerik:RadGrid> 
 
</form> 
</body> 
</html> 
 


Greetings,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Antony
Top achievements
Rank 1
answered on 16 Feb 2009, 11:48 AM
Hi,

Is there any way of setting the scroll height on the client? i.e. through the client API?

Thanks,

Antony
0
Sebastian
Telerik team
answered on 16 Feb 2009, 11:54 AM
Hello Antony,

Changing the scroll height of the grid client-side is possible with the techniques depicted in these help resources:

http://www.telerik.com/help/aspnet-ajax/grid-resize-grid-with-scrolling-when-less-data.html
http://www.telerik.com/help/aspnet-ajax/grid-change-scroll-height-at-runtime.html

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Terrance
Top achievements
Rank 1
answered on 06 Apr 2009, 03:04 PM
Is it possible to use:

1. Frozen Column Count   and
2. Resizing grid with scrolling when data is less than scroll height
    (http://www.telerik.com/help/aspnet-ajax/grdresizegridwithscrollingwhenlessdata.html)  and
3. Scrolling (horizontal and vertical only when needed)  and
4. Automatically adjust the Grid/MasterTableView width

all at the same time.

When I use 1 and 2, columns do not stay frozen.

The data we bring back may have 1 column upto 31 columns.  We need the grid to resize the width automatically.  I tried the width and height settings.  Even the scrollHeight settings.

Any ideas?

My code follows:

<

script type="text/javascript">

 

 

function GridCreatedA(sender, args)

 

{

 

var scrollArea = sender.GridDataDiv;

 

 

var parent = $get("gridContainer");

 

 

var gridHeader = sender.GridHeaderDiv;

 

scrollArea.style.height = parent.clientHeight - gridHeader.clientHeight +

"px";

 

}

 

 

function GridCreated(sender, args)

 

{

 

var scrollArea = sender.GridDataDiv;

 

 

var dataHeight = sender.get_masterTableView().get_element().clientHeight;

 

 

if(dataHeight < 350)

 

{

scrollArea.style.height = dataHeight + 17 +

"px";

 

}

 

// <ClientEvents OnGridCreated="GridCreated" />

 

}

</

script>

 

<

div id="MyDiv">

 

 

<radg:radgrid id="RadGrid1" runat="server"

 

 

AutoGenerateColumns="False"

 

 

GridLines="Vertical"

 

 

ShowFooter="True"

 

 

ShowHeader="True"

 

 

Font-Names="Arial"

 

 

Font-Size="10pt"

 

 

Skin="None"

 

 

Font-Bold="True"

 

 

width="800px"

 

 

>

 

 

<ClientSettings >

 

 

<Scrolling FrozenColumnsCount="4" AllowScroll="true"  UseStaticHeaders="true" />

 

 

</ClientSettings>

 

 

<ExportSettings>

 

 

<Pdf PageBottomMargin="" PageFooterMargin="" PageHeaderMargin="" PageHeight="11in"

 

 

PageLeftMargin="" PageRightMargin="" PageTopMargin="" PageWidth="8.5in" />

 

 

</ExportSettings>

 

 

<MasterTableView>

 

 

<Columns>

 

 

<radG:GridTemplateColumn HeaderStyle-Width="100px" HeaderStyle-CssClass="locked" HeaderText="Account Code" UniqueName="AcctCDObject">

 

 

<ItemTemplate><asp:Label ID="lblAcctCDObject" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="10pt" ForeColor="Black" Text='<%# Eval("AcctCDObject") %>' Visible="False" Width="47px"></asp:Label><radi:radmaskedtextbox id="RadMaskedTextBox1" runat="server" font-bold="True" height="18px" labelcssclass="radLabelCss_Default" mask="#####-####-###" skin="Office2007" SelectionOnFocus="selectAll" text='<%# Eval("AcctCDObject") %>' width="106px" ClientEvents-OnBlur="HandleChangeAgain" OnClientValueChanged="HandleChange" >

 

</

radi:radmaskedtextbox></ItemTemplate>

 

 

<ItemStyle Font-Bold="True" Font-Names="Arial" Font-Size="12pt" ForeColor="Navy" HorizontalAlign="Right" />

 

 

<HeaderStyle HorizontalAlign="Center" />

 

 

</radG:GridTemplateColumn>

 

 

<radG:GridBoundColumn HeaderStyle-Width="40px" HeaderStyle-CssClass="locked" DataField="FARSRollupCD" HeaderText="Sub" UniqueName="FARSRollupCD">

 

 

<ItemStyle Font-Bold="True" Font-Names="Arial" Font-Size="10pt" HorizontalAlign="Center" />

 

 

<HeaderStyle HorizontalAlign="Center" />

 

 

</radG:GridBoundColumn>

 

 

<radG:GridTemplateColumn HeaderStyle-Width="185px" HeaderStyle-CssClass="locked" HeaderText="Reason" UniqueName="Reason">

 

 

<ItemTemplate><asp:DropDownList ID="ddlAcctCDSubObj" runat="server" Width="180px" Font-Bold="True"></asp:DropDownList></ItemTemplate>

 

 

<ItemStyle Font-Bold="True" Font-Names="Arial" Font-Size="10pt" ForeColor="Navy" HorizontalAlign="Right" Wrap="False" />

 

 

<HeaderStyle HorizontalAlign="Center" />

 

 

</radG:GridTemplateColumn>

 

 

<radG:GridBoundColumn HeaderStyle-Width="60px" HeaderStyle-CssClass="locked" DataField="Subobject" HeaderText="Subobject" UniqueName="Subobject" Visible="False">

 

 

<HeaderStyle HorizontalAlign="Center" />

 

 

</radG:GridBoundColumn>

 

 

<radG:GridBoundColumn HeaderStyle-Width="50px" HeaderStyle-CssClass="locked" DataField="ProjectDescription" HeaderText="ProjectDescription" UniqueName="ProjectDescription" Visible="False">

 

 

<HeaderStyle HorizontalAlign="Center" />

 

 

</radG:GridBoundColumn>

 

 

<radG:GridTemplateColumn HeaderStyle-Width="40px" HeaderStyle-CssClass="locked" HeaderText="Total" UniqueName="TotalHours">

 

 

<ItemTemplate><asp:Label ID="lblTotalHours" runat="server" Text="Label"></asp:Label></ItemTemplate>

 

 

<ItemStyle Font-Bold="True" Font-Names="Arial" Font-Size="10pt" ForeColor="Navy" HorizontalAlign="Right" />

 

 

<HeaderStyle HorizontalAlign="Center" />

 

 

</radG:GridTemplateColumn>

 

 

<radG:GridBoundColumn DataField="PlaceholderRow" HeaderText="PlaceholderRow" UniqueName="PlaceholderRow"

 

 

Visible="False">

 

 

<HeaderStyle HorizontalAlign="Center" />

 

 

</radG:GridBoundColumn>

 

 

</Columns>

 

 

<ExpandCollapseColumn Resizable="False" Visible="False">

 

 

<HeaderStyle Width="20px" />

 

 

</ExpandCollapseColumn>

 

 

<RowIndicatorColumn Visible="False">

 

 

<HeaderStyle Width="20px" />

 

 

</RowIndicatorColumn>

 

 

</MasterTableView>

 

 

<FooterStyle Font-Bold="True" Font-Names="arial" Font-Size="10pt" HorizontalAlign="Right" />

 

 

<HeaderStyle Font-Underline="False" HorizontalAlign="Right" BackColor="#3B79C2" BorderStyle="Solid" Font-Names="Arial" Font-Size="10pt" ForeColor="White" />

 

 

<ItemStyle Font-Bold="True" />

 

 

<AlternatingItemStyle Font-Bold="True" />

 

</

radg:radgrid>

 

</

div><br />

 


I created a small video (avi) of the issue, if you'd like to see it.
0
Ram
Top achievements
Rank 1
answered on 08 Sep 2011, 01:17 PM
Hi ,
I'm using radgrid in my application.
I set the scrolling and userstaticheaders=true.
But grid rightside after lastcolum some space is coming on the top of scrollbar.
How to solve this problem. pls help  me as soon as possible.
Below is my code.

<

 

 

telerik:RadGrid ID="grdActCal" runat="server" AutoGenerateColumns="false"

 

 

 

GridLines="Both" Skin="WebBlue" Width="100%"

 

 

 

AllowSorting="true" onneeddatasource="grdActCal_NeedDataSource"

 

 

 

ondatabound="grdActCal_DataBound">

 

 

 

<ClientSettings>

 

 

 

<Resizing AllowColumnResize="true" />

 

 

 

<Scrolling AllowScroll="true" SaveScrollPosition="false" UseStaticHeaders="true" ScrollHeight="100%" />

 

 

 

</ClientSettings>

 

 

 

<AlternatingItemStyle HorizontalAlign="Left" />

 

<

 

 

MasterTableView TableLayout="Fixed">

 

<

 

 

HeaderStyle Height="13px" />

 

<

 

 

ItemStyle Height="13px" HorizontalAlign="Left" />

 

<

 

 

Columns>

 

<

 

 

telerik:GridBoundColumn DataField="ConsoleName" HeaderText="Console"/>

 

<

 

 

telerik:GridBoundColumn DataField="DispatcherName" HeaderText="Dispatcher" />

 

<

 

 

telerik:GridBoundColumn DataField="EPName" HeaderText="Endpoint" />

 

<

 

 

telerik:GridBoundColumn DataField="Priority" HeaderText="Dispatcher" />

 

<

 

 

telerik:GridBoundColumn DataField="Direction" HeaderText="Direction" />

 

</

 

 

Columns>

 

</

 

 

MasterTableView>

 

</

 

 

telerik:RadGrid>
I'm attatchig the screen shot.please find and help me as soon as possible

 


Tags
Grid
Asked by
Das
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Das
Top achievements
Rank 1
Antony
Top achievements
Rank 1
Sebastian
Telerik team
Terrance
Top achievements
Rank 1
Ram
Top achievements
Rank 1
Share this question
or