Dan Glascott
Top achievements
Rank 1
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
0
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
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.
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" <html xmlns="http://www.w3.org/1999/xhtml"><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.