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>
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>