[Solved] Styling a RadGrid

[Ali]

Hi.

I'm trying to style my RadGrid, but for some strange reason, only about half the styling is working correctly. Could you guys tell me what I'm doing wrong?

For the header of the grid, I want to make these changes:
Change the font color (works)
Change the background color (doesn't work)
Make the header text bold (doesn't work)
Change the color of the border around the header cells (doesn't work)

For the rows of the grid, I want to make these changes:
Change the background color of a cell based on its value (works)
Change the row background color (works)
Change the color and style of the border around the row cells (doesn't work)

Also, with this theme (MetroTouch), the grid only has a border (bottom, right and left, nothing on top) on every other row and it disappears on mouseover of that row. I want these lines to always be visible.

Private Sub rgProjects_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles rgProjects.ItemCreated
    If TypeOf e.Item Is GridHeaderItem Then
        Dim headerItem As GridHeaderItem = CType(e.Item, GridHeaderItem)

        headerItem.ForeColor = System.Drawing.Color.FromArgb(226, 233, 243)

        headerItem.BackColor = System.Drawing.Color.FromArgb(0, 82, 136)
        headerItem.Font.Bold = True
        headerItem.BorderColor = System.Drawing.Color.FromArgb(183, 198, 203)
    End If
End Sub

Private Sub rgProjects_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles rgProjects.ItemDataBound
    If TypeOf e.Item Is GridDataItem Then
        Dim dataItem As GridDataItem = CType(e.Item, GridDataItem)
        'dataItem.Font.Bold = True

        Dim myCell As TableCell = dataItem("DCounter")

        If myCell.Text.StartsWith("-") Then
            myCell.BackColor = System.Drawing.Color.Red
        End If

        If dataItem.ItemIndex Mod 2 = 0 Then
            dataItem.BackColor = System.Drawing.Color.FromArgb(226, 233, 243)
            dataItem.BorderColor = System.Drawing.Color.FromArgb(183, 198, 203)
            dataItem.BorderStyle = BorderStyle.Solid
        Else
            dataItem.BackColor = System.Drawing.Color.White
            dataItem.BorderColor = System.Drawing.Color.FromArgb(183, 198, 203)
            dataItem.BorderStyle = BorderStyle.Solid
        End If
    End If
End Sub

Any help would be greatly appreciated. :)

[Princy]

Hi Ali,

I tried to replicate your issue but i wasn't able to fully put it from server side,i have used CSS as well.Please check the below code snippet.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="true" DataSourceID="SqlDataSource1"
    AutoGenerateColumns="false" PageSize="15" GridLines="Both" CssClass="AddBorders"
    Skin="MetroTouch" OnItemDataBound="RadGrid1_ItemDataBound" OnPreRender="RadGrid1_PreRender">
    <MasterTableView DataKeyNames="OrderID">
        <Columns>
            <telerik:GridBoundColumn HeaderText="OrderID" DataField="OrderID" UniqueName="OrderID">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ShipCountry" HeaderText="ShipCountry" UniqueName="ShipCountry">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings EnableRowHoverStyle="true">
        <ClientEvents OnRowMouseOver="RowMouseOver" OnRowMouseOut="RowMouseOut" />
    </ClientSettings>
</telerik:RadGrid>

JS:

<script type="text/javascript">
function RowMouseOver(sender, eventArgs) {
    $get(eventArgs.get_id()).className += " RowMouseOver";
}

function RowMouseOut(sender, eventArgs) {
    var row = $get(eventArgs.get_id());
    row.className = row.className.replace("RowMouseOver", "RowMouseOut");
}
</script>

CSS:

<style type="text/css">
    div.AddBorders .rgHeader,
    div.AddBorders .rgRow td,
    div.AddBorders .rgAltRow td,
    div.AddBorders .rgEditRow td,
    div.AddBorders .rgFooter td
    {
        border-style: solid;
        border-color: Purple;
        border-width: 5px 5px 5px 5px; /*top right bottom left*/
    }
    .RowMouseOver td
    {
        background-color: Red !important;
    }
    .RowMouseOut
    {
    }
</style>

VB:

Protected Sub RadGrid1_ItemDataBound(sender As Object, e As Telerik.Web.UI.GridItemEventArgs)
    If TypeOf e.Item Is GridDataItem Then
        Dim dataItem As GridDataItem = DirectCast(e.Item, GridDataItem)
        dataItem.Font.Bold = True
        Dim myCell As TableCell = dataItem("OrderID")
        If myCell.Text.StartsWith("-") Then
            myCell.BackColor = System.Drawing.Color.Green
        End If

        If dataItem.ItemIndex Mod 2 = 0 Then
            dataItem.BackColor = System.Drawing.Color.Gray
        Else
            dataItem.BackColor = System.Drawing.Color.Yellow
        End If
    End If
End Sub
Protected Sub RadGrid1_PreRender(sender As Object, e As EventArgs)
    For Each col As GridColumn In RadGrid1.Columns
        col.HeaderStyle.ForeColor = System.Drawing.Color.Red
        col.HeaderStyle.BackColor = System.Drawing.Color.Black
        col.HeaderStyle.Font.Bold = True
        col.HeaderStyle.BorderColor = System.Drawing.Color.Salmon
    Next
End Sub

Thanks,
Princy

[sri]

Hi,

I am trying to do similar in my radgrid and trying to achieve the following :

(i) when Editing the Child record (Edit Mode):Both Parent and Child record border in red color (i.e Parent and child records outline in red color)

(ii) Editing the parent record : only Parent record border be in red color

 

Thanks,

SR

 

[Eyup]

Hi Sri,

What kind of hierarchy you are using?
Built-in DetailTables:
http://demos.telerik.com/aspnet-ajax/grid/examples/data-binding/programmatic-hierarchy/defaultcs.aspx

Or NestedViewTemplate:
http://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/hierarchy-with-templates/defaultcs.aspx

Looking forward to your reply.

Regards,
Eyup
Telerik