Override Radgrid Header

[Sadaf]

Hi,
I am trying to change the Metro theme settings..but for some reason: I can't change the sort able column header when in groups. (in screen shot they appear in grey)..How can I change its font color..

<style type="text/css">
    div.RadGrid_Metro th.rgHeader,
    div.RadGrid_Metro th.rgSorted
    {
       background-image: none;
       background-color: #37A6CD;
       font-weight:bold;
       color: White;
    }
    </style>  

Thanks.

[Princy]

Hi,

Please try the following CSS.

CSS:

.RadGrid_Metro .rgHeader a
    {
       color: White !important;
    }

Thanks,
Princy.

[Sadaf]

Great. Thanks!

[Sadaf]

Now I want to change the color of the border of "Total drafts issued". I only want to do right border...?

[Princy]

Hi Sadi,

Please set the following CSS class to the required header to obtain right border.

ASPX:

<telerik:GridColumnGroup HeaderText="Total Drafts Issued" Name="DraftsIssued" HeaderStyle-CssClass="RightBorderStyle">
</telerik:GridColumnGroup>

CSS:

.RightBorderStyle
 {
   border-right: 1px solid red !important;
 }

Thanks,
Princy

[Sadaf]

It does not work...?

[Sadaf]

It is the 'As of..' date cell part of the header I am referring too...attaching the screen shot..Any ideas..?

[Princy]

Hi Sadi,

I tried to replicate the issue,but no avail,it works fine at my end.Below is the full code snippet.Please find the attached screenshot.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server"  AllowSorting="true" 

    Skin="Metro"  AutoGenerateColumns="false"> 

 <ClientSettings >

   <Scrolling AllowScroll="true" UseStaticHeaders="true"></Scrolling>  
 </ClientSettings>

 <GroupingSettings ShowUnGroupButton="true"></GroupingSettings>

 <MasterTableView EnableHeaderContextMenu="true">

      <ColumnGroups>           

            <telerik:GridColumnGroup HeaderText="Location" Name="Location" HeaderStyle-CssClass="RightBorderStyle">

            </telerik:GridColumnGroup>

          . . . . . . . . . . . . . .

      </ColumnGroups>

        <Columns>

       . . . . . . . . . . . . . .

        </Columns>

 </MasterTableView>

</telerik:RadGrid>

CSS:

<style type="text/css">
  .RightBorderStyle
  {
   border-right: 1px solid red !important;
  }
</style>

Thanks,
Princy

[Sadaf]

My grid is nested in another big grid though..Will it matter. This grid is a user control...?

[Princy]

Hi Sadi,

Unfortunately i couldn't replicate your scenario.I tried setting the radgrid inside the nested view of another, as a usercontrol,and still I'm able to get the CSS style.Below is the full code snippet i tried,and the screen shot of the output.If this doesn't help,can you please provide your full code.

ASPX:

<%@ Register Src="WebUserControl.ascx" TagName="WebUser" TagPrefix="WebUserControl" %>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                </telerik:AjaxUpdatedControl>
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
</telerik:RadAjaxLoadingPanel>
<telerik:RadGrid ID="RadGrid2"  runat="server" AutoGenerateColumns="False"
    AllowSorting="True" AllowPaging="True" PageSize="5">
    <MasterTableView DataKeyNames="CustomerID">
        <Columns>
          . . . . . . . . . . . .
        </Columns>
        <NestedViewSettings >
            <ParentTableRelation>
                <telerik:GridRelationFields DetailKeyField="CustomerID" MasterKeyField="CustomerID" />
            </ParentTableRelation>
        </NestedViewSettings>
        <NestedViewTemplate>
            <asp:Panel ID="Panel1" runat="server">
            <WebUserControl:WebUser id="WebUserControl1" runat="server"></WebUserControl:WebUser>
            </asp:Panel>
        </NestedViewTemplate>
    </MasterTableView>
</telerik:RadGrid>

CSS:

<style type="text/css">
 .RightBorderStyle
 {
  border-right: 1px solid red !important;
 }
</style>

ASCX:

<telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="true" Skin="Metro" DataSourceID="SqlDataSource1"

    AllowPaging="true" PageSize="30" AutoGenerateColumns="false">

    <ClientSettings >

        <Scrolling AllowScroll="true" UseStaticHeaders="true"></Scrolling>       


    </ClientSettings>

    <GroupingSettings ShowUnGroupButton="true"></GroupingSettings>

    <MasterTableView EnableHeaderContextMenu="true">

        <ColumnGroups>         

            <telerik:GridColumnGroup HeaderText="Location" Name="Location" HeaderStyle-CssClass="RightBorderStyle">

            </telerik:GridColumnGroup>

          . . . . . . . . . . . . .

        

        <Columns>

         . . . . . . . . . . . . .

        </Columns>

    </MasterTableView>

</telerik:RadGrid>

Thanks,
Princy

[Sadaf]

This problem is solved by upgrading assemblies: Version 2012.2.607.40 ->2013.1.417.40
But I have this another issue which only happens once deployed to the server. You already have the code..? Its the missing right border..Any ideas on that..?

[Princy]

Hi Sadi,

I see that, from your screenshot you have set the right border for all column headers.If you want to set it for all headers,please try the following CSS for skin=Metro.

