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

Missing calendar icon when applying Custom Theme

27 Answers 155 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Jonathan
Top achievements
Rank 1
Veteran
Jonathan asked on 03 Jul 2018, 10:37 AM

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

27 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 03 Jul 2018, 11:21 AM
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
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.
0
Jonathan
Top achievements
Rank 1
Veteran
answered on 03 Jul 2018, 11:43 AM

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>

 

0
Rumen
Telerik team
answered on 03 Jul 2018, 11:53 AM
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
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.
0
Jonathan
Top achievements
Rank 1
Veteran
answered on 03 Jul 2018, 12:23 PM

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)

0
Rumen
Telerik team
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.
0
Jonathan
Top achievements
Rank 1
Veteran
answered on 03 Jul 2018, 12:40 PM

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

Thx again!!!!

0
Jonathan
Top achievements
Rank 1
Veteran
answered on 03 Jul 2018, 12:47 PM

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

0
Jonathan
Top achievements
Rank 1
Veteran
answered on 03 Jul 2018, 12:53 PM
Also.. looks terrible with the newer DLL, all kinds of black lines separating the menu and datepicker
0
Jonathan
Top achievements
Rank 1
Veteran
answered on 03 Jul 2018, 01:15 PM
Where are the font icons?  Seems I missing all of those.
0
Rumen
Telerik team
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.
0
Jonathan
Top achievements
Rank 1
Veteran
answered on 03 Jul 2018, 02:23 PM

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

0
Rumen
Telerik team
answered on 03 Jul 2018, 02:51 PM
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.
0
Jonathan
Top achievements
Rank 1
Veteran
answered on 03 Jul 2018, 06:04 PM

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?

 

0
Rumen
Telerik team
answered on 04 Jul 2018, 09:19 AM
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.
0
Jonathan
Top achievements
Rank 1
Veteran
answered on 04 Jul 2018, 01:33 PM

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);
   

0
Accepted
Rumen
Telerik team
answered on 04 Jul 2018, 01:51 PM
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
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.
0
Jonathan
Top achievements
Rank 1
Veteran
answered on 04 Jul 2018, 02:02 PM

thx!  that was it!!

Why does the Grid effect the icons on the Calendar?

 

0
Rumen
Telerik team
answered on 04 Jul 2018, 03:19 PM
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
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.
0
Jonathan
Top achievements
Rank 1
Veteran
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>

0
Accepted
Rumen
Telerik team
answered on 05 Jul 2018, 02:40 PM
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
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.
0
Jonathan
Top achievements
Rank 1
Veteran
answered on 05 Jul 2018, 02:45 PM
I resolved it. based on your other responses.. thx
0
Rumen
Telerik team
answered on 05 Jul 2018, 03:12 PM
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
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.
0
Jonathan
Top achievements
Rank 1
Veteran
answered on 05 Jul 2018, 03:18 PM

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

 

0
David
Top achievements
Rank 1
Veteran
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.

0
Rumen
Telerik team
answered on 02 Dec 2020, 07:58 PM

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

 

Regards,
Rumen
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
M Kumar
Top achievements
Rank 1
Veteran
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.
0
M Kumar
Top achievements
Rank 1
Veteran
answered on 15 Jan 2021, 05:54 AM
its ok , i found to set here  ImageUrl="images/close.png" HoverImageUrl="images/close.png"  in DatePopupButton
Tags
Calendar
Asked by
Jonathan
Top achievements
Rank 1
Veteran
Answers by
Rumen
Telerik team
Jonathan
Top achievements
Rank 1
Veteran
David
Top achievements
Rank 1
Veteran
M Kumar
Top achievements
Rank 1
Veteran
Share this question
or