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

Using skins on a standard .Net Grid

1 Answer 31 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dan Glascott
Top achievements
Rank 1
Dan Glascott asked on 20 May 2010, 07:49 PM
I am building a large application and while I like to use the Rad Grid for complex data like hierarchies, grouping, editing, etc. I want to minimize the integration of the controls to avoid upgrade issues. I would like to use standard .Net data grids when the data is for view only, but I want the look and feel of the grids to match. What is the easiest approach to using the rad skins with a standard .Net data grid?

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 21 May 2010, 07:12 AM
Hi Dan,

Basically, you need to register the RadGrid skin manually and set the appropriate CSS classes to the asp:GridView (demo below). Another option is to use RadFormDecorator to style the asp:GridView, as in this demo:

http://demos.telerik.com/aspnet-ajax/formdecorator/examples/decorategridformdetailsviews/defaultcs.aspx


<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
   
<script runat="server">
   
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GridView1.DataSource = GetDataSource();
            GridView1.DataBind();
        }
    }
       
    protected DataTable GetDataSource()
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 4;
        int rowsNum = 7;
        string colName = "Column";
   
        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }
   
        for (int i = 1; i <= rowsNum; i++)
        {
            dr = dt.NewRow();
   
            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
            }
            dt.Rows.Add(dr);
        }
   
        return dt;
    }
       
</script>
   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   
<head id="Head1" runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
   
<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" EnableStyleSheetCombine="false">
    <StyleSheets>
        <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Grid.css" />
        <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.WebBlue.Grid.WebBlue.css" />
    </StyleSheets>
</telerik:RadStyleSheetManager>
   
<p>This is an asp:GridView, which looks like a RadGrid:</p>
   
<asp:Panel ID="Panel1" runat="server" CssClass="RadGrid RadGrid_WebBlue" Width="600px">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ShowFooter="true"
    CssClass="rgMasterTable" Width="100%" style="border-collapse:separate" BorderWidth="0">
    <RowStyle CssClass="rgRow" />
    <AlternatingRowStyle CssClass="rgAltRow" />
    <EditRowStyle CssClass="rgEditRow" />
    <SelectedRowStyle CssClass="rgRow rgSelectedRow" />
    <FooterStyle CssClass="rgFooter" />
    <Columns>
        <%--Select column:--%>
        <asp:CommandField ButtonType="Link" HeaderStyle-CssClass="rgHeader" SelectText="Select" ShowSelectButton="true" />
        <asp:BoundField DataField="Column1" HeaderStyle-CssClass="rgHeader" HeaderText="Column 1" FooterText="footer 1" />
        <asp:BoundField DataField="Column2" HeaderStyle-CssClass="rgHeader" HeaderText="Column 2" FooterText="footer 2" />
        <asp:BoundField DataField="Column3" HeaderStyle-CssClass="rgHeader" HeaderText="Column 3" FooterText="footer 3" />
        <asp:BoundField DataField="Column4" HeaderStyle-CssClass="rgHeader" HeaderText="Column 4" FooterText="footer 4" />
    </Columns>
</asp:GridView>
</asp:Panel>
  
<br />
<p>This is an HTML table, which looks like a RadGrid:</p>
  
<div class="RadGrid RadGrid_WebBlue" style="width:600px">
<table class="rgMasterTable" style="width:100%" cellspacing="0">
<tr><th class="rgHeader">header cell</th></tr>
<tr class="rgRow"><td>row</td></tr>
<tr class="rgAltRow"><td>alternating row</td></tr>
</table>
</div>
   
</form>
</body>
</html>


Sincerely yours,
Dimo
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.
Tags
Grid
Asked by
Dan Glascott
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or