left-side only border with ItemStyle?

7 posts, 1 answers
  1. Scott
    Scott avatar
    35 posts
    Member since:
    Sep 2012

    Posted 28 Jun 2013 Link to this post

    I have a grid with custom column groupings generated on the server side, and for each new grouping I would like to have the left-side only border visible.  My first attempt is to set the ItemStyle (BorderColor, BorderWidth) for the first column created for each grouping, but that results in the attached image.  My attempts to read the on-line tutorials all require Skins, etc. which I find confusing.  Before I spend hours trying to figure out Skins, is there some simple way to declare in the server code an ItemStyle.BorderStyle that will give me just the LEFT side border for a column? thanks!
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 01 Jul 2013 Link to this post

    Hi Scott,

    To set the border only on left,apply using a CSS class in the ItemStyle for the BoundColumn for which you want to set the style.Try the following code snippet.

    ASPX:
    <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" >
                <GroupingSettings RetainGroupFootersVisibility="false" />
                <MasterTableView ShowFooter="true">
                    <GroupByExpressions>
                        <telerik:GridGroupByExpression>
                            <GroupByFields>
                                <telerik:GridGroupByField FieldName="CustomerID" />
                            </GroupByFields>
                            <SelectFields>
                                <telerik:GridGroupByField FieldName="CustomerID" />
                            </SelectFields>
                        </telerik:GridGroupByExpression>
                    </GroupByExpressions>
                    <Columns>
                        <telerik:GridBoundColumn DataField="CustomerID" HeaderText="A">
                            <ItemStyle CssClass="ItemStyle" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="CompanyName" HeaderText="B">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="City" HeaderText="C">
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings Scrolling-UseStaticHeaders="false" AllowColumnsReorder="true" AllowExpandCollapse="false">
                    <Selecting AllowRowSelect="false" />
                    <Resizing AllowRowResize="False" EnableRealTimeResize="True" ResizeGridOnColumnResize="True"
                        AllowColumnResize="True" />
                </ClientSettings>
    </telerik:RadGrid>

    CSS:
    <style type="text/css">
        .ItemStyle
        {
            border-color: Red !important;
            border-left-width: 2px !important;
            border-left-style: solid !important;
        }
    </style>

    Thanks,
    Princy
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Scott
    Scott avatar
    35 posts
    Member since:
    Sep 2012

    Posted 03 Jul 2013 Link to this post

    Princy, thank you for the sample code. It almost works for me. Unfortunately, I have to generate the columns dynamically  (because I'm doing variable-sized column groups), so in my C# code behind, I can almost do what you suggest, but unfortunately the ItemStyle class seems to have BorderWidth not BorderLeftWidth, and BorderStyle, not BorderLeftStyle. So, the code comes out like:

    // style the first column to show a left-side only border (still working on it)
    firstColumn.ItemStyle.BorderColor = System.Drawing.Color.Black;
    firstColumn.ItemStyle.BorderWidth = 1;
    firstColumn.ItemStyle.BorderStyle = BorderStyle.Solid;
  5. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 08 Jul 2013 Link to this post

    Hi Scott,

    You can access the CSS class from the code behind.It is easy to do Styling with CSS class. Please try the following code snippet.

    C#:
    //Dynamically created Column
    GridBoundColumn bound1 = new GridBoundColumn();
    Radgrid1.MasterTableView.Columns.Add(bound1);
    bound1.DataField = "CustomerID";
    bound1.HeaderText = "CustomerID";
    bound1.ItemStyle.CssClass = "ItemStyle"; //Accessing the CSS class from code behind

    CSS:
    <style type="text/css">
       .ItemStyle
      {
        border-color: Red !important;
        border-left-width: 2px !important;
        border-left-style: solid !important;          
        border-bottom-color:transparent !important;
      }
    </style>

    Thanks,
    Princy
  6. Scott
    Scott avatar
    35 posts
    Member since:
    Sep 2012

    Posted 09 Jul 2013 Link to this post

    Thank you, that worked. Although I first tried it without the "!important" designant & that failed.
  7. Avi
    Avi avatar
    1 posts
    Member since:
    Nov 2013

    Posted 25 Nov 2013 Link to this post

    Thanks Princy.

    I had tried what not to do that, otherwise.
  8. subbulaxmi
    subbulaxmi avatar
    4 posts
    Member since:
    Oct 2015

    Posted 28 Oct 2015 Link to this post

    Is the .ItemStyle supposed to be a part of the .radgrid in css ??

    .panel-grid .RadGrid .ItemStyle
    {   border-color: Black;
        border-left-width: 1px;
        border-left-style: solid;  
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-top-width: 1px;
        border-top-style: solid;         
        border-right-color:transparent;
    }

     

    I am trying to remove the right side border but this doesnt work

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017