如何为 Telerik RadGrid 中的列标题赋予颜色

问题描述

我在 asp .net 中创建了一个 Telerik RadGrid.我的要求是为列标题提供我自己的颜色.我们怎样才能做到这一点......?下面是我使用的代码结构.

I have created a telerik RadGrid in asp .net. My requirement is to give my own color to Column header. How can we achieve this...? Below is the code structure I'm using.

  <Telerik:RadGrid ID="RadGrid2" runat="server">
     <MasterTableView Width="100%" DataKeyNames="CustomerID" AllowMultiColumnSorting="True">

            <DetailTables>
                <telerik:GridTableView DataKeyNames="OrderID" Name="Orders" Width="100%">

                    <DetailTables>
                        <telerik:GridTableView DataKeyNames="OrderID" Name="OrderDetails" Width="100%">
                            <Columns>
                                <telerik:GridBoundColumn SortExpression="UnitPrice" HeaderText="Unit Price" HeaderButtonType="TextButton" DataField="UnitPrice">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn SortExpression="Quantity" HeaderText="Quantity" HeaderButtonType="TextButton" DataField="Quantity">
                                </telerik:GridBoundColumn>
                            </Columns>
                        </telerik:GridTableView>
                    </DetailTables>

                    <Columns>
                        <telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton" DataField="OrderID">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="OrderDate" HeaderText="Date Ordered" HeaderButtonType="TextButton" DataField="OrderDate" UniqueName="OrderDate" DataFormatString="{0:D}">
                        </telerik:GridBoundColumn>
                    </Columns>

                </telerik:GridTableView>
            </DetailTables>

            <Columns>
                <telerik:GridBoundColumn SortExpression="CustomerID" HeaderText="CustomerID" HeaderButtonType="TextButton" DataField="CustomerID">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn SortExpression="ContactName" HeaderText="Contact Name" HeaderButtonType="TextButton" DataField="ContactName">
                </telerik:GridBoundColumn>
            </Columns>

        </MasterTableView>
    </telerik:RadGrid>

它应该如下图所示:

推荐答案

Telerik 自动为其网格使用皮肤.如果您没有指定皮肤，它将使用 Grid.Default 皮肤.您可以将此皮肤或任何皮肤修改为您自己的自定义样式.只需按照以下步骤操作即可.

Telerik automatically uses a skin for its grid. If you have not specified a skin it will use the Grid.Default skin. You can modify this skin or any of the skins to your own custom style. Just follow these steps.

• 更改 css 文件中的属性.(默认网格皮肤称为 Grid.Default.css.在我的计算机上，它位于文件夹 Skins\Default 中的用于 ASP.NET AJAX 的 Telerik RadControls 的文件夹中.)在这种情况下，更改 css 类似这个:

Grid.Default.css(第 59 行)

Grid.Default.css (line 59)

.RadGrid_Default .rgHeader,
.RadGrid_Default th.rgResizeCol
{
  border:0;
  border-bottom:1px solid #828282;
  background-color: Red;
  /* background:#eaeaea 0 -2300px repeat-x url('Grid/sprite.gif'); */
}

• 添加指向您在网格所在页面(或母版页)上修改的 css 文件的链接.<link href="Grid.Default.css" rel="stylesheet" type="text/css"/>

  将属性 EnableEmbeddedSkins="false" 添加到您的 RadGrid.<telerik:RadGrid ID="RadGrid1" EnableEmbeddedSkins="false" runat="server"> 这将告诉页面使用修改后的 css 文件而不是嵌入的文件.

  Add the property EnableEmbeddedSkins="false" to your RadGrid. <telerik:RadGrid ID="RadGrid1" EnableEmbeddedSkins="false" runat="server"> This will tell the page to use your modified css file instead of the embedded one.

  Telerik 的网站有一篇名为 如何覆盖 ASP.NET AJAX 嵌入式皮肤的 RadControl 中的样式，详细解释了如何覆盖现有样式.

  Telerik's web site has a blog post called How To Override Styles in a RadControl for ASP.NET AJAX' Embedded Skin that explains in detail how to override an existing style.

  这篇关于如何为 Telerik RadGrid 中的列标题赋予颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！