Default skin and render mode classic vs. lightweight

[Christian]

Hi!

I want to switch an existing project based on the "Default" Skin from "classic" rendermode to "lightweight" rendermode. The problem is that this extremely changes the dimensions of the controls (RadTextBox, RadComboBox and so on) especially the height.

We need the compact size of the "Default" skin and decreasing the font size is not an option because to get the same height like we get using "classic" rendermoder the font will be quite too small.

You can try your demo and switch the rendermode to see what I mean:
http://demos.telerik.com/aspnet-ajax/textbox/functionality/render-modes/defaultcs.aspx?skin=Default

Any suggestions?

[Pavlina]

Hi,

In the Lightweight Render Mode all UI for ASP.NET AJAX controls do not have a default font as of Q1 2016 SP1. This means that by changing just the font size of the body, the layout of the controls can be easily adjusted to fulfill various needs. In your case you can try setting 12px font-size and the Segoe UI font to the body as shown below and see how it goes.

body {
    font-size: 12px;
    font-family: "Segoe UI", Arial, Sans-serif;
}

More information about the controls fonts is available in the article below:
http://docs.telerik.com/devtools/aspnet-ajax/general-information/controlling-visual-appearance/fonts

Regards,
Pavlina
Telerik

[Dennis]

I know this is an old post, but I am having the same problem and it goes WAY beyond Pavlina's suggestion that just changing the default font will somehow make Lightweight RenderMode appear as compactly as the Classic RenderMode does.

Using the DevTools in Chrome from this page (https://demos.telerik.com/aspnet-ajax/grid/examples/render-modes/defaultcs.aspx) you can see there are substantial other differences between Lightweight and Classic RenderMode.  For example, most of the .RadGrid styles using padding-left and padding-right of 13px in Lightweight whereas the padding is only 7px in Classic RenderMode.  Also, line-height is 22px in Classic but 1.42857143 in Lightweight.

I would think that since Classic RenderMode has been in "maintenance mode" since Q3 2015 (per your own documentation), that Telerik would have provided a more seamless transition for developers to switch from Classic to Lightweight RenderMode without having to substantially re-writing their software or re-skinning/re-styling EVERY css element that Telerik provides!

Do you have a set of Skins or related css properties that would cause Lightweight RenderMode to render as compactly as Classic RenderMode?

Ultimately, the desire would be to add the following to the web.config of our website so that EVERY Telerik control would use Lightweight RenderMode while still rendering pages at approximately the same size and spacing as Classic RenderMode rendered.

    <add key="Telerik.Web.UI.RenderMode" value="lightweight" />

[Rumen]

Hi Dennis,

Thank you for your valuable feedback!

The Classic and Lightweight renderings are different and there isn't backward compatibility between their dimensions. 

However, the customization of the lightweight rendering is extremely easy due to the semantic rendering, the use of font icons, and CSS3 styles. You can not only control the global dimensions of the lightweight controls as Pavlina already shown but you can also list selectors like .RadComboBox, .RadGrid, .RadMenu {font-size: 12px}.

You can choose to stay with the Classic rendering which still works in the modern browsers or move to the modern lightweight rendering which will give you the freedom to customize the appearance of the controls.

You can find more information on:

• https://www.telerik.com/blogs/radcontrols-for-asp.net-ajax-lightweight-rendering-semantic-html-and-css3
• https://www.telerik.com/blogs/attack-of-the-light-rendered-css3-and-html5-win

Regards,
Rumen
Progress Telerik

[Dennis]

Hi Rumen,

I understood that there was not backwards compatibility between the Lightweight and Classic render modes.

I looked at your links but they were not helpful in showing exactly where you would need to change Lightweight rendering to make it as compact as Classic rendering. And, by the way, your second link above does not appear to work.

Even though you say the customization of the lightweight rendering is extremely easy, our website has hundreds of pages and we use several skins depending on the page.  Neither Pavlina's nor your links give step-by-step procedures for how to change ALL of the CSS styles for ALL of the skins that Telerik controls can use!  Since there are literally HUNDREDS of those files, combing through each sub-directory under C:\Program Files (x86)\Progress\Telerik UI for ASP.NET AJAX R1 2020\Skins\ to try and determine WHICH styles make Lightweight rendering different than Classic rendering becomes a MAMMOTH job!

I was hoping that there might be a less labor intensive way to implement Lightweight rendering for ALL the Telerik controls while still keeping the compact rendering nature of Classic rendering. Since you folks at Telerik provided the Skins and related CSS files for Lightweight rendering, I presumed that you would have a better idea of how many places would need to be changed than a customer like myself would.  Any help you can provide to point me to the CSS styles that make Lightweight rendering so different visually than Classic rendering would be most helpful.

Dennis

[Rumen]

Hi Dennis,

My advice on how to proceed is to:

• Reduce the controls' dimensions by applying a small font-size via a global body CSS class as explained in the Fonts article or via the controls classes as shown for example for RadWindow - Elastic Design with RadWindow, e.g.
  
  

  <style type="text/css">
      div.RadWindow
      {
          font-size: 18px;
      }
  </style>
  <telerik:RadWindow ID="RadWindow1" runat="server" Title="Longer Window Title" VisibleOnPageLoad="true" RenderMode="Lightweight" Width="450">
  </telerik:RadWindow>

  Using the above approach you can control individually the elastic capabilities of the Telerik AJAX controls. You can find more details at https://docs.telerik.com/devtools/aspnet-ajax/mobile-support/responsive,-adaptive-and-elastic-capabilities.
• The second step is to perform fine-tuning as explained in this blog post - https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools#see-the-applied-styles. Once you see which classes are applied your can customize and override them directly in your aspx page and to remove/increase or decrease the unwanted margins and the paddings.
  
  Another alternative is to customize the existing skins. They are two types the ones for the Classic rendering and the ones for the Lightweight one. The skin files and folders for the lightweight rendering contains the string Lite in their names:
  
  Black - classic
  BlackLight - lightweight rendering
  Grid.css - classic
  GridLite.css - lightweight rendering
  
  

If you experience any troubles please open a support ticket and provide sample code, screenshots, live URLs so that we can research the issue(s) and help you out with them.

If you think that the migration to lightweight is to time-consuming, you can keep the Classic rendering since it still works well.

On a side note, the second link was updated and should work properly now - https://www.telerik.com/blogs/attack-of-the-light-rendered-css3-and-html5-win. 

Regards,
Rumen
Progress Telerik