Showing Border for Radgrid Columns

[kachy]

Hi,

I want to show borders between the radgrid columns. By default it does not show up, what property can I use to show the borders between columns?

For most of the demo examples, column border shows up but I don't see any specific property in the code of those pages.
Few examples I was looking at are:
http://demos.telerik.com/aspnet-ajax/grid/examples/client/clientsideapi/defaultcs.aspx
http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandinput/defaultcs.aspx?product=grid

Thanks.

[Princy]

Hello,

You can try out the following css setting to display borders for columns:
aspx:

<telerik:RadGrid ID="RadGrid1" CssClass="RadGridCustomClass"
runat="server" DataSourceID="Sqldatasource1">
  ....

css:

div.RadGridCustomClass  .rgHeader,
div.RadGridCustomClass  th.rgResizeCol,
div.RadGridCustomClass  .rgRow  td,
div.RadGridCustomClass  .rgAltRow  td,
div.RadGridCustomClass  .rgFooter  td
{
     border-left:1px solid #828282 !important;
     border-right:1px solid #828282 !important;
}

Thanks
Princy.

[kachy]

Princy,

This CSS class is working, if I remove the skin (WebBlue) I am using for Radgrid. Can I use this CSS class along with the skin? Can you please provide me some link where I can read how to customize the existing skin for these small-2 changes?

Thanks.

[Martin]

Hello,

You don't need to remove the skin declaration in case to use the CSS class. Actually the CSS class overrides the default CSS rules used by the relevant skin. The attached project demonstrates this.
For more information about customizing skins please click here.

Best wishes,
Martin
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[kachy]

Thank for your reply.

I tried this project in my local sysytem but it did not show the borders. Only change I had to do was to connect to my SQL server 2008 and show some other table as I could not connect to the default connection string specified in the project. I am using ASP.NET AJAX version of Telerik.

Below is the source code of Default.aspx..

<%

@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<%

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

 

<!

 

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<

 

html xmlns="http://www.w3.org/1999/xhtml">

 

<

 

head runat="server">

 

 

<title></title>

 

 

<style type="text/css">

 

 

div.RadGridCustomClass .rgHeader, div.RadGridCustomClass th.rgResizeCol, div.RadGridCustomClass .rgRow td, div.RadGridCustomClass .rgAltRow td, div.RadGridCustomClass .rgFooter td

 

{

 

border-left: 1px solid #828282 !important;

 

 

border-right: 1px solid #828282 !important;

 

}

 

</style>

 

</

 

head>

 

<

 

body>

 

 

<form id="form1" runat="server">

 

 

<div>

 

 

<asp:ScriptManager ID="ScriptManager1" runat="server">

 

 

</asp:ScriptManager>

 

 

<telerik:RadGrid ID="grdUser" runat="server" CssClass="RadGridCustomClass" Skin="WebBlue"

 

 

DataSourceID="dsUserGrid" Width="750px" GridLines="None">

 

<

 

HeaderContextMenu Skin="WebBlue">

 

<

 

CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>

 

</

 

HeaderContextMenu>

 

 

<MasterTableView Width="750px" AutoGenerateColumns="True" DataKeyNames="AccountGUID">

 

 

</MasterTableView>

 

<

 

FilterMenu Skin="WebBlue">

 

<

 

CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>

 

</

 

FilterMenu>

 

 

</telerik:RadGrid>

 

 

<asp:SqlDataSource ID="dsUserGrid" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"

 

 

SelectCommand="SELECT * FROM Account"></asp:SqlDataSource>

 

 

</div>

 

 

</form>

 

</

 

body>

 

</

 

html>

 

[Martin]

Hello,

I tried your code and it runs as expected on my end. You can see the result on the attached screenshot.
For your convenience I have also updated the sample project. Note that the data base resides in the App_Data folder so you do not need to change the connection string.

We will be grateful if you provide us with feedback concerning the evaluation of our controls since i see that your subscription has expired.

Best Regards,
Martin
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[kachy]

I downloaded this sample, it did not show the border for the grid. I am using RadControls for ASPNET AJAX Q3 2008. My company has already bought the product and its live. I am using my old telerik account.
 
Thanks

[Martin]

Hello,

I modified the sample project using the Q3 2008 version of RadControls for ASP.NET AJAX
The CSS classes were also modified respectively. Please run the project and let us know if it works for you.

Regards,
Martin
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[AereoN]

I noticed that there is a small gap in the border between rows using this solution.
This gap only appears when the border is 1px but if the border is thicker, it is not viewable anymore.
How do I get rid of it if I'm using 1px border?
I uploaded an image regarding the area.

http://img21.imageshack.us/img21/8179/140694gridwithborders.jpg

Thanks.

[kachy]

 

<style type="text/css">

 

 

.RadGrid_WebBlue td,

 

 

.RadGrid_WebBlue th

 

{

 

border-collapse :collapse;

 

 

border-left: 1px solid #e9e9e9 !important;

 

}

 

</style>

Yes, there is a gap and
I used the lighter color for border for gaps to look almost invisible and I also used only one side border.

Thanks.

 

[Martin]

Hello Guys,

Please try the following CSS rules in your projects:

<style type="text/css">
        .RadGrid_WebBlue td, .RadGrid_WebBlue th
        {
            border-left: solid 1px black !important;
            border-right: solid 1px black !important;
            padding-left:7px !important;
            padding-right:7px !important;
            border-bottom: none !important;
        }
        .RadGrid_WebBlue
        {
            border-left: solid 1px black !important;
            border-right: solid 1px black !important;
        }
        .RadGrid_WebBlue .rgSelectedRow td
        {
            border-bottom:solid 1px black !important;
            padding-bottom: 2px !important;
        }
    </style>

Just to remind that the "WebBlue" text should be replaced with the name of the current skin.

I hope this helps

Regards,
Martin
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Shakir]

Hi Princy,

I need to show border on 

In the hyperlink column border is not displayed  i need to change the border through style so that it apply to my entire project , please help me out

 

 

 

 

 

[Shakir]

 <telerikGrid:GridViewDataColumn Header="Number" UniqueName="o"  DataMemberBinding="{Binding }" >
                            <telerikGrid:GridViewDataColumn.CellStyle>
                                <Style TargetType="{x:Type telerikGrid1:GridViewCell}">
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="{x:Type telerikGrid1:GridViewCell}">
                                                <control:SingleClickButton   
                                                    Style="{StaticResource HyperLinkButton}"
                                                    ClickMode="Release"
                                                    HorizontalAlignment="Center"   
                                                    VerticalAlignment="Center"
                                                        Click="OpenQuestionManagerSpSalesNotHeld"
                                                    Content="{Binding LoanNumber}"
                                                    Tag="{Binding LoanId}"
                                                    DataContext="{Binding}">
                                                    <Button.Template>
                                                        <ControlTemplate TargetType="Button">
                                                            <TextBlock TextDecorations="Underline">
                                                                <ContentPresenter />
                                                            </TextBlock>
                                                        </ControlTemplate>
                                                    </Button.Template>
                                                </control:SingleClickButton>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </telerikGrid:GridViewDataColumn.CellStyle>
                        </telerikGrid:GridViewDataColumn>