Override Radgrid Header

16 posts, 1 answers
  1. Sadaf
    Sadaf avatar
    15 posts
    Member since:
    May 2009

    Posted 06 May 2013 Link to this post

    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.

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 06 May 2013 Link to this post

    Hi,

    Please try the following CSS.

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

    Thanks,
    Princy.
  3. Sadaf
    Sadaf avatar
    15 posts
    Member since:
    May 2009

    Posted 07 May 2013 Link to this post

    Great. Thanks!
  4. Sadaf
    Sadaf avatar
    15 posts
    Member since:
    May 2009

    Posted 19 Jul 2013 Link to this post

    Now I want to change the color of the border of "Total drafts issued". I only want to do right border...?
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 22 Jul 2013 Link to this post

    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
  6. Sadaf
    Sadaf avatar
    15 posts
    Member since:
    May 2009

    Posted 22 Jul 2013 Link to this post

    It does not work...?
  7. Sadaf
    Sadaf avatar
    15 posts
    Member since:
    May 2009

    Posted 22 Jul 2013 Link to this post

    It is the 'As of..' date cell part of the header I am referring too...attaching the screen shot..Any ideas..?
  8. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 22 Jul 2013 Link to this post

    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
  9. Sadaf
    Sadaf avatar
    15 posts
    Member since:
    May 2009

    Posted 23 Jul 2013 Link to this post

    My grid is nested in another big grid though..Will it matter. This grid is a user control...?
  10. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 24 Jul 2013 Link to this post

    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
  11. Sadaf
    Sadaf avatar
    15 posts
    Member since:
    May 2009

    Posted 24 Jul 2013 Link to this post

    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..?
  12. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 24 Jul 2013 Link to this post

    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
  13. Joseph
    Joseph avatar
    3 posts
    Member since:
    Aug 2017

    Posted 30 Oct Link to this post

    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.

  14. Peter Milchev
    Admin
    Peter Milchev avatar
    613 posts

    Posted 04 Nov Link to this post

    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.
  15. Joseph
    Joseph avatar
    3 posts
    Member since:
    Aug 2017

    Posted 11 Nov in reply to Peter Milchev Link to this post

    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.

  16. Peter Milchev
    Admin
    Peter Milchev avatar
    613 posts

    Posted 14 Nov Link to this post

    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.
Back to Top