Group Header alignment problem when UseStaticHeaders enable

5 posts, 0 answers
  1. Joe
    Joe avatar
    57 posts
    Member since:
    Mar 2013

    Posted 18 Nov 2015 Link to this post

    I want to freeze the column header, so that i set UseStaticHeaders=True.

    But i found that the Group Header had alignment problem (please see attached screen capture).

    Please help. Thanks

  2. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 19 Nov 2015 Link to this post

    Hello,

    Which browser you are using? Also could you provide a live URL where the issue can be observed so we can inspect it locally. 

    Additionally clarify if you are using the latest Telerik UI for ASP.NET AJAX version of the controls.

    Regards,
    Pavlina
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  3. Joe
    Joe avatar
    57 posts
    Member since:
    Mar 2013

    Posted 19 Nov 2015 Link to this post

    Hi, I had tried IE9, IE11, Firefox and Google Chrome. All of them had the same alignment problem (just like the attached screen capture)

     

    I am using the latest telerik ui version

  4. Joe
    Joe avatar
    57 posts
    Member since:
    Mar 2013

    Posted 23 Nov 2015 Link to this post

    Hi, i'm using the version 2015.3.1111.35.

     

    code as follows:

     

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Delivery.aspx.vb" Inherits="Project_Delivery" %>
     
    <!DOCTYPE html>
     
    <head runat="server">
             
        <title></title>
         <script type="text/javascript">
             var rowid = 0
     
             function RowSelected(sender, args) {
                 rowid = args.getDataKeyValue("DeliveryID")
             }
         </script>
     
    <style type="text/css">
          
       * html .RadGrid .rgGroupHeader td div div
       {
           top:0.1em !important;
           /*font-size:x-large !important;*/
           padding-top: 2em;
            height: 20em !important;
       }
          
     
       </style>
     
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
     
            <asp:Panel ID="Panel1" runat="server" CssClass="subpageheader" Width="100%">
                Delivery (Group by Order Form No.)
            </asp:Panel>
              <telerik:RadToolBar ID="rtbMain" runat="server" Width="100%" OnClientButtonClicking="OnClientItemClickingHandler">
                <Items>
                    <telerik:RadToolBarButton Value="Add" Text="Add" Width="100px" PostBack="true" CausesValidation="false" />
                    <telerik:RadToolBarButton IsSeparator="true" />
                    <telerik:RadToolBarButton Value="Edit" Text="Edit" Width="100px" PostBack="true" CausesValidation="false" />
                    <telerik:RadToolBarButton IsSeparator="true" />
                    <telerik:RadToolBarButton Value="Delete" Text="Delete" Width="100px" CausesValidation="false" PostBack="true" />
                    <telerik:RadToolBarButton IsSeparator="true" />            
                    <telerik:RadToolBarButton Value="Refresh" Text="Refresh" Width="100px" PostBack="true" CausesValidation="false">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton IsSeparator="true" />
                    <telerik:RadToolBarButton Value="Excel" Text="Excel" Width="100px" PostBack="true" CausesValidation="false" />
                    <telerik:RadToolBarButton IsSeparator="true" />
                    <telerik:RadToolBarButton Value="Copy" Text="Copy as New" Width="100px" PostBack="true" CausesValidation="false" />
                    <telerik:RadToolBarButton IsSeparator="true"></telerik:RadToolBarButton>
                </Items>
            </telerik:RadToolBar>
              
            <telerik:RadGrid ID="rgData" runat="server" DataSourceID="ldsDelivery" AllowFilteringByColumn="True" AllowSorting="True" AutoGenerateColumns="False"
                GroupPanelPosition="Top" AllowPaging="True" PageSize="30" Width="3000px" Height="800px" >
     
                <ClientSettings AllowRowsDragDrop="true" AllowColumnsReorder="True" AllowDragToGroup="True" ReorderColumnsOnClient="true" >
                   <Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />
                    <Selecting AllowRowSelect="True" />
                   <ClientEvents OnRowSelected="RowSelected" />
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                </ClientSettings>
     
     
     
     
                <MasterTableView DataSourceID="ldsDelivery" DataKeyNames="DeliveryID"  HeaderStyle-VerticalAlign="Top" AlternatingItemStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center">
                    <GroupByExpressions>
                        <telerik:GridGroupByExpression>
                            <SelectFields>
                                  <telerik:GridGroupByField FieldAlias="OrderFormNo" FieldName="OrderFormNo" />
                                  <telerik:GridGroupByField FieldAlias="Accumulatives" Aggregate="Sum" FieldName="Qty" />
                            </SelectFields>
                            <GroupByFields>
                                <telerik:GridGroupByField FieldAlias="OrderFormNo" FieldName="OrderFormNo" SortOrder="Descending" />                          
                            </GroupByFields>
                        </telerik:GridGroupByExpression>
                    </GroupByExpressions>
                    <GroupHeaderItemStyle Height="20px" CssClass="rgGroupHeader" />
                    <Columns>                 
                        <telerik:GridBoundColumn DataField="OrderFormNo" FilterControlAltText="Filter Concrete Order Form column" HeaderText="Concrete Order Form No" SortExpression="OrderFormNo" UniqueName="OrderFormNo">
                            <HeaderStyle Width="150px" />
                        </telerik:GridBoundColumn>      
                            <telerik:GridDateTimeColumn DataField="DeliveryDate" HeaderText="Delivery Date" FilterControlWidth="110px"
                                SortExpression="DeliveryDate" PickerType="DatePicker" EnableTimeIndependentFiltering="true"
                                DataFormatString="{0:dd-MMM-yyyy}">
                            <HeaderStyle Width="140px" />
                            </telerik:GridDateTimeColumn>                   
     
     
                         <telerik:GridBoundColumn DataField="DocketID" FilterControlAltText="Filter Docket ID column" HeaderText="Delivery Docket No" ReadOnly="True" SortExpression="DocketID" UniqueName="DocketID">
                            <ItemStyle Width="120px" />
                            <HeaderStyle Width="120px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="PourID" FilterControlAltText="Filter Pour Location column" HeaderText="Pour ID" ReadOnly="True" SortExpression="PourID" UniqueName="PourID">
                            <ItemStyle Width="120px" />
                            <HeaderStyle Width="120px" />
     
                        </telerik:GridBoundColumn>
                           <telerik:GridBoundColumn DataField="LocationCode" FilterControlAltText="Filter LocationCode column" HeaderText="Location Code" ReadOnly="True" SortExpression="LocationCode" UniqueName="LocationCode">
                            <ItemStyle Width="100px" />
                            <HeaderStyle Width="100px" />                   
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
     
              <asp:LinqDataSource ID="ldsDelivery" runat="server"
                    ContextTypeName="dcConcreteDatabaseDataContext"
                    TableName="view_DeliveryList2s" OrderBy="DeliveryDate">
             </asp:LinqDataSource>
     
            <script type="text/javascript">
     
                 function OnClientItemClickingHandler(sender, args) {
                     var grid = $find("<%=rgData.ClientID%>");
                    var gridSelectedItems = grid.get_selectedItems();
                    var selectcount = gridSelectedItems.length;
     
     
     
     
                    var button = args.get_item();
                    if (button.get_value() == "Delete") {
     
                        if (selectcount == 0) {
                            alert('Please select an item first!');
                            eventArgs.set_cancel(true);
     
                        }
                        else {
                            if (confirm('Are you sure?') == false) {
                                eventArgs.set_cancel(true);
                            }
     
                        }  
                    }
     
                    if (button.get_value() == "Edit") {
                        if (selectcount == 0) {
                            alert('Please select an item first!');
                            eventArgs.set_cancel(true);
                        }
     
                    }
     
                    if (button.get_value() == "Copy") {
                        if (selectcount == 0) {
                            alert('Please select an item first!');
                            eventArgs.set_cancel(true);
                        }
                    }
     
                }
     
     
            </script>
     
        </form>
    </body>
    </html>


  5. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 24 Nov 2015 Link to this post

    Hello,

    Try to remove ItemStyle-Width from your code and see if the alignment issue is still there. Note that for setting column widths in the grid only HeaderStyle-Width property should be used.
     
    Regards,
    Pavlina
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
Back to Top