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

Styling a RadGrid

3 Answers 860 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ali
Top achievements
Rank 1
Ali asked on 25 Jun 2013, 11:59 AM
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. :)

3 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 27 Jun 2013, 10:59 AM
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

0
sri
Top achievements
Rank 1
answered on 18 Feb 2016, 10:11 PM

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

 

0
Eyup
Telerik team
answered on 23 Feb 2016, 08:14 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Grid
Asked by
Ali
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
sri
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or