Hello,
we have custom versions of Bootstrap skins in application. Everything works almost fine. It is easy to create build framework (with help of Theme Builder) based on source scss files. Then using multiple variables we are generating multiple "Bootstrap skins" for lightweight mode.
But there are 2 version of skin resources. Classic and Lite. When EnableEmbeddedSkins is active, everithings works. Resources are inserted to page and my overrides are aplied. But there are many problems in Ajax requests. Results are not as expected. Many controls are broken without any reason. For example Grid Pager paddings are missing etc.
So I decided to disable embedded skins and build whole Bootstrap skin. Well, then I found it sometimes doesn§t work and many styles are missing. I found, then in original page, both skins are injected - classic then lite.
So for example - css handler returns \Bootstrap\Grid.Bootstrap.css then \BootstrapLite\Grid.Bootstrap.css
Just look for css selector '.RadGrid_Bootstrap .rgPagerCell .rgPageNext'. It is defined in classic css file but not in lite css. So when classic css is missing, button is invisible.
I'm lost :-) I thought that both versions are different. That I can use lite OR classic. So why in lightweight mode is still classic css required?
So in my build framework I need to build classic css and append lite version to get working Bootstrap skin?
I'm really loking for any explanation about skins, how it works based on renderring mode.
Best Regards
René
14 Answers, 1 is accepted
Since the mixture of classic and lightweight rendering is not allowed, please ensure that all Telerik AJAX components on the page use only Lightweight rendering.
You can see it globally for the whole app via the web.config file with this tag:
<appSettings> <add key="Telerik.Web.UI.RenderMode" value="lightweight" /></appSettings>You can find more information on skins troubleshooting at Incorrect or Distorted Appearance.
The Theme Builder create themes only for the Light weight rendering and you can see how to apply the produces css file in this article Theme Builder -> Apply the Skin.
You can also find explanation how the skins work at How Skins Work. My advice is to not disable the base stylesheet except if you want to customize the fonts and colors used in the controls.
Regards,
Rumen
Progress Telerik
Rank 2
Hi,
yes, I have set lightweight in web.config. No mode change in controls etc. It is ok.
<add key="Telerik.Skin" value="Bootstrap" />
<add key="Telerik.EnableEmbeddedSkins" value="true" />
<add key="Telerik.Web.UI.RenderMode" value="lightweight" />
I disabled styles combine to check what is downloaded.
I have Ajax enabled page. After Ajax request is fired, I see multiple WebResource.axd requests to download additional css files. It is ok. So I checked what exactly is downloaded. I found that there are 2 different results containing .RadGrid_Bootstrap definitions. In source files I found one is from Bootstrap resource and second from BootstripeLight.
So that's why I'm asking how it works.
I don't want disable base skins, just whole skin and use local skins.
Regards René
For your convenience I recorded a video which shows how the skins files are loaded when the Lightweight and Classic render mode are set.
I used the following configuration as a base, but the same is applicable for the other components too:
<telerik:RadStyleSheetManager ID="dsa" runat="server" CdnSettings-TelerikCdn="Enabled"></telerik:RadStyleSheetManager><telerik:RadDateTimePicker ID="RadDate" runat="server" RenderMode="Lightweight" Skin="Bootstrap"></telerik:RadDateTimePicker>Basically when the RenderMode is set to "Lightweight" the following css files are imported for the DateTimePicker:
CalendarLite.css (base stylesheet for Lightweight)
BootstrapLite/Calendar.Bootstrap.css
When RenderMode is set to Classic:
Calendar.css (base stylesheet for Classic)
/Bootstrap/Calendar.Bootstrap.css
As you can see those are different css files responsible for the Light and Classic rendering of the component.
Regards,
Rumen
Progress Telerik
Rank 2
You are right, it should work this way, but I'll show you something :-)
Please see attached screens.
01 - It is part of web page in our system. Just wizard on update panel, nothing special. There is button to switch page. It is on update panel, so it does AJAX request.
02 - After response, we can see that RadGrid's pager is broken. So we can check DevTools to see what is wrong.
03 - Using "Inspect" look for pager element and check CSS. Focus on "RadGrid_Bootstrap" classes, because that§s what we are looking for. We can see different resources. I just disabled combining resources.
04 - 1st resource is loaded from css file we can find in Bootstrap folder. On end there is definition of icons etc. So it is classic skin.
05 - 2nd resource contains font definition and other differences, so we can find it in BootstrapLite folder. So it is lite skin.
And now, tell me, how it is possible, that even if lightweight mode is enabled, and there should be no way how to load both skins? I see conflict in skins and I have no idea what to do. :-)
Regards
René
I really appreciate the detailed screenshot! Thank you!
Can you launch a global find and search for the RenderMode string in the whole project? It may appear that some control has explicitly set RenderMode="Classic"?
Is RadFormDecorator used by the app?
Another reason can be a bug in an older version of the suite. Can you please test with the latest one R2 2019 - version 2019.2.514?
If the problem still persists:
- start removing the stylesheet and the controls one by one until you find from where comes the classic related css for the grid.
- or isolate the problem in a simple runnable project and send it for examination.
Thank you!
Regards,
Rumen
Progress Telerik
Rank 2
Hi,
I'm sure there is no hardcoded RenderMode. Checked before. I'm using the latest version of components (2019.2.514). There is no RadDecorator in application. It has been used on some old legacy pages, but not now.
I set CDN to see loaded files after Ajax. Still classic Grid css is loaded without any reason.
It is hard to modify current control to just remove components, but I'll try. But I think when grid is removed, there will be no request for grid css file. So only grid itself somehow wants multiple css files.
Regards
René
There are some new suggestions on what to check:
- It could be, if the HeaderContextMenu is declared in the Markup, it will default to Classic rendering if not explicitly defined - Grid RenderMode falls back to Classic when Grid's markup has a HeaderContextMenu tag and no explicitly set RenderMode
- Check for RenderMode settings in the RadSkinManager, App_Themes, codebehind files, user controls and the whole app.
- Provide the aspx, masterpage and codebehind files so that we can examine them.
Best Regards,
Rumen
Progress Telerik
Rank 2
Hi,
thnx for tips. I checked everything. But I think this is something different. It has nothing to do with markup, but code behind.
Whole control is just asp wizard with multiple steps. Only important markup is:
<asp:WizardStep ID="Step7" runat="server">
<asp:Panel ID="Step7Panel" runat="server">
<!-- 1st grid loaded OnInit -->
<asp:PlaceHolder ID="OutputFormPlaceholder1" runat="server" />
<!-- 2nd dummy grid breaks styles -->
<telerik:RadGrid runat="server"></telerik:RadGrid>
</asp:Panel>
</asp:WizardStep>
In OnInit is loaded another user control with RadGrid to OutputFormPlaceholder1. When loaded, it is initialized and is called Rebind() and some other things.
When step is changed, Wizard_ActiveStepChanged is fired and grid on that loaded control is rebound again. Well, is seems to be a bug in our code, because Rebind is called 2 times. But this simple flow works fine, grid is displayed fine.
Problem appears when another grid is on the same step template. I tested it just adding dummy grid. No codebehind. Just markup as above. Then after step is loaded (and rebind is called 2 times of course), original grid is broken.
And I really don't get it. How can another grid in page break everything? Why this 2nd grid forces fallback to classic rendering? How exactly grid decide if load classic or lightweight theme? Is it related to asp lifetime flow?
I'm still trying to create sample, but it is hard.
Regards
René
Rank 2
Hi again,
got sample with problem :-)
Please check this project: https://www.dropbox.com/s/29c2uafsdydg8ly/TelerikTestGrid.zip?dl=0
Regards
René
Thank you very much for the provided project.
I tested it, reproduce the problem and fixed it by setting RenderMode="Lightweight" in RadGrid with ID RadGridExternal placed inside the TelerikTestUserControl.ascx user control:
<telerik:RadGrid ID="RadGridExternal" runat="server" OnNeedDataSource="RadGridExternal_OnNeedDataSource" RenderMode="Lightweight" ...
For your convenience I have attached the modified file.
Regards,
Rumen
Progress Telerik
Rank 2
Hi,
ok, I can test it in application, but this is not solution, but workaround. I don't want to edit all user controls and hardcode RenderMode. That's why it is set in web.config.
Do you know where is the problem and why Grid in user control is rendered as classic?
Regards
René
After debugging the scenario it appeared that when the Rebind() method of RadGrid is called in the TelerikTestUserControl.ascx.cs file it is too early in the control lifecycle to read the RenderMode information from the web.config file.
That's why the only workaround for the time being is to explicitely set the rendering in the user control or in its codebehind
public void SetData(){ RadGridExternal.RenderMode = RenderMode.Lightweight; RadGridExternal.Rebind();}Can you please also tell us what's the reason behind the Rebind() since if you do not call this method in the SetData interface method, the grid will be rendered fine with the specified rendering in the web.config file?
Thank you!
Regards,
Rumen
Progress Telerik
Rank 2
Hi,
I'm fixing one of legacy user controls. In application scenario there is SetData method with parameters, that are changing data source. So Rebind is used to reload/refresh data. I tried to comment it but data has not been refreshed using NeedDataSource event.
Well and about RenderMode - where is the right place to init control to be using web.config settings? I'm not able to set RenderMode on all controls in project. If grid is affected, I think there is a chance that other controls are not working properly too. Is it about where DataSource is set, or where is the problem? Am I able to fix it without hardcoding RenderMode in code?
Best Regards
René
We examined the provided sample project once again and modified it so that the grids are populated using the server OnNeedDataSource and DataBinding without calling the Rebind method:
TelerikTestUserControl.ascx.cs
public partial class TelerikTestUserControl : System.Web.UI.UserControl, ITelerikTestUserControl{ protected void RadGridExternal_OnNeedDataSource(object sender, GridNeedDataSourceEventArgs e) { RadGridExternal.DataSource = LoadData(); } protected void RadGridExternal_DataBinding(object sender, EventArgs e) { RadGridExternal.DataSource = LoadData(); }
...You also need to call DataBind() after loading the user control with RadGrid:
Default.aspx.cs
protected override void OnInit(EventArgs e){ const string controlPath = "~/TelerikTestUserControl.ascx"; _externalControl = Page.LoadControl(controlPath); (_externalControl as ITelerikTestUserControl)?.SetData(); ExternalControl.Controls.Add(_externalControl); ExternalControl.DataBind(); //RadGrid2.Rebind();}This solved the render mode issue problem.
Regards,
Rumen
Progress Telerik