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

Remove rounded corners from column headers

2 Answers 301 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kurt Kluth
Top achievements
Rank 1
Kurt Kluth asked on 28 Jun 2017, 08:46 PM

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 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 04 Jul 2017, 08:02 AM
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.
0
Kurt Kluth
Top achievements
Rank 1
answered on 05 Jul 2017, 06:20 PM

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>

 

Tags
Grid
Asked by
Kurt Kluth
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Kurt Kluth
Top achievements
Rank 1
Share this question
or