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

How to remove RadGrid Vertical white space

5 Answers 299 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Florence D
Top achievements
Rank 1
Florence D asked on 28 Jun 2010, 11:56 AM
Dear Team,
How to remove the vertical white space in Radgrid.
Refer the attached screenshot.



<

 

telerik:RadGrid runat="server" ID="DGE" AllowSorting="false" AllowMultiRowSelection="true"

 

 

AutoGenerateColumns="false" EnableEmbeddedSkins="false" Skin="NextGen" Visible="true"

 

 

OnItemDataBound="Grid_ItemDataBound" EnableEmbeddedScripts="false" >

 

 

<ClientSettings EnableRowHoverStyle="true">

 

 

<Scrolling AllowScroll="true" ScrollHeight="120px" UseStaticHeaders="true" />

 

 

<Selecting AllowRowSelect="true" EnableDragToSelectRows="true" />

 

 

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

 

 

</ClientSettings>

 

 

<MasterTableView AutoGenerateColumns="false" GroupsDefaultExpanded="true" TableLayout="Auto">

 

 

<RowIndicatorColumn>

 

 

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

 

 

</RowIndicatorColumn>

 

 

<ExpandCollapseColumn>

 

 

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

 

 

</ExpandCollapseColumn>

 

 

<Columns>

 

 

<telerik:GridTemplateColumn HeaderStyle-HorizontalAlign="Center" HeaderText="" UniqueName="RecordCount"

 

 

HeaderStyle-Width="23px" Visible="true">

 

 

<ItemStyle HorizontalAlign="Center" />

 

 

<ItemTemplate>

 

<%

# Container.ItemIndex + 1 %>

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridBoundColumn HeaderStyle-HorizontalAlign="Left" >

 

 

<HeaderStyle Wrap="false" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn AllowSorting="false" DataField="PaymentAmount" HeaderStyle-HorizontalAlign="Left"

 

 

>

 

 

<HeaderStyle Wrap="false" />

 

 

<ItemStyle HorizontalAlign="Right" Wrap="false" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="PaymentCurrency" HeaderStyle-HorizontalAlign="Left"

 

 

">

 

 

<HeaderStyle Wrap="false" />

 

 

<ItemStyle Wrap="false" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn HeaderStyle-HorizontalAlign="Left" >

 

 

<ItemStyle Wrap="false" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridTemplateColumn >

 

 

<ItemTemplate>

 

 

<asp:Label ID="lblSM" runat="server"></asp:Label>

 

 

<telerik:RadToolTip ID="ttMsg" Text='' runat="server" RelativeTo="Mouse" AutoCloseDelay="50000"

 

 

EnableEmbeddedSkins="false" Skin="NextGen" TargetControlID="lblSM" EnableViewState="false">

 

 

</telerik:RadToolTip>

 

 

</ItemTemplate>

 

 

<ItemStyle Wrap="false" />

 

 

</telerik:GridTemplateColumn>

 

 

</Columns>

 

 

</MasterTableView>

 

 

<FilterMenu EnableTheming="True">

 

 

<CollapseAnimation Duration="200" Type="OutQuint" />

 

 

</FilterMenu>

 

 

<ClientSettings AllowDragToGroup="false" AllowGroupExpandCollapse="true" ReorderColumnsOnClient="false">

 

 

<Selecting AllowRowSelect="True" />

 

 

</ClientSettings>

 

 

<GroupingSettings UnGroupTooltip="true" />

 

 

</telerik:RadGrid>


Expecting your reply.

 

5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 28 Jun 2010, 02:36 PM
Hello Florence,

One option is to set ScrollHeight="" - then the control will expand and shrink vertically, depending on the number of rows. However, you will also not have vertical scrolling.

Another option is to use the following approach:

http://www.telerik.com/help/aspnet-ajax/grdresizegridwithscrollingwhenlessdata.html

All the best,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Florence D
Top achievements
Rank 1
answered on 28 Jun 2010, 03:11 PM
Thank you dimo,
I will get back to u once i implemented it.
0
Florence D
Top achievements
Rank 1
answered on 28 Jun 2010, 04:11 PM
Hello Dimo,

Thanks for your reply.
I tried your code. It is working fine in IE. but not in Firefox.

Please check it in firefox and let me know.
0
Dimo
Telerik team
answered on 28 Jun 2010, 04:30 PM
Hi Florence,

The suggested approach works in Firefox too. Please check for Javascript errors or disabled Javascript  on your side.

<%@ 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 = 4;
        int rowsNum = 4;
        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;
    }
      
</script>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
  
<script type="text/javascript">
function GridCreated(sender, args)
{
    var scrollArea = sender.GridDataDiv;
    var dataHeight = sender.get_masterTableView().get_element().clientHeight;
    if(dataHeight < 350)
    {
        alert("data area will resize");
        scrollArea.style.height = dataHeight + 17 + "px";
    }
}
</script>
<telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid_NeedDataSource">
 <ClientSettings>
   <Scrolling
      AllowScroll="True"
      UseStaticHeaders="True"
      ScrollHeight="350px" />
   <ClientEvents OnGridCreated="GridCreated" />
 </ClientSettings>
</telerik:RadGrid>
 
</form>
</body>
</html>


Best wishes,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Florence D
Top achievements
Rank 1
answered on 30 Jun 2010, 05:36 AM
Yes , its working fine dimo.

thanks a lot.
Tags
Grid
Asked by
Florence D
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Florence D
Top achievements
Rank 1
Share this question
or