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

Merged Columns border

1 Answer 60 Views
Grid
This is a migrated thread and some comments may be shown as answers.
shemein
Top achievements
Rank 1
shemein asked on 26 Nov 2014, 02:43 PM
I have merged the action columns together by using GridColumnGroup. Now I want my radgrid to have the vertical borders by using css class like this :

div.RadGridCustomClass .rgMasterTable td {
border-right: 1px solid #f0f0f0 !important;
}

My problem is when I use this Css to have vertical line in my grid it will be included the merged columns too and I do NOT want the merged column to have the vertical border. Would you please help me to remove just the merged columns border?
My code for merged border is this:

<%--Actions Columns --%>

<telerik:GridEditCommandColumn ButtonType="ImageButton" ColumnGroupName="Actions" HeaderStyle-CssClass="header" UniqueName="EditCommandColumn" EditImageUrl="~\Images\HomePage\Toolkit-Actions-Calendar.jpg" ItemStyle-CssClass="MergedBorder" EditText="Edit Dates">
<HeaderStyle CssClass="header" />
<ItemStyle HorizontalAlign="Center" Width="15" />
</telerik:GridEditCommandColumn>

<telerik:GridButtonColumn ButtonType="ImageButton" ColumnGroupName="Actions" HeaderStyle-CssClass="header" ImageUrl="~\Images\HomePage\Toolkit-Actions-Users.jpg" UniqueName="ManageUserColumn" CommandName="ManageUsers" ItemStyle-CssClass="MergedBorder" Text="Manage Users">
<HeaderStyle CssClass="header" />
<ItemStyle HorizontalAlign="Center" Width="5" />
</telerik:GridButtonColumn>


<telerik:GridButtonColumn ButtonType="ImageButton" ColumnGroupName="Actions" HeaderStyle-CssClass="header" ImageUrl="~\Images\HomePage\Toolkit-Actions-Distribute.jpg" UniqueName="DistributeColumn" CommandName="DistributeButtonColumn" ItemStyle-CssClass="MergedBorder" Text="Distribute Toolkit">
<HeaderStyle CssClass="header" />
<ItemStyle HorizontalAlign="Center" Width="5" />
</telerik:GridButtonColumn>

<telerik:GridTemplateColumn UniqueName="DeleteColumn" ColumnGroupName="Actions" AllowFiltering="False" ItemStyle-CssClass="MergedBorder">
<ItemTemplate>
<asp:ImageButton ID="DeleteImageButton" runat="server" AlternateText="Delete Toolkit" CommandName="Delete"
OnClientClick="javascript:if(!confirm('This action will delete the selected Toolkit. Are you sure?')){return false;}"
ImageUrl="~\Images\HomePage\Toolkit-Actions-Delete.jpg" ToolTip="Delete Toolkit" />
</ItemTemplate>
<HeaderStyle CssClass="header" />
<ItemStyle HorizontalAlign="Center" Width="5" />
</telerik:GridTemplateColumn>

</Columns>
<ColumnGroups>
<telerik:GridColumnGroup HeaderStyle-HorizontalAlign="Center" HeaderText="Actions" Name="Actions">
<HeaderStyle HorizontalAlign="Center" CssClass="gridheaderlight" ForeColor="white" />

</telerik:GridColumnGroup>
</ColumnGroups>
<EditFormSettings>
<EditColumn UniqueName="EditCommandColumn" ButtonType="ImageButton" CancelImageUrl="~/RadControls/Grid/Skins/Default/Cancel.gif" UpdateImageUrl="~/RadControls/Grid/Skins/Default/Update.gif">
</EditColumn>

<EditColumn FilterControlAltText="Filter EditCommandColumn1 column" UniqueName="EditCommandColumn1">
</EditColumn>
</EditFormSettings>

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 28 Nov 2014, 09:45 AM
Hi Shemein,

You could use the CSS class that you are setting for the ItemStyle of your columns and override the border style that you are setting with your other selector:
<style type="text/css">
    div.RadGridCustomClass .rgMasterTable td {
        border-right: 1px solid #f0f0f0 !important;
    }
 
    div.RadGrid .rgMasterTable .MergedBorder {
        border-right: none!important;
    }
</style>

The only thing that you should have in mind is the CSS specificity of the selectors.

Hope this helps.


Best 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