Whitespace above Grid Headers

[Paul]

Hi,

I am struggling with a problem that I cannot resolve. I get a whitespace above the grid headers when I am using any other Skin than default, with the default skin it looks fine, but I am using WebBlue and its got this nasty whitespace.

Secondly I use DetailTables, and even though I set the detail table width to 100% there is still quite a big gap at the end of the detail grid.

Thanks

[Princy]

Hi Paul,

Here is a small example i have tried,check it,and see if it helps,or please provide your code.

ASPX:

<telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server" ShowStatusBar="true"
    Skin="WebBlue" AutoGenerateColumns="False" PageSize="10" AllowSorting="True"
    AllowMultiRowSelection="False" AllowPaging="True" GridLines="None" AllowAutomaticDeletes="True"
    AllowAutomaticInserts="True" AllowAutomaticUpdates="True" OnPreRender="RadGrid1_PreRender"
    ShowFooter="true">
    <PagerStyle Mode="NumericPages"></PagerStyle>
    <MasterTableView DataSourceID="SqlDataSource1" DataKeyNames="CustomerID" AllowMultiColumnSorting="True"
        Width="100%" CommandItemDisplay="Top" Name="Customers">
        <DetailTables>
            <telerik:GridTableView DataKeyNames="OrderID" DataSourceID="SqlDataSource2" Width="100%"
                runat="server" CommandItemDisplay="Top" Name="Orders">
                <ParentTableRelation>
                    <telerik:GridRelationFields DetailKeyField="CustomerID" MasterKeyField="CustomerID">
                    </telerik:GridRelationFields>
                </ParentTableRelation>
                <DetailTables>
                    <telerik:GridTableView DataKeyNames="OrderID,ProductID" DataSourceID="SqlDataSource3"
                        Width="100%" runat="server" CommandItemDisplay="Top" Name="Details">
                        <ParentTableRelation>
                            <telerik:GridRelationFields DetailKeyField="OrderID" MasterKeyField="OrderID"></telerik:GridRelationFields>
                        </ParentTableRelation>
                        <Columns>
                            <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn1">
                                <HeaderStyle Width="20px"></HeaderStyle>
                                <ItemStyle CssClass="MyImageButton"></ItemStyle>
                            </telerik:GridEditCommandColumn>
                            <telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton"
                                DataField="OrderID" UniqueName="OrderID" ReadOnly="true" Visible="false">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn SortExpression="ProductID" HeaderText="ProductID" HeaderButtonType="TextButton"
                                DataField="ProductID" UniqueName="ProductID" Aggregate="Count">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn SortExpression="UnitPrice" HeaderText="Unit Price" HeaderButtonType="TextButton"
                                DataField="UnitPrice" UniqueName="UnitPrice">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn SortExpression="Quantity" HeaderText="Quantity" HeaderButtonType="TextButton"
                                DataField="Quantity" UniqueName="Quantity">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn SortExpression="Discount" HeaderText="Discount" HeaderButtonType="TextButton"
                                DataField="Discount" UniqueName="Discount">
                            </telerik:GridBoundColumn>
                            <telerik:GridButtonColumn ConfirmText="Delete this product?" ButtonType="ImageButton"
                                CommandName="Delete" Text="Delete" UniqueName="DeleteColumn1">
                                <HeaderStyle Width="20px"></HeaderStyle>
                                <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton"></ItemStyle>
                            </telerik:GridButtonColumn>
                        </Columns>
                        <SortExpressions>
                            <telerik:GridSortExpression FieldName="Quantity" SortOrder="Descending"></telerik:GridSortExpression>
                        </SortExpressions>
                    </telerik:GridTableView>
                </DetailTables>
                <Columns>
                    <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn2">
                        <HeaderStyle Width="20px"></HeaderStyle>
                        <ItemStyle CssClass="MyImageButton"></ItemStyle>
                    </telerik:GridEditCommandColumn>
                    <telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton"
                        DataField="OrderID" UniqueName="OrderID" ReadOnly="true">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="OrderDate" HeaderText="Date Ordered" HeaderButtonType="TextButton"
                        DataField="OrderDate" UniqueName="OrderDate" Aggregate="CountDistinct">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="RequiredDate" HeaderText="RequiredDate"
                        HeaderButtonType="TextButton" DataField="RequiredDate" UniqueName="RequiredDate">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="EmployeeID" HeaderText="EmployeeID" HeaderButtonType="TextButton"
                        DataField="EmployeeID" UniqueName="EmployeeID">
                    </telerik:GridBoundColumn>
                    <telerik:GridButtonColumn ConfirmText="Delete these details record?" ButtonType="ImageButton"
                        CommandName="Delete" Text="Delete" UniqueName="DeleteColumn2">
                        <HeaderStyle Width="20px"></HeaderStyle>
                        <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton"></ItemStyle>
                    </telerik:GridButtonColumn>
                </Columns>
                <SortExpressions>
                    <telerik:GridSortExpression FieldName="OrderDate"></telerik:GridSortExpression>
                </SortExpressions>
            </telerik:GridTableView>
        </DetailTables>
        <Columns>
            <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">
                <HeaderStyle Width="20px"></HeaderStyle>
                <ItemStyle CssClass="MyImageButton"></ItemStyle>
            </telerik:GridEditCommandColumn>
            <telerik:GridBoundColumn SortExpression="CustomerID" HeaderText="CustomerID" HeaderButtonType="TextButton"
                DataField="CustomerID" UniqueName="CustomerID" MaxLength="5" Aggregate="Count">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn SortExpression="ContactName" HeaderText="Contact Name" HeaderButtonType="TextButton"
                DataField="ContactName" UniqueName="ContactName">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn SortExpression="CompanyName" HeaderText="Company" HeaderButtonType="TextButton"
                DataField="CompanyName" UniqueName="CompanyName">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn SortExpression="Address" HeaderText="Address" HeaderButtonType="TextButton"
                DataField="Address" UniqueName="Address">
            </telerik:GridBoundColumn>
            <telerik:GridButtonColumn ConfirmText="Delete this customer?" ButtonType="ImageButton"
                CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">
                <HeaderStyle Width="20px"></HeaderStyle>
                <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton"></ItemStyle>
            </telerik:GridButtonColumn>
        </Columns>
        <SortExpressions>
            <telerik:GridSortExpression FieldName="CompanyName"></telerik:GridSortExpression>
        </SortExpressions>
    </MasterTableView>
