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

Group Header alignment problem when UseStaticHeaders enable

4 Answers 89 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 18 Nov 2015, 07:08 AM

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

4 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 19 Nov 2015, 08:17 AM
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
0
Joe
Top achievements
Rank 1
answered on 20 Nov 2015, 01:57 AM

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

0
Joe
Top achievements
Rank 1
answered on 23 Nov 2015, 06:06 AM

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>


0
Pavlina
Telerik team
answered on 24 Nov 2015, 04:55 PM
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
Tags
Grid
Asked by
Joe
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Joe
Top achievements
Rank 1
Share this question
or