Remove rounded corners from column headers

3 posts, 0 answers
  1. Kurt Kluth
    Kurt Kluth avatar
    167 posts
    Member since:
    Oct 2009

    Posted 28 Jun 2017 Link to this post

    We currently have rounded corners turned on for our grids however with that means rounding of the column headers.  We would like to turn that off.  How do we go about leaving the rounded corners on the grid but turn off for inner headers?  If we add a caption to the "MasterView" than we don't want the CommandItem to be rounded.

    Any suggestions?

  2. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 04 Jul 2017 Link to this post

    Hi,

    You can remove the rounded corners from grid header with the following CSS code:
    .RadGrid_SkinName
    {
        border-radius: 0px 0px 10px 10px;
        overflow: hidden;
    }

    In case your scenario is more complex and the code above is not working, send us a live URL where we can inspect the grid and advice you further.

    Regards,
    Pavlina
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Kurt Kluth
    Kurt Kluth avatar
    167 posts
    Member since:
    Oct 2009

    Posted 05 Jul 2017 in reply to Pavlina Link to this post

    Here is what solved the problem

        <style>
           .RadGrid table.rgMasterTable thead th:first-child.rgHeader
    {
        border-radius: 0px 0px 0px 0px !important;
        overflow: hidden;
    }
      
           .RadGrid table.rgMasterTable thead th:last-child.rgHeader {
            border-radius: 0px 0px 0px 0px !important;
            overflow: hidden;
           }
        </style>

     

Back to Top