left-side only border with ItemStyle?

[Scott]

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!

[Princy]

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

[Scott]

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;

[Princy]

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

[Scott]

Thank you, that worked. Although I first tried it without the "!important" designant & that failed.

[Avi]

Thanks Princy.

I had tried what not to do that, otherwise.

[subbulaxmi]

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