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

How to remove a specific column header border?

1 Answer 673 Views
Grid
This is a migrated thread and some comments may be shown as answers.
shemein
Top achievements
Rank 1
shemein asked on 11 Dec 2014, 09:30 PM
I have tried the css as always to give some borders to my grid columns and removed the last columns right borders because I didn't need them. I have tried to use the css class='rgHeader  LeftBorder' in HeaderStyle tag of those coulmns but it doesn't remove the header border. Please help me as soon as possible. My codes are:
div.RadGridCustomClass .rgHeader,
div.RadGridCustomClass th.rgResizeCol,
div.RadGridCustomClass .rgFooter td,
div.RadGridCustomClass .rgFilterRow td {
border-left: 1px solid #f0f0f0 !important;
border-right: 1px solid #f0f0f0 !important;
}

div.RadGridCustomClass .rgMasterTable{
font-family: Calibri !important;
font-size: 11pt;
}
div.RadGridCustomClass .rgMasterTable .rgHeader{
font-family: Calibri !important;
font-size: 11pt;
font-weight: bold;
}
div.RadGridCustomClass .rgAltRow td {
border-bottom: 0px !important;
}
div.RadGridCustomClass .rgMasterTable,
div.RadGridCustomClass {
border: 0px !important;
}
div.RadGridCustomClass .rgMasterTable td {
border-right: 1px solid #f0f0f0 !important;
}