</telerik:RadGrid>

Thanks
Princy

[Missing User]

Hi Princy,

I had a look at  your example and cannot see that there is anything majorly different. Here is my whole page aspx code:

<%@ Page Title="Portfolios" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Portfolio.aspx.cs" Inherits="FINIQ.Pages.PortfolioPages.Portolios" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
    </telerik:RadStyleSheetManager>
    <telerik:RadAjaxPanel runat="server" Width="100%">
        <table style="width: 100%">
            <tr>
                <td>
                    <telerik:RadTextBox runat="server" ID="txtSearch" Width="600px" />

                    <telerik:RadButton runat="server" ID="bthSearch" Text="Search" ButtonType="SkinnedButton" OnClick="bthSearch_Click" Skin="WebBlue"/>

                    <telerik:RadButton runat="server" ID="btnClear" Text="Clear Results" ButtonType="SkinnedButton" OnClick="btnClear_Click" Visible="false" Skin="WebBlue"/>

                    <telerik:RadButton runat="server" ID="btnCreate" Text="New Portfolio" ButtonType="SkinnedButton" NavigateUrl="PortfolioDetail.aspx?id=new" Skin="WebBlue"/>
                </td>
            </tr>
            <tr>
                <td>
                    <telerik:RadGrid runat="server" ID="grdPortfolios" AllowPaging="True" CellSpacing="0" GridLines="Horizontal" ShowStatusBar="true" OnItemCommand="grdPortfolios_ItemCommand" Skin="WebBlue" OnNeedDataSource="grdPortfolios_NeedDataSource" OnDetailTableDataBind="grdPortfolios_DetailTableDataBind">
                        <MasterTableView AutoGenerateColumns="false" ShowHeadersWhenNoRecords="true" NoMasterRecordsText="No Portfolios to display" DataKeyNames="PortfolioID">
                            <DetailTables>
                                <telerik:GridTableView DataKeyNames="PropertyID" Name="Properties" SkinID="WebBlue" Width="100%" AutoGenerateColumns="false">
                                    <CommandItemSettings ExportToPdfText="Export to PDF" />
                                    <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
                                    </RowIndicatorColumn>
                                    <ExpandCollapseColumn Created="True" FilterControlAltText="Filter ExpandColumn column" Visible="True">
                                    </ExpandCollapseColumn>
                                    <Columns>
                                        <telerik:GridBoundColumn DataField="Code" HeaderText="Code" ReadOnly="true" />
                                        <telerik:GridBoundColumn DataField="Name" HeaderText="Name" ReadOnly="true" />
                                        <telerik:GridTemplateColumn ItemStyle-HorizontalAlign="Center" ItemStyle-Width="45px">
                                            <ItemTemplate>
                                                <telerik:RadButton ID="btnEdit" runat="server" ButtonType="SkinnedButton" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"PropertyID") %>' CommandName="EditProperty" Skin="WebBlue" Text="Edit" />
                                            </ItemTemplate>
                                            <ItemStyle HorizontalAlign="Center" Width="45px" />
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridTemplateColumn ItemStyle-HorizontalAlign="Center" ItemStyle-Width="45px">
                                            <ItemTemplate>
                                                <telerik:RadButton ID="btnDelete" runat="server" ButtonType="SkinnedButton" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"PropertyID") %>' CommandName="DeleteProperty" Skin="WebBlue" Text="Delete" />
                                            </ItemTemplate>
                                            <ItemStyle HorizontalAlign="Center" Width="45px" />
                                        </telerik:GridTemplateColumn>
                                    </Columns>
                                    <EditFormSettings>
                                        <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                                        </EditColumn>
                                    </EditFormSettings>
                                    <PagerStyle PageSizeControlType="RadComboBox" />
                                </telerik:GridTableView>
                            </DetailTables>
                            <PagerStyle PageSizeControlType="RadComboBox" />
                            <Columns>
                                <telerik:GridBoundColumn HeaderText="File Number" ReadOnly="true" DataField="FileNumber" />
                                <telerik:GridBoundColumn HeaderText="Code" ReadOnly="true" DataField="Code" />
                                <telerik:GridBoundColumn HeaderText="Name" ReadOnly="true" DataField="Name" />
                                <telerik:GridBoundColumn HeaderText="Valuation Effective Date" ReadOnly="true" DataField="ValuationEffectiveDate" DataFormatString="{0:D}" />
                                <telerik:GridBoundColumn HeaderText="Portfolio Value" ReadOnly="true" DataField="Value" DataFormatString="{0:C}" />
                                <telerik:GridTemplateColumn ItemStyle-HorizontalAlign="Center" ItemStyle-Width="45px">
                                    <ItemTemplate>
                                        <telerik:RadButton runat="server" ID="btnEdit" Text="Edit" ButtonType="SkinnedButton" Skin="WebBlue" CommandName="Edit" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"PortfolioID") %>' />
                                    </ItemTemplate>
                                    <ItemStyle HorizontalAlign="Center" Width="45px" />
                                </telerik:GridTemplateColumn>
                                <telerik:GridTemplateColumn ItemStyle-HorizontalAlign="Center" ItemStyle-Width="45px">
                                    <ItemTemplate>
                                        <telerik:RadButton runat="server" ID="btnDelete" Text="Delete" ButtonType="SkinnedButton" Skin="WebBlue" CommandName="Delete" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"PortfolioID") %>' />
                                    </ItemTemplate>
                                    <ItemStyle HorizontalAlign="Center" Width="45px" />
                                </telerik:GridTemplateColumn>
                            </Columns>
                        </MasterTableView>
                        <HeaderStyle Wrap="True" />
                        <PagerStyle PageSizeControlType="RadComboBox" />
                        <FilterMenu EnableImageSprites="False">
                        </FilterMenu>
                    </telerik:RadGrid>
                </td>
            </tr>
        </table>
    </telerik:RadAjaxPanel>
</asp:Content>

Could it be that I wrap the whole grid in an Update Panel?

Regards,
Paul

[Galin]

Hi Paul,

I also tried to replicate the issue on our side, but to no avail. I am sending my test project for your reference and screenshot attached to this post. Please let me know if you manage to reproduce what you are getting in this project, and what steps to follow, so that we can test it as well.

Additionally I guess you are using custom styles which can break the RadGrid layout, could you try to remove them and check out if the issue still persists?

Regards,
Galin
Telerik

[Paul]

Hi Galin,

The custom styling on the table was the problem, thanks for the info!

Regards,
Paul