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

left-side only border with ItemStyle?

6 Answers 207 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Scott
Top achievements
Rank 1
Scott asked on 28 Jun 2013, 08:28 PM
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!

6 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 01 Jul 2013, 09:33 AM
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
0
Scott
Top achievements
Rank 1
answered on 03 Jul 2013, 02:59 PM
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;
0
Accepted
Princy
Top achievements
Rank 1
answered on 08 Jul 2013, 10:36 AM
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
0
Scott
Top achievements
Rank 1
answered on 09 Jul 2013, 09:07 PM
Thank you, that worked. Although I first tried it without the "!important" designant & that failed.
0
Avi
Top achievements
Rank 1
answered on 25 Nov 2013, 05:54 PM
Thanks Princy.

I had tried what not to do that, otherwise.
0
subbulaxmi
Top achievements
Rank 1
answered on 28 Oct 2015, 05:55 PM

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

Tags
Grid
Asked by
Scott
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Scott
Top achievements
Rank 1
Avi
Top achievements
Rank 1
subbulaxmi
Top achievements
Rank 1
Share this question
or