CSS:

<style type="text/css">
 .RadGrid_Metro .rgMultiHeaderRow th.rgHeader, .RadGrid_Metro .rgMultiHeaderRow th.rgResizeCol
  {
    border-right: 1px solid red !important;
  }
</style>

Please find the attached screenshot.Hope this helps.Let me know if any concern.

Thanks,
Princy

[Joseph]

I need some guidance in this area too.

Here's my RadGrid:

<telerik:RadGrid ID="RadGrid1" runat="server" CellSpacing="-1" DataSourceID="SqlDataSource1" GridLines="Both" Skin="Default">
    <MasterTableView DataKeyNames="UserName_PK" DataSourceID="SqlDataSource1" AutoGenerateColumns="False">
        <Columns>
            <telerik:GridBoundColumn DataField="UserName_PK" ReadOnly="True" HeaderText="Username" SortExpression="UserName_PK" UniqueName="UserName_PK" FilterControlAltText="Filter UserName_PK column"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" UniqueName="FirstName" FilterControlAltText="Filter FirstName column"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="LastName" HeaderText="Last Name" SortExpression="LastName" UniqueName="LastName" FilterControlAltText="Filter LastName column"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="FirmName" HeaderText="Company Name" SortExpression="FirmName" UniqueName="FirmName" FilterControlAltText="Filter FirmName column"></telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings>
        <Resizing AllowColumnResize="true" ResizeGridOnColumnResize="true" AllowResizeToFit="true" />
    </ClientSettings>
</telerik:RadGrid>

 

All I want is to make the background of the header row be blue.

I've tried this:

div.RadGrid_[Default] th.rgHeader, th.rgResizeCol {
    background-color: blue !important;
}

 

And it didn't work.

Help, please.

[Peter Milchev]

Hello Joseph,

The reason behind the not applied background color is the background image that is set by default. Once the background-image is removed, the custom color is applied properly.

div.RadGrid_Default th.rgHeader,
div.RadGrid_Default th.rgResizeCol {
    background-color: blue;
    background-image: none;
}

For further customization, you can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post explaining how to inspect the generated HTML and check the applied styles for various elements. 

Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;

Regards,
Peter Milchev
Progress Telerik

[Joseph]

Tried your suggestion. It did not work.

I should note that I am doing this in a "Telerik C# Web Forms --> Responsive" Visual Studio project. I am adding CSS to the scaffolded "Default.css" file. I am also utilizing Javascript to resize the width of the grid to fit.

The whole page is this:

<%@ Page Title="custodias® Misc Bookkeeper Functions" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="MiscBookFunc.aspx.cs" Inherits="cusFM.misc.MiscBookFunc" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="../styles/default.css" rel="stylesheet" />
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <h1>Misc Bookkeeper Functions</h1>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function pageLoad() {
                var grid = $find("<%= RadGrid1.ClientID %>");
                var columns = grid.get_masterTableView().get_columns();
                for (var i = 0; i < columns.length; i++) {
                    columns[i].resizeToFit();
                }
            }
        </script>
    </telerik:RadCodeBlock>

    <telerik:RadGrid ID="RadGrid1" runat="server" CellSpacing="-1" DataSourceID="SqlDataSource1" GridLines="Both">
        <MasterTableView DataKeyNames="UserName_PK" DataSourceID="SqlDataSource1" AutoGenerateColumns="False">
            <Columns>
                <telerik:GridBoundColumn DataField="UserName_PK" ReadOnly="True" HeaderText="Username" SortExpression="UserName_PK" UniqueName="UserName_PK" FilterControlAltText="Filter UserName_PK column"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" UniqueName="FirstName" FilterControlAltText="Filter FirstName column"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="LastName" HeaderText="Last Name" SortExpression="LastName" UniqueName="LastName" FilterControlAltText="Filter LastName column"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="FirmName" HeaderText="Company Name" SortExpression="FirmName" UniqueName="FirmName" FilterControlAltText="Filter FirmName column"></telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings>
            <Resizing AllowColumnResize="true" ResizeGridOnColumnResize="true" AllowResizeToFit="true" />
        </ClientSettings>
    </telerik:RadGrid>

    <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString='<%$ ConnectionStrings:CSS_DevConnectionString %>' SelectCommand="SELECT [UserName_PK], [FirstName], [LastName], [FirmName] FROM [CSSUpdateExt].[vw_ActiveServicesUsers_Firm]"></asp:SqlDataSource>

</asp:Content>

 

I don't see anything else that could be over-writing this.

[Peter Milchev]

Hello Joseph,

I have tested the same project and it worked when the _Default was removed. Generally, the controls have at least two CSS classes added to the wrapper element -> .Rad<ControlName> and .Rad<ControlName>_<SkinName>. With that said, the style that I have provided targets only the Default skin of the RadGrid. If you would like to apply it to RadGrid with any skin, you can use the following style:

div.RadGrid th.rgHeader,
div.RadGrid th.rgResizeCol {
    background-color: blue;
    background-image: none;
}

Attached is a fully runnable project created from the Responsive template. If the issues persist, modify the attached project and send it back to us in an official support ticket, excluding the bin, obj and lib folders. That would allow us to inspect your exact scenario and help you more efficiently.

Regards,
Peter Milchev
Progress Telerik