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

Fileter RadMenu CSS Problems.

6 Answers 108 Views
Grid
This is a migrated thread and some comments may be shown as answers.
towpse
Top achievements
Rank 2
towpse asked on 26 Sep 2008, 07:55 PM
Greetings folks.

I have recently migrated one of my pages to use the latest of offerings from Telerik; namely the ASP.net AjAX controls.

The migration was, I found, nice and easy and not cumbersome at all. The process is pretty much what I would have expected it to be.

My main issues however are coming from the CSS and skinning. It's all fairly straight forward but the RadMenu CSS that is now being used for the filter menu is rendering the menu above my grid, across the top of the page and pushing the rest of the content down!

The strange thing is that upon immediate migration to the new grid, I had no issue with the positioning of the menu. I then started to include CSS files for other controls and begin to customize my own skins and then suddenly this issue surfaced. I since removed all the CSS changes I made and the problem still persists. I then reverted my code completely to the last working committed version and started the migration over and the problem is still there. In conclusion, what gives?

In IE, the CSS is even rendering the display as none so I can't see the menu items. Firefox is not doing that. Even if I include one of the give telerik CSS files for the RadMenu, I get a nice looking menu but it's rendered above the grid.

Any thoughts?


Regards.

6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 29 Sep 2008, 05:38 AM
Hi Matt,

Are you by any chance using a classic RadMenu for ASP.NET on the same page, on which you have the RadGrid for ASP.NET AJAX with filtering turned on? In this case the old RadMenu's CSS styles spoil the positioning of the ASP.NET AJAX RadMenu and it is recommended to migrate the old menu as well. Alternatively, you will have to set an absolute position style for the filtering menu with an !important clause.

Regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
towpse
Top achievements
Rank 2
answered on 29 Sep 2008, 12:50 PM
I'm not specifically using any menu, no. I've only been using the grid, tree and window on this particular page.

The first time that I migrated the grid, the menu was being placed properly. It didn't have any styles; no background and blue text, which is fine since there was no Rad Menu CSS being used.
I then proceded to include the telerik theme CSS for Rad Menu which easily made it display nicely.

I then continued to migrate the window and the tree after which at some point I thought that I must have did something to muck up the styling of the filter menu because it was being displayed at the top of the page and pushing everything down and even had the visibility set to hidden in IE.
 
I tried to revert everything back to before I started to change CSS. I even reverted to the last version of the page before I started migrating and restarted the migration process starting with the grid. Immediately after updating the grid I still had this problem.

I'll try your absolute suggestion. Is that a change I have to make to the RadMenu CSS file?

I would have thought that by default the menu would just be lacking styles but should be placed properly...


Thanks
0
Accepted
Dimo
Telerik team
answered on 29 Sep 2008, 02:30 PM
Hi Matt,

When using embedded skins shipped with the Telerik RadControls for ASP.NET AJAX suite, you don't need to make any changes in order to ensure that the controls appear alright.

I am almost sure that some styles are spoiling the RadMenu's positioning. You said that your are not using an old menu on the problematic page, however, are you registering some old menu skin (via an ASP.NET theme for example) ? Also, are you actually using embedded skins for RadGrid and the filtering RadMenu or custom (migrated) ones?

If you find it hard to discover the styles, which cause the problem, please open a support ticket and send us a simple runnable project. Alternatively, provide a live URL for us to inspect.

This is an easy problem to solve, we just need to look at it reproduced.

Regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
towpse
Top achievements
Rank 2
answered on 29 Sep 2008, 02:54 PM
Hi Dimo. Thanks for the response.
I am setting EnableEmbeddedSkins to false in order to eventually use custom skins. I have simply copied the CSS and the directory structure of the packaged skins and I include the CSS file in a link element.

<

link href="../../Skins/MyTheme/Grid.MyTheme.css" rel="stylesheet" type="text/css" />

<link href="../../Skins/MyTheme/Menu.MyTheme.css" rel="stylesheet" type="text/css" />

For the time being those are exact duplicates of the telerik skin versions.

 
I've renamed the files per the instructions I found online for migrating controls. I guess what eventually needs to be done is to modify the spite.gif file accordingly to get the custom backgrounds and icons to work with the new way of doing skin CSS with telerik controls.

I think you're right that something is spoiling the CSS although I have seen it working which is really baffling and like I said I started all over and the CSS was buggered from the start this time.

I'll try a fresh project and see if I can determine what is causing it otherwise I will open a ticket.

Thanks.
0
towpse
Top achievements
Rank 2
answered on 01 Oct 2008, 09:00 PM

Since I was toggling the filter row via an ajax request I need to set the following proeprty for the grid on page load

this

.InactiveUnitGrid.EnableAjaxSkinRendering = true;

That solved my problem.


Response from Dimo of Telerik


RadGrid's filtering menu is a context-type RadMenu, which needs a position:absolute style in order to appear where it should. This style normally comes from the menu's base CSS.

In your scenario the main complication comes from the fact that filtering is enabled programmatically with an AJAX request. Two problems occur because of this:

1) If you are using embedded skins, the RadMenu skin will not be registered after the AJAX request. In this case the solution is to set

RadGrid_ID.EnableAjaxSkinRendering = true;

in Page_Load()

0
Dimo
Telerik team
answered on 02 Oct 2008, 06:30 AM
Hi Matt,

Thanks for sharing the solution to the problem with the community.

Kind regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Grid
Asked by
towpse
Top achievements
Rank 2
Answers by
Dimo
Telerik team
towpse
Top achievements
Rank 2
Share this question
or