1. 首頁
  2. 問答
  3. Telerik Radgrid Group啓用時的標題對齊問題UseStaticHeaders

Telerik Radgrid Group啓用時的標題對齊問題UseStaticHeaders

2015-11-19 41 views
0

我想凍結列標題，以便設置UseStaticHeaders = True。Telerik Radgrid Group啓用時的標題對齊問題UseStaticHeaders

但我發現組頁眉有對齊問題（請參閱附加的屏幕截圖）。

我曾嘗試使用CSS，但沒有工作。

enter image description here

感謝

代碼如下：

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Delivery.aspx.vb" Inherits="Project_Delivery" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<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>

來源

2015-11-19 Joe Yan

+0

什麼版本的telerik？我試過的工作非常好。也許發佈一些代碼將幫助我們確定你的問題 – Nic

回答

0

我曾嘗試你的代碼..在我的電腦工作正常.. 什麼樣的瀏覽器使用的是？

下面是代碼..

的.aspx

<asp:ScriptManager ID="sm" runat="server"></asp:ScriptManager> 

     <telerik:RadGrid ID="rgData" runat="server" AllowFilteringByColumn="true" AllowSorting="true" AutoGenerateColumns="false" 
     GroupPanelPosition="Top" AllowPaging="true" PageSize="30" Width="3000px" Height="800px" OnNeedDataSource="rgData_NeedDataSource"> 
      <ClientSettings AllowRowsDragDrop="true" AllowColumnsReorder="true" AllowDragToGroup="true" ReorderColumnsOnClient="true" > 
       <Selecting AllowRowSelect="true" EnableDragToSelectRows="false" /> 
       <Scrolling AllowScroll="true" UseStaticHeaders="true" /> 
      </ClientSettings> 
     <MasterTableView 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" /> 
       </telerik:GridBoundColumn>     
      </Columns> 
     </MasterTableView> 
    </telerik:RadGrid>

的CSS

* html .RadGrid .rgGroupHeader td div div 
{ 
     top:0.1em !important; 
     /*font-size:x-large !important;*/ 
     padding-top: 2em; 
     height: 20em !important; 
}

的.cs

protected void Page_Load(object sender, EventArgs e) 
{ 
    // Check 
    if(!IsPostBack) 
    { 
     // Variable 
     DataTable dt = new DataTable(); 

     // Create Column 
     dt.Columns.Add("DeliveryID", typeof(int)); 
     dt.Columns.Add("OrderFormNo", typeof(int)); 
     dt.Columns.Add("Qty", typeof(int)); 
     dt.Columns.Add("DeliveryDate", typeof(DateTime)); 
     dt.Columns.Add("DocketID", typeof(int)); 
     dt.Columns.Add("PourID", typeof(int)); 
     dt.Columns.Add("LocationCode", typeof(string)); 

     // Dummy Variable 
     int[] deliveryID = { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 }; 
     int[] orderFormNo = { 1, 1, 1, 2, 2, 2, 3, 3, 3, 4 }; 
     int[] qty = { 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 }; 
     DateTime[] deliveryDate = { DateTime.Now, DateTime.Now.AddDays(1), DateTime.Now.AddDays(2), DateTime.Now.AddDays(3), 
            DateTime.Now.AddDays(4), DateTime.Now.AddDays(5), DateTime.Now.AddDays(6), DateTime.Now.AddDays(7), 
            DateTime.Now.AddDays(8), DateTime.Now.AddDays(9) }; 
     int[] docketID = { 1000, 1001, 1002, 1003, 1004, 1005, 1006, 1007, 1008, 1009 }; 
     int[] pourID = { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 }; 
     string[] locationCode = { "A1", "A2", "A3", "A4", "A5", "A6", "A7", "A8", "A9", "A10" }; 

     for (int i = 0; i < deliveryID.Length; i++) 
      dt.Rows.Add(deliveryID[i], orderFormNo[i], qty[i], deliveryDate[i], docketID[i], pourID[i], locationCode[i]); 

     // ViewState 
     ViewState["Data"] = dt; 

     // Bind 
     rgData.DataSource = dt; 
     rgData.DataBind(); 
    } 
} 

protected void rgData_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) 
{ 
    rgData.DataSource = ViewState["Data"] as DataTable; 
}

結果

enter image description here

來源

2015-11-23 06:31:45 Nic

+0

嗨，我曾嘗試IE9，IE11，火狐版本42.0 ...所有人都有對齊問題 –

+0

@JoeYan然後，我不能幫助你，如果我不能複製相同的情景我不能幫你... – Nic

+0

沒關係，thx很多。 –

相關問題

 相關問題