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

RadGrid Pager with no skin

8 Answers 230 Views

Grid

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

8 Answers, 1 is accepted

answered on 12 Nov 2009, 03:11 PM

Hi Paul,

Styling RadGrid when no skin is used is not that easy. So I suggest you to modify your custom CSS styles to be compatible with the new embedded skins or use a complete custom skin.

If you want to use old embedded skins with Q1 2009+:
http://www.telerik.com/community/forums/aspnet-ajax/general-discussions/all-radcontrols-q3-2008-skins-are-now-compatible-with-the-q1-2009-release.aspx

If you want to migrate old custom skins to Q1 2009+:
http://blogs.telerik.com/tervelpeykov/posts/09-03-20/using_pre-q1_2009_skins_with_q1_2009.aspx

List of the old and new RadGrid CSS classes:
http://www.telerik.com/help/aspnet-ajax/grdcreatingnewskins.html

Changes in the pager rendering in Q1 2009:
http://www.telerik.com/help/aspnet-ajax/grdbackwardcompatibility.html

Sincerely yours,
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.

answered on 12 Nov 2009, 03:31 PM

Thanks for the pointers, but maybe I didn't make it clear enough, so to elabourate we've customised our RadGrids globally using the following way;

<tel:PassRadGrid ....>
    <HeaderStyle CssClass="aspGridHeader" VerticalAlign="Top" />
    <ItemStyle CssClass="aspGridRow" VerticalAlign="Top" />
    <AlternatingItemStyle CssClass="aspGridAlternating" VerticalAlign="Top" />
    <PagerStyle CssClass="aspGridPager" Mode="NextPrevAndNumeric" PagerTextFormat="Select page {4}. Displaying page {0} of {1}, items {2} to {3} of {5}."
                    EnableSEOPaging="true" />
    <SelectedItemStyle CssClass="aspGridSelected" />
    <FooterStyle CssClass="aspGridFooter" />
    <FilterItemStyle CssClass="aspGridFilter" />
    ...
</tel:PassRadGrid>

We did not specify a skin, (and have not modified it in any way), as the CssClass settings above meant the skin's appearance was effectively ignored. In Q1 2009, it seems that the Skin's settings override any of the CssClass style properties but, (for backwards compatibility), we need to keep these settings un-altered - i.e. we can't add the "!important" flag - as almost every organisation that uses our website will have customised these classes.

The only way for us to achieve this, as far as we can tell, is to disable the Skin, but this means the paging area occupies four lines, not one. So my question is how can we either; (a) keep the default skin but make it use our custom style classes, or (b) fix the RadGrid so its paging area only appears on one line when no skin is used?

Hope that helps,
Paul

answered on 17 Nov 2009, 03:55 PM

Hi Paul,

In your case you can add a couple of CSS classes and styles to make the pager components stay on a single line. The pager components are placed in <divs> (asp:Panels), so you have to locate these at runtime and float them. Here is an example:

<%@ 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 = 4;

int rowsNum = 30;

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 RadGrid_ItemCreated(object sender, GridItemEventArgs e)

{

if (e.Item is GridPagerItem)

{

ControlCollection PagerControls = (e.Item as GridPagerItem).PagerContentCell.Controls[0].Controls[0].Controls[0].Controls;

foreach (Control c in PagerControls)

{

if (c is Panel)

{

Panel d = c as Panel;

if (String.IsNullOrEmpty(d.CssClass))

d.CssClass = "rgWrap";

else if (d.CssClass.IndexOf("rgWrap") == -1)

d.CssClass += " rgWrap";

if (c == PagerControls[PagerControls.Count - 1])

d.CssClass += " rgInfoPart";

}

</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">

.rgWrap

{

float:left;

}

.rgInfoPart

{

float:right;

}

</style>

</head>

<body>

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

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

<telerik:RadGrid

ID="RadGrid1"

runat="server"

Skin=""

AllowPaging="true"

OnItemCreated="RadGrid_ItemCreated"

OnNeedDataSource="RadGrid_NeedDataSource">

</telerik:RadGrid>

</form>

</body>

</html>

Greetings,
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.

answered on 27 Sep 2010, 08:33 AM

Hello Dave,

In theory, it is possible to use ItemCreated, but since the page number buttons do not have explicit IDs (only ones generated from the ASP.NET framework), you have no way to access them directly and will need to use a series of Controls[...].Controls[...] statements (where ... is a number). This approach is impracticable and I don't recommend it. What is the problem with my previous suggestion, so that I can provide a better one, if possible?

Kind regards,
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