[Solved] RadcomboBox and Page ComboBox Not Being Styled In Grid (Even On A Test Page With No Linked CSS and Using Default Skins)

[jgill]

I'm having a strange issue where Radcomboxes in RadGrids are not being styled.  I have tried both the Default and Office2007 skins on a test page with literally no specified CSS and for some reason the Comboxes are not being styled.  The RadGrids are linked through the RadAjax manager and they have Loading Panels, but there is no dynamically inserted CSS that I am doing.

Does anyone know how to fix this, help would be very welcomes? 

I have attached an image of the issue.

[jgill]

I also wanted to inform you that I do not have any RadFormDecorators on the page.

[Dimo]

Hi Jonathan,

Please check whether the problem occurs in Internet Explorer only. If yes, then you have probably hit the browser's limit of 32 CSS files. You need to combine the non-embedded CSS files to reduce their number and / or to use RadStyleSheetManager for the embedded skins.

http://www.telerik.com/help/aspnet-ajax/radstylesheetmanager.html

If the problem seems to be different, we will need a simple runnable demo.

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.

[jgill]

Hello Dimo,

The issue occurs in FireFox as well even on pages where I do not import any stylesheets, e.g. literally a MasterPage with no styles applied to a content page with a RadGrid.

[jgill]

In an actual production page (not the test one where I do not link to our three CSS files) there are 11 "text/css" linked files (including the .axd WebResource files), most coming from Telerik.

[jgill]

I am posting updates as I troubleshoot, hoping they will help someone to help me with additional information at their disposal.  I checked another page using the same MasterPage and same linked CSS files (the ones the MasterPage uses) and it works fine.

The difference between the pages is that the page with the problems has three linked RadGrids, 3 Loading Panels, and the RadAjaxManager is on the page.  I wonder if the Loading Panels or the RadAjaxManager are causing the issues.

[jgill]

I think I’m getting close to narrowing down the problem.

I created a new page without a MasterPage and ContentPage relationship then copied the code from my previous content page and added a ScriptManager to the page.  The 3 related RadGrids rendered their internal RadComboxes correctly using the same code, so it must be something in the relationship between the MasterPage and ContentPage.

It could be because of the following:

1. MasterPage has a ScriptManager declared in it
2. Content page does not have a ScriptManager proxy
3. RadAjaxManager is declarively defined in the Content Page

[Dimo]

Hi Jonathan,

It will be best if you provide a simple runnable demo with a master page, which reproduces the issue. Thank you in advance.

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.

[jgill]

Hi Dimo,
I wanted to see if you could still help with this issue as it is still occuring.

I created a test page that does not use a master page, any manually linked/added CSS, etc. that shows the problem and it appears to be cross browser. 

Here is the test page (click on the second row in RadGrid1, "States"), then look at and attempt to change the page size in RadGrid2.
  [REDACTED]

It would require a good deal of restructuring to provide a new solution in a support ticket that recreates the issue with a database/new data source as I cannot share the actual solution. 

[Dimo]

Hello Jonathan,

Thank you for the live URL. The problem is that the RadGrid pager is made visible after an AJAX request.

Please set EnableAjaxSkinRendering to "true" for the second RadGrid. Do that programmatically in Page_Load on initial load and on every postback.

If this does not work (it should), then register the RadComboBox CSS styles manually:


<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
    <StyleSheets>
        <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.ComboBox.css" />
        <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Default.ComboBox.Default.css" />
    </StyleSheets>
</telerik:RadStyleSheetManager>


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.

[jgill]

HI Dimo,
I am using the Office 2007 skin as my default skin in the project (in the Web.Config) where if I do not specific a skin it appies that skin.  The method of setting EnableAjaxSkinRendering to "true" did not work (I tried both programatically in page's on load event and declaratively).

I specified a skin on RadGrid2 changing it explicitly to be the the Default skin instead of Office2007 and added the stylesheet manager code and that did work!

Thank you!

Do you know any way I could get this to work without explicitly using the RadStyleSheetManager to include the stylesheets?

[Dimo]

Hello Jonathan,

Here is a simple web page, which shows how EnableAjaxSkinRendering works. Please compare with your implementation.

Another possible approach in your case is to set

<telerik:RadGrid>
    <PagerStyle AlwaysVisible="true" />
</telerik:RadGrid>

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 4;
        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 Button1_Click(object sender, EventArgs e)
    {
        RadGrid1.PageSize = 3;
        RadGrid1.Rebind();
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        RadGrid1.EnableAjaxSkinRendering = true;
    }

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="50" BackColor="Yellow" />

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="Button1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

<asp:Button ID="Button1" runat="server" Text="Change RadGrid PageSize" OnClick="Button1_Click" />

<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    AllowPaging="true"
    PageSize="5"
    OnNeedDataSource="RadGrid_NeedDataSource">

</telerik:RadGrid>


</form>
</body>
</html>

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