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

[Solved] Help for Grid Skin CSS script file

2 Answers 132 Views

Grid

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

Avinash asked on 25 Nov 2009, 08:16 PM

radgrid-default-look.JPG

Hi,

I am in process of migration of old RagGrid.Net2 to latest vesions of Telerik.Web.UI controls.
For most part of my project I am using RADGrid control which was having old grid with its default skin look.
Look having grayish with expand buttons as PLUS & Minus.
I have attached an image of old grid look which I am expecting.

Now for new grid Skin name is required and there is no embeded skin which is similar to Default skin of old grid.
I try putting name Skin = "Default" but it throws expcetion saying skin not found.

When I tried creating new skin it is getting harder and harder for me as I never used to CSS stuff.

I will really appreciate if some one can help me out in this and send me CSS file for RADGrid having old grid look.
I did found one PSD file for Default skin but I dont know how to use that with control but CSS will be more halpful as I can edit if required.

Help appreciated,
Thanks,
Avi

2 Answers, 1 is accepted

answered on 26 Nov 2009, 09:46 AM

Hello Avi,

If you are getting an exception about an embedded skin not being found, then you must have spelled it incorrectly. Please check.

Since the new Default skin is very similar to the one that you have been using, I recommend you to use the new Default embedded skin and only make a couple of minor tweaks. Here is an example. Otherwise you can create custom non-embedded skins with our Visual Style Builder.

<%@ Page Language="C#" %>

<%@ Import Namespace="System.Data" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

DataTable dt = new DataTable();

DataRow dr;

int colsNum = 2;

int rowsNum = 5;

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);

}

(sender as RadGrid).DataSource = dt;

}

protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)

{

if (e.Column is GridExpandColumn)

{

(e.Column as GridExpandColumn).ButtonType = GridExpandColumnType.ImageButton;

(e.Column as GridExpandColumn).ExpandImageUrl = "~/grid_images/SinglePlus.gif";

(e.Column as GridExpandColumn).CollapseImageUrl = "~/grid_images/SingleMinus.gif";

}

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>RadControls for ASP.NET AJAX</title>

<style type="text/css">

div.RadGrid_Default

{

background:#f7f7f7;

}

div.RadGrid_Default .rgAltRow

{

background:transparent;

}

div.RadGrid_Default .rgSelectedRow

{

background:#e5e5e5;

}

div.RadGrid_Default .rgRow td,

div.RadGrid_Default .rgAltRow td

{

border-top:1px solid;

border-color:#e9e9e9 #f7f7f7 #fff;

}

div.RadGrid_Default .rgSelectedRow

{

color:#000;

}

div.RadGrid_Default .rgSelectedRow td

{

border-left-color:#e5e5e5;

border-right-color:#e5e5e5;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid

ID="RadGrid1"

runat="server"

Width="500px"

AllowSorting="true"

Skin="Default"

OnColumnCreated="RadGrid1_ColumnCreated"

OnNeedDataSource="RadGrid_NeedDataSource">

<SortingSettings EnableSkinSortStyles="false" />

<ClientSettings>

<Selecting AllowRowSelect="true" />

</ClientSettings>

<MasterTableView>

<DetailTables>

<telerik:GridTableView Width="100%" />

</DetailTables>

</MasterTableView>

</telerik:RadGrid>

</form>

</body>

</html>

All the best,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.