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

RADGrid Scrolling + Blank Space

7 Answers 665 Views

Grid

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

7 Answers, 1 is accepted

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>

    
                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.

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">

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

</ClientSettings>

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

</CommandItemTemplate>

Columns>

</ExpandCollapseColumn>

</RowIndicatorColumn>

</MasterTableView>

</rad:RadGrid>

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.

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>

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

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

</ExportSettings>

<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>

</radG:GridTemplateColumn>

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

</radG:GridBoundColumn>

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

</radG:GridTemplateColumn>

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

</radG:GridBoundColumn>

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

</radG:GridBoundColumn>

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

</radG:GridTemplateColumn>

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

Visible="False">

</radG:GridBoundColumn>

</Columns>

</ExpandCollapseColumn>

</RowIndicatorColumn>

</MasterTableView>

radg:radgrid>

div><br />

I created a small video (avi) of the issue, if you'd like to see it.

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>

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