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

Override Radgrid Header

15 Answers 989 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sadaf
Top achievements
Rank 1
Sadaf asked on 06 May 2013, 01:25 PM
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.

15 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 07 May 2013, 04:15 AM
Hi,

Please try the following CSS.

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

Thanks,
Princy.
0
Sadaf
Top achievements
Rank 1
answered on 07 May 2013, 06:12 PM
Great. Thanks!
0
Sadaf
Top achievements
Rank 1
answered on 19 Jul 2013, 08:33 PM
Now I want to change the color of the border of "Total drafts issued". I only want to do right border...?
0
Princy
Top achievements
Rank 2
answered on 22 Jul 2013, 05:33 AM
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
0
Sadaf
Top achievements
Rank 1
answered on 22 Jul 2013, 01:05 PM
It does not work...?
0
Sadaf
Top achievements
Rank 1
answered on 22 Jul 2013, 03:20 PM
It is the 'As of..' date cell part of the header I am referring too...attaching the screen shot..Any ideas..?
0
Princy
Top achievements
Rank 2
answered on 23 Jul 2013, 04:03 AM
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
0
Sadaf
Top achievements
Rank 1
answered on 23 Jul 2013, 03:34 PM
My grid is nested in another big grid though..Will it matter. This grid is a user control...?
0
Princy
Top achievements
Rank 2
answered on 24 Jul 2013, 05:11 AM
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
0
Sadaf
Top achievements
Rank 1
answered on 24 Jul 2013, 01:47 PM
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..?
0
Accepted
Princy
Top achievements
Rank 2
answered on 25 Jul 2013, 03:23 AM
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
0
Joseph
Top achievements
Rank 1
answered on 30 Oct 2019, 01:14 PM

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.

0
Peter Milchev
Telerik team
answered on 04 Nov 2019, 10:32 AM

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: 

Regards,
Peter Milchev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Joseph
Top achievements
Rank 1
answered on 11 Nov 2019, 09:20 PM

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.

0
Peter Milchev
Telerik team
answered on 14 Nov 2019, 12:58 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Sadaf
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Sadaf
Top achievements
Rank 1
Joseph
Top achievements
Rank 1
Peter Milchev
Telerik team
Share this question
or