css - 启用 UseStaticHeaders 时 Telerik Radgrid Group Header 对齐问题

标签 css asp.net telerik telerik-grid radgrid

我想卡住列标题，因此我设置了 UseStaticHeaders=True。

但我发现 Group Header 有对齐问题(请参阅随附的屏幕截图)。

我曾尝试使用 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>

最佳答案

我试过你的代码..在我的电脑上工作正常.. 您使用的是哪种浏览器？

这是代码..

.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

关于css - 启用 UseStaticHeaders 时 Telerik Radgrid Group Header 对齐问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33793915/

上一篇：html - 将按钮向下推到 div 的底部

下一篇：php - 每个/其他 CSS 技术

相关文章：

c# - 如何通过 Child ReorderList 中的代码隐藏更改 SqlDataSource 的 ConnectionString 属性？

javascript - 具有重复名称的名称-值对列表到 JavaScript 对象

jquery - 如何创建一个弹出式 div，当弹出时不会一直滚动到顶部？

asp.net - 如何保护 ajax 处理程序的安全？

css - google chrome 和 safari 左侧边框错误？

asp.net - 有人在分布式农场上使用 Memcached 和 ASP.NET 吗？

silverlight - 带有每个 Tab 的 UI Tabbed 具有不同的 View/ViewModel

javascript - 显示前清除 Telerik radwindow 内容

html - 如果侧边菜单的高度超过窗口，如何固定？

jquery - 不支持的浏览器中的 CSS3 3d 转换

©2024 IT工具网  联系我们