Missing calendar icon when applying Custom Theme

[Jonathan]

Hi..

I used the ThemeBuilder, but when I apply the new Theme the Calendar icon is missing from the input text.

The same happens with other controls when a custom theme is applied.

Where is the Calendar Icon ?  How do I apply it?

thx

[Rumen]

Hello,

If the custom skin is build in the Theme Builder app, can you please set:
- the RenderMode property to Lightweight
- and the EnableEmbeddedBaseStylesheet to true?

This way the DatePicker will use font icons and will obtain the base skin along with the icons from the embedded resources in the Telerik assembly.

Regards,
Rumen
Progress Telerik

[Jonathan]

Hi.. 

Those are set.

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

thx again

 

    <td>
                   <telerik:RadDatePicker rendermode="Lightweight"  Skin="Flom" EnableEmbeddedSkins="false" runat="server" ID="RadDatePickerFROM" AutoPostBack="true" Width="100px" Calendar-ShowRowHeaders="false" Calendar-ShowOtherMonthsDays="false" DateInput-EmptyMessage="Start Date" OnSelectedDateChanged="RadDatePickerFROM_SelectedDateChanged">
                     <Calendar ID="Calendar1" runat="server" EnableKeyboardNavigation="true">
                     </Calendar>
                  </telerik:RadDatePicker>
             </td>

 

[Rumen]

Hello,

I can't reproduce the missing icon issue with the provided configuration. Make sure that you are using the latest version of the suite R2 2018.

Please also search for errors in the console as well as in the Network tab of the DevTools console.

Regards,
Rumen
Progress Telerik

[Jonathan]

Hi..

I'm see the following errors any ideas?

400 Error

https://flomportal.azurewebsites.net/Skins/Flom/%3C%=WebResource(%22Telerik.Web.UI.Skins.Flom.Common.loading_small.gif%22)%%3E

https://flomportal.azurewebsites.net/scripts.js 404 (Not Found)

[Rumen]

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

[Jonathan]

I am using an old version. Will upgrade and try again.

Thx again!!!!

[Jonathan]

I upgraded to 2018.2.516.45. But still get the errors.

Looks like it's missing a Gif ?

ttps://flomportal.azurewebsites.net/Skins/Flom/%3C%=WebResource(%22Telerik.Web.UI.Skins.Flom.Common.loading_small.gif%22)%%3E

Also missing > on Grid.

 

Where can I find the GIF?

 

thx

[Jonathan]

Also.. looks terrible with the newer DLL, all kinds of black lines separating the menu and datepicker

[Jonathan]

Where are the font icons?  Seems I missing all of those.

[Rumen]

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

[Jonathan]

Yes.. used the Theme Builder. Just tried again. Created a totally new theme and the icons are missing too..

What next wait for fix?

thx again

[Rumen]

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

[Jonathan]

I have a master page.  Your samples works!

I have the CSS in the master. But the icons still don't show. It is skinned.

I added your page as separate page, no master and it works.

Can't seem to find the issue .. any ideas?

 

[Rumen]

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

[Jonathan]

I lose the icons as soon as the following is called. It's Skinned - but doesn't have the Expand Icon

Your samples work fine.. thx... any ideas?

       //Add the RadGrid instance to the controls
            this.placeholderGrid.Controls.Add(RadGrid1);
   

[Rumen]

Hi there,

Can you go to RadGrid declaration and set RenderMode="Lightweight" and test again? If this does not work, please provide a simple runnable project which showcases the problem with the missing icon.

Regards,
Rumen
Progress Telerik

[Jonathan]

thx!  that was it!!

Why does the Grid effect the icons on the Calendar?

 

[Rumen]

Great! I am glad that the problem is finally resolved!

One of the requirements to use skins is that all the component have the same render mode on the page. Otherwise the mixed rendering imports different base and controls styles which overrides each other and cause problems as explained in the Incorrect or Distorted Appearance article.

Kind regards,
Rumen
Progress Telerik

[Jonathan]

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>

[Rumen]

Hi,

Does the problems go away, if you remove the RadMenu control from the page?

Is the stylesheet for the custom RadMenu CSS file added to the page?

Can you provide a screenshot of the problem?

Best regards,
Rumen
Progress Telerik

[Jonathan]

I resolved it. based on your other responses.. thx

[Rumen]

Great news. 

Can you please be a bit more specific and share exactly which CSS you have moved and where so that your fellow developers learn how to fix similar problems in their apps?

Regards,
Rumen
Progress Telerik

[Jonathan]

Remove the css reference from the child page. Already had them in the master. Not sure why having them in child page would matter.

 

[David]

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.

[Rumen]

You are very welcome, David! Keep up to good work!

 

Regards,
Rumen
Progress Telerik

[M Kumar]

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.

[M Kumar]

its ok , i found to set here  ImageUrl="images/close.png" HoverImageUrl="images/close.png"  in DatePopupButton