Disable CSS Class Selectors

[Michael]

i would like the CSS class selectors such as:

.RadMenu_iDefault .rmItem a.rmLink {
    padding: 1px 0 1px 12px;
}
.RadMenu_iDefault .rmHorizontal .rmItem {
    padding: 2px 0;
}
.RadMenu_iDefault_rtl .rmItem a.rmLink {
    padding: 1px 12px 1px 0;
}
.RadMenu_iDefault .rmVertical .rmItem a.rmLink {
    padding: 1px 12px;
}
div.RadMenu_iDefault_rtl .rmHorizontal .rmText {
    padding: 0 0 1px 12px;
}

Not to be rendered with the code at run time, this is because i like using 'DotLess' in my projects and i'm used to the way i style the pages using the elements like:

[Valid DotLess Syntax]

.Menu_Head{
    float: right;
    list-style: none;
    #Layouts > .FullAutoWidth;
    --{}
    a {
        color: #ffffff;
        text-decoration: none;
        white-space: nowrap;
        display: block;
        --{}
        &:visited, &:active {
            color:  #ffffff;
            text-decoration: none;
        }}
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        list-style:none outside none;
        --{}
        &:focus, li a:focus {
            outline: none;
            outline-width: 0;
        }}}

i'm not a big fan of the way the style sheets have been created for the telerik rad controls so the the generated selectors are sort of "in the way". i would like the following HTML:

<ul class="rmRootGroup rmHorizontal">

<li class="rmItem rmFirst">


with the selectors omitted at runtime.
Basically i don't want the /WebResource.axd or the CSS Selectors generated. i have EnableEmbeddedBaseStylesheet="False" but is there something i can do about the CSS Selectors like ie. EnableCSSClassSelectors="False" or a work around to accomplish such?

<ul class="">
 <li class="">

[Kate]

Hi Michael,

You can use both the EnableEmbeddedBaseStylesheet="false" and the EnableEmbeddedSkins="false" property of the different Rad controls to disable the skins and the basestylesheet that are applied.

Kind regards,
Kate
the Telerik team

[Michael]

Thank you for the help but it still does not remedy the issue.
i used both the advised and all this did is remove the Base Stylesheet and Skins so it's obvious considering thats what they imply they do.
EnableEmbeddedBaseStylesheet="false" [Used]
EnableEmbeddedSkins="false" [Used]

still generates the Css Selectors in final markup...
Here is an example:

<a id="Base64Control_RadCheckBox1" class="RadButton RadButton_ rbSkinnedButton" href="javascript:void(0)">
    <span class="rbPrimaryIcon  rbToggleRadio"></span>
    <input class="rbDecorated rbPrimary" type="submit" name="Base64Control$RadCheckBox1_input" id="Base64Control_RadCheckBox1_input" value="DECODE" />
    <input id="Base64Control_RadCheckBox1_ClientState" name="Base64Control_RadCheckBox1_ClientState" type="hidden" /></a>

i don't want nor need the pre-generated Css Class selectors i.e.

<a id="Base64Control_RadCheckBox1" class="RadButton RadButton_ rbSkinnedButton" href="javascript:void(0)">

where RadButton RadButton_ rbSkinnedButton is not needed. i would like to see class="" if possible,

Thanks in advance :)

[Ivan Zhekov]

Hi, Michael.

Indeed disabling the base stylesheets and the embed skins will not remove class attributes from the generated HTML. But then again, if you are not using those, it shouldn't be a problem that they exist.

The reason they exist is that we need them to attach various event handlers and create and populate the proper client side objects, needed for the javascript interactions.

If you do not need those [the js and interactions], you could create your own custom control that inherits from the menu, per say, but overrides the Render method to strip all class names.

Regards,
Ivan Zhekov
the Telerik team

[Michael]

Thanks for the help and advice on the issue, is there an example for what you prescribe? i would much appreciate a stepping stone.

Thanks again!

[Ivan Zhekov]

Hi, Michael.

Here is an example snippet:

// using jQuery as $
$(document).ready(function() {

    // insert selecotors you want removed comma separated
    $(".rmRootGroup, .rmHorizontal").each(function() {
        // this will refer to the element
        $(this).removeAttr( "class" )
    });

});

Of course, be warned that NO javascript will work if you remove ALL Telerik generated class names.

All the best,
Ivan Zhekov
the Telerik team

[Michael]

Thank you for the help, the support here is second to none :)