Styling a RadGrid

4 posts, 0 answers
  1. Ali
    Ali avatar
    1 posts
    Member since:
    Apr 2012

    Posted 25 Jun 2013 Link to this post

    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. :)
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 27 Jun 2013 Link to this post

    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

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. sri
    sri avatar
    1 posts
    Member since:
    Feb 2016

    Posted 18 Feb in reply to Princy Link to this post

    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

     

  5. Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 23 Feb Link to this post

    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
Back to Top