div.RadGridCustomClass .rgMasterTable:last-child,
div.RadGridCustomClass td:last-child {
border: 0px !important;
}
div.RadGridCustomClass th.LeftBorder,
div.RadGridCustomClass .rgRow td.LeftBorder,
div.RadGridCustomClass .rgAltRow td.LeftBorder,
div.RadGridCustomClass .rgEditRow td.LeftBorder
{

border-right-width:0px !important;
}
<telerik:RadGrid ID="ToolkitSections" runat="server" AutoGenerateColumns="False" OnNeedDataSource="ToolkitSectionsNeedDataSource" OnItemDataBound="ToolkitSections_ItemDataBound" OnUpdateCommand="ToolkitSections_UpdateCommand" CellSpacing="-1" OnItemCreated="ToolkitSections_ItemCreated" AllowSorting="True" CssClass="RadGridCustomClass" Font-Names="Calibri" EnableViewState="False" OnPreRender="ToolkitSections_PreRender" Width="90%">
                                                <MasterTableView DataKeyNames="ToolkitSectionID,Progress,SectionDenied,Status,Restricted" EditMode="InPlace" ClientDataKeyNames="ToolkitSectionID" >
                                                    <RowIndicatorColumn Visible="False">
                                                    </RowIndicatorColumn>                                                    <ExpandCollapseColumn Created="True">
                                                    </ExpandCollapseColumn>                                                    <Columns>
                                                        <telerik:GridHyperLinkColumn AllowFiltering="False" DataNavigateUrlFields="SectionUrl" DataTextField="SectionName" FilterControlAltText="Filter SectionUrl column" Groupable="False" HeaderText="Section" Reorderable="False" Resizable="False" SortExpression="Section Name" UniqueName="SectionUrl">
                                                        <HeaderStyle ForeColor="white" CssClass="headerfont"></HeaderStyle>
                                                        </telerik:GridHyperLinkColumn>
                                                        <telerik:GridDateTimeColumn AllowFiltering="False" DataField="LastModified" DataFormatString="{0:MM/dd/yyyy}" FilterControlAltText="Filter Last Modified column" Groupable="False" HeaderText="Modified" Reorderable="False" Resizable="False" UniqueName="LastModified" ReadOnly="True">
                                                            <ColumnValidationSettings>
                                                                <ModelErrorMessage Text="" />
                                                            </ColumnValidationSettings>
                                                             <HeaderStyle ForeColor="white" CssClass="RightBorder"></HeaderStyle>
                                                        </telerik:GridDateTimeColumn>
                                                       
                                                             
                                                        <telerik:GridCheckBoxColumn AllowFiltering="False" DataField="Complete" DataType="System.Boolean" FilterControlAltText="Filter Complete column" Groupable="False" HeaderText="Complete" Reorderable="False" Resizable="False" UniqueName="Complete" ReadOnly="True">
                                                         <HeaderStyle ForeColor="white" ></HeaderStyle>
                                                        </telerik:GridCheckBoxColumn>                                                        <telerik:GridTemplateColumn UniqueName="Restricted" HeaderText="Restrict" FilterControlAltText="Filter Restricted column" Reorderable="False" Resizable="False" ShowSortIcon="False">
                                                            <ItemTemplate>
                                                                <div>
                                                                    <div style="float: left">
                                                                        <asp:CheckBox ID="cbRistrict" runat="server" AutoPostBack="true" OnCheckedChanged="cbRistrict_OnCheckedChanged" onclientclick="this.checked=true;"></asp:CheckBox>
                                                                    </div>
                                                                    <div style="float: left">
                                                                        <asp:LinkButton ID="RestrictLinkButton" runat="server" BorderWidth="0"><img  style="text-decoration:none;border:0px;" src="~/Images/Lock-Restricted.png" runat="server"/></asp:LinkButton>
                                                                    </div>
                                                                </div>
                                                            </ItemTemplate>
                                                             <HeaderStyle ForeColor="white" ></HeaderStyle>                                                        </telerik:GridTemplateColumn>                                                        <telerik:GridDateTimeColumn AllowFiltering="False" DataField="SectionDueDate" DataFormatString="{0:MM/dd/yyyy}"  FilterControlAltText="Filter Section Due Date column" Groupable="False" HeaderText="Section Due Date" Reorderable="False" Resizable="False" UniqueName="SectionDueDate">
                                                           <HeaderStyle Width="120px" HorizontalAlign="Right" CssClass="rgHeader LeftBorder"></HeaderStyle>
                                                             <ItemStyle Width="80" HorizontalAlign="Center" CssClass="LeftBorder"></ItemStyle>
                                                            <ColumnValidationSettings>
                                                                <ModelErrorMessage Text="" />                                                            </ColumnValidationSettings>
                                                             <HeaderStyle ForeColor="white"></HeaderStyle>
                                                        </telerik:GridDateTimeColumn>
                                                        <telerik:GridEditCommandColumn ButtonType="ImageButton" EditImageUrl="~/Images/date-icon.png" UniqueName="EditCommandColumn" ItemStyle-HorizontalAlign="Left" Reorderable="False" Resizable="False" ShowFilterIcon="False" ShowSortIcon="False">
                                                             <HeaderStyle ForeColor="white"  Width="10px" CssClass="rgHeader LeftBorder"></HeaderStyle>
                                                            <ItemStyle HorizontalAlign="Left" CssClass="LeftBorder" />                                                        </telerik:GridEditCommandColumn>                                                        <telerik:GridBoundColumn AllowFiltering="False" AllowSorting="False" DataField="ToolkitSectionID" Groupable="False" HeaderText="ToolkitSection ID" Reorderable="False" Resizable="False" ShowSortIcon="False" UniqueName="ToolkitSectionID" ReadOnly="true" Display="False">
                                                            <ColumnValidationSettings>
                                                                <ModelErrorMessage Text="" />
                                                            </ColumnValidationSettings>
                                                             <HeaderStyle ForeColor="white" ></HeaderStyle>
                                                        </telerik:GridBoundColumn>
                                                        <telerik:GridBoundColumn AllowFiltering="False" AllowSorting="False" DataField="Progress" FilterControlAltText="Filter Progress column" Groupable="False" HeaderText="Progress" Reorderable="False" Resizable="False" UniqueName="Progress" ReadOnly="True" DataType="System.Int16" Display="False" ShowSortIcon="False">
                                                            <ColumnValidationSettings>
                                                                <ModelErrorMessage Text="" />
                                                            </ColumnValidationSettings>
                                                             <HeaderStyle ForeColor="white" ></HeaderStyle>
                                                        </telerik:GridBoundColumn>                                                        <telerik:GridBoundColumn AllowFiltering="False" AllowSorting="False" DataField="SectionDenied" Display="False" FilterControlAltText="Filter Section Denied column" Groupable="False" HeaderText="Section Denied" ReadOnly="True" Reorderable="False" Resizable="False" ShowSortIcon="False" UniqueName="SectionDenied">
                                                            <ColumnValidationSettings>
                                                                <ModelErrorMessage Text="" />
                                                            </ColumnValidationSettings>
                                                             <HeaderStyle ForeColor="white" ></HeaderStyle>
                                                        </telerik:GridBoundColumn>
                                                        <telerik:GridBoundColumn AllowFiltering="False" AllowSorting="False" DataField="AnybodyDenied" Display="False" FilterControlAltText="Filter Section Denied column" Groupable="False" HeaderText="Section Denied" ReadOnly="True" Reorderable="False" Resizable="False" ShowSortIcon="False" UniqueName="AnybodyDenied">
                                                            <ColumnValidationSettings>
                                                                <ModelErrorMessage Text="" />
                                                            </ColumnValidationSettings>
                                                             <HeaderStyle ForeColor="white" CssClass="headerfont"></HeaderStyle>
                                                        </telerik:GridBoundColumn>
                                                        <telerik:GridBoundColumn AllowFiltering="False" AllowSorting="False" DataField="Status" Display="False" FilterControlAltText="Filter Status Column" Groupable="False" HeaderText="Status" ReadOnly="True" Reorderable="False" Resizable="False" ShowSortIcon="False" UniqueName="Status">
                                                            <ColumnValidationSettings>
                                                                <ModelErrorMessage Text="" />
                                                            </ColumnValidationSettings>
                                                             <HeaderStyle ForeColor="white" ></HeaderStyle>
                                                        </telerik:GridBoundColumn>                                                    </Columns>                                                    <EditFormSettings>
                                                        <EditColumn UniqueName="EditCommandColumn" ButtonType="ImageButton" CancelImageUrl="~/RadControls/Grid/Skins/Default/Cancel.gif" UpdateImageUrl="~/RadControls/Grid/Skins/Default/Update.gif">
                                                        </EditColumn>
                                                    </EditFormSettings>
                                                </MasterTableView>
                                            </telerik:RadGrid>

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 16 Dec 2014, 12:40 PM
Hello Shemein,

The problems that you are facing are due to the fact that you are using !important within different selectors and in order to override the previously set styles you will need to have a selector with higher priority.

You can apply your LeftBorder styles by either removing the !important from your first selector or by using the following selector for the headers:
div.RadGridCustomClass .rgHeader.LeftBorder {
    border-right-width: 0px !important;
}

Hope this helps.


Regards,
Konstantin Dikov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
shemein
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or