Showing Border for Radgrid Columns

13 posts, 1 answers
  1. kachy
    kachy avatar
    90 posts
    Member since:
    Aug 2005

    Posted 18 Jul 2009 Link to this post

    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.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 20 Jul 2009 Link to this post

    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.
  3. kachy
    kachy avatar
    90 posts
    Member since:
    Aug 2005

    Posted 20 Jul 2009 Link to this post

    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.
  4. Martin
    Admin
    Martin avatar
    823 posts

    Posted 21 Jul 2009 Link to this post

    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.
  5. kachy
    kachy avatar
    90 posts
    Member since:
    Aug 2005

    Posted 21 Jul 2009 Link to this post

    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>

     

  6. Martin
    Admin
    Martin avatar
    823 posts

    Posted 23 Jul 2009 Link to this post

    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.
  7. kachy
    kachy avatar
    90 posts
    Member since:
    Aug 2005

    Posted 23 Jul 2009 Link to this post

    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
  8. Answer
    Martin
    Admin
    Martin avatar
    823 posts

    Posted 24 Jul 2009 Link to this post

    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.
  9. AereoN
    AereoN avatar
    36 posts
    Member since:
    Oct 2009

    Posted 04 Nov 2009 Link to this post

    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.
  10. kachy
    kachy avatar
    90 posts
    Member since:
    Aug 2005

    Posted 05 Nov 2009 Link to this post

     

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

     

  11. Martin
    Admin
    Martin avatar
    823 posts

    Posted 10 Nov 2009 Link to this post

    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.
  12. Shakir
    Shakir avatar
    2 posts
    Member since:
    May 2017

    Posted 10 Nov in reply to Princy Link to this post

    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

     

     

     

     

     

  13. Shakir
    Shakir avatar
    2 posts
    Member since:
    May 2017

    Posted 10 Nov in reply to Shakir Link to this post

     <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>
Back to Top