Whitespace above Grid Headers

5 posts, 0 answers
  1. Paul
    Paul avatar
    9 posts
    Member since:
    Sep 2012

    Posted 07 Jun 2013 Link to this post

    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
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 09 Jun 2013 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Missing user
    Missing user avatar

    Posted 20 Jun 2013 Link to this post

    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
  5. Galin
    Admin
    Galin avatar
    526 posts

    Posted 25 Jun 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Paul
    Paul avatar
    9 posts
    Member since:
    Sep 2012

    Posted 26 Jun 2013 Link to this post

    Hi Galin,

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

    Regards,
    Paul
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017