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

Missing calendar icon when applying Custom Theme

27 Answers 886 Views

Calendar

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

27 Answers, 1 is accepted

answered on 03 Jul 2018, 11:43 AM

raddatepicker.png

Hi..

Those are set.

Any ideas? Any why does the width prop not work?

thx again

answered on 03 Jul 2018, 12:30 PM

Hello,

The WebResource in the errors indicates that the calendar is still configured to use Classic rendering, because the Lightweight one does not use image sprites, but font icons.

Can you please:
- verify that the Telerik.Web.UI version that you are using in your project supports Lightweight rendering. Right click in the browser -> select view source and search for <!-- 20 to find the used version. Another option is to right click on the dll file in Windows Explorer and examine its properties to find the version.
- perform a global search for all RenderMode settings in the project and ensure that the value of all of them is set to Lightweight.
- ensure that your Internet Explorer is loading the page in native mode (but not in compatibility mode).

Best regards,
Rumen
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 03 Jul 2018, 02:06 PM

Hi,

Is the custom skin named Flom generated by the Theme Builder (produces skins for the Lightweight rendering) or the Style Builder (produces skins for the classic rendering)?

I personally recommend using the Theme Builder to create custom skins, since the classic rendering is obsolete and the Style Builder is outdated.

If however the skin is made by the Theme Builder and it contains references to WebResource images then this is a bug. Can you please provide the steps to reproduce the issue?

Regards,
Rumen
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 03 Jul 2018, 02:51 PM

Recording-54.zip

Flom-Custom-Skin.zip

Hi there,

I tested the reported scenario and was unable to find a bug.

I created a new Flom skin with the Theme Builder and attached a video demonstrating its registration in my test project. The font icon for the calendar input is rendered from the embedded base resources even if the generated by the Theme Builder CSS skin files are not added to the project as you can see in the project.

For your convenience I have also attached my test project. Please, compare it with yours and search for differences. There should be something that forces the Classic rendering.

Best regards,
Rumen
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 04 Jul 2018, 09:19 AM

Flom-Custom-Skin-V2.zip

Recording-55.zip

Hey there,

On my end the masterpage scenario works as expected too. Can you please test the attached web site project and see the video demonstration?

I am curious to learn what might be causing the problem on your side. Please compare the masterpages in yours and mine projects and let me know what the differences are. You can also start to remove contents and controls from your masterpage until the issue gets resolved. This way we can pinpoint the reason for the problem faster.

Best regards,
Rumen
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Accepted

answered on 04 Jul 2018, 03:56 PM

But, now have another problem the RadWindow right below my RadMenu will not skin. Can't figure that one out!

Any ideas? thx!

<telerik:RadMenu rendermode="Lightweight" Skin="Flom" EnableEmbeddedSkins="false" runat="Server" ID="RadMenu" EnableShadows="true" EnableRoundedCorners="true" OnClientItemClicked="openWinNavigateUrl"
Style="float: none; position: absolute; top: 50px; z-index: 2000" Width="100%" CssClass="RadMenu">
<Items>

<telerik:RadMenuItem IsSeparator="true" />

<telerik:RadMenuItem runat="server" Text="Purchase Orders" NavigateUrl="PurchaseOrders.aspx"/>

<telerik:RadMenuItem IsSeparator="true" />

<telerik:RadMenuItem runat="server" Text="Shipment History" NavigateUrl="ShippingHistory.aspx"/>

<telerik:RadMenuItem IsSeparator="true" />

<telerik:RadMenuItem runat="server" Text="Payments" NavigateUrl="" />

<telerik:RadMenuItem IsSeparator="true" />

<telerik:RadMenuItem runat="server" Value="About" Text="About" />

<telerik:RadMenuItem IsSeparator="true" />

</Items>
</telerik:RadMenu>


<telerik:RadWindowManager ID="RadWindowAbout" rendermode="Lightweight" Skin="Flom" EnableEmbeddedSkins="false" runat="server" Animation="FlyIn" Modal="True" />

<telerik:RadWindow Skin="Flom" EnableEmbeddedSkins="false" rendermode="Lightweight" runat="server" ID="RadWindow_NavigateUrl" NavigateUrl="About.aspx" Height="300" Width="350" EnableShadow="true" IconUrl="images/GlobeSmall.png"
Modal="true" Behaviors="Close" ShowContentDuringLoad="true" RestrictionZoneID="NavigateUrlZone" Animation="FlyIn" VisibleStatusbar="False">
</telerik:RadWindow>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function openWinNavigateUrl(sender, args) {

var itemValue = args.get_item().get_value();
if (itemValue == "About") {
$find("<%=RadWindow_NavigateUrl.ClientID %>").show();
}
}

</script>

</telerik:RadCodeBlock>

Accepted

answered on 02 Dec 2020, 06:56 PM

I was able to fix a similar issue because of this thread.

I have a formtemplate on a radgrid with multiple radcomboxes and 2 radTextboxes.

I then added 2 radDatePickers and both had the calendar icon not showing.

So after reading this thread, I checked every rad object to make sure the rendermode

was Lightweight. The 2 radTextBoxes didnt have a rendermode so I set them

to Lightweight and then the icons showed up on the datepickers. Problem solved.

Thank you for this. It saved me much headache and time.

answered on 15 Jan 2021, 04:34 AM

Hi,
I have a same problem, which custom theme build using themebuilder.telerik.com for raddatepicker , which is in combined with more than 100+ rad controls in one page not appearing calendar icon, here the screenshot http://prntscr.com/wnxf08 , but same raddatepicker control with same custom css in plan page, it working fine Ss http://prntscr.com/wnxh6e, is it mandatory set all Telerik control for render mode as Lightweight like textbox, combobox, RadTabStrip etc... ?
Is it any way to set icon from code behind ? only that calendar icon on right side of that control.