How to remove RadGrid Vertical white space

[Florence D]

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.

 

[Dimo]

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

[Florence D]

Thank you dimo,
I will get back to u once i implemented it.

[Florence D]

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.

[Dimo]

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

[Florence D]

Yes , its working fine dimo.

thanks a lot.