Filter with material skin inside RadPanelBar - no buttons

4 posts, 0 answers
  1. Beth
    Beth avatar
    5 posts
    Member since:
    Jan 2014

    Posted 12 Mar Link to this post

    Hello,

    When I change the skin of a RadFilter to "Material", the button images disappear only if the RadFilter is nested within a RadPanelBar. The Lightweight render mode is applied system-wide along with the skin via web.config. I have attached an image showing the issue. Any ideas what I am doing wrong? The button images appear when I take the RadFilter out of the RadPanelBar. Here is a snippet.

     

    <telerik:RadPanelBar ID="pbrAdvSearch" runat="server" Width="100%" ExpandMode="MultipleExpandedItems"
                       RenderMode="Lightweight">
                       <Items>
            <telerik:RadPanelItem Expanded="True" Text="Categories">
                               <ContentTemplate>
                                   <p>
                                       To search by category, click the <strong>Add Category</strong> button. Search for multiple categories by clicking this button again. If your multi-category search requires all categories to exist, select <strong>AND</strong>; otherwise, select <strong>OR</strong>.
                                   </p>
                                   <br />
                                   <telerik:RadFilter RenderMode="Lightweight" runat="server" ID="rfCategories"
                                       ExpressionPreviewPosition="Bottom" ShowApplyButton="true" AddExpressionToolTip="Add a Category">
                                       <FieldEditors>
                                           <customEditors:TreeFieldEditor FieldName="Category" DataTextField="CategoryDesc"
                                               DataValueField="CategoryID" DataFieldID="CategoryID" DataFieldParentID="Parent" />
                                       </FieldEditors>
                                   </telerik:RadFilter>
                               </ContentTemplate>
                           </telerik:RadPanelItem>                   
                       </Items>
                   </telerik:RadPanelBar>

     

  2. Eyup
    Admin
    Eyup avatar
    4011 posts

    Posted 17 Mar Link to this post

    Hello Beth,

     

    I've prepared a sample RadPanelBar web site using the provided code to test this behavior. The RadFIlter icons are loaded on my side both when the filter is inside or outside the panel bar. You can download and run the attached web site using the following steps to verify that it works as expected on your side, too:

    1. Open Visual Studio
    2. File menu
    3. Open option
    4. Select Web site and target the web site folder.
    5. Include a Bin folder with the Telerik dll assemblies.

     

    Regards,
    Eyup
    Progress Telerik

    Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.
  3. Beth
    Beth avatar
    5 posts
    Member since:
    Jan 2014

    Posted 17 Mar in reply to Eyup Link to this post

    I discovered that I was able to see the button images again if I modified the font-family for the buttons, which was being set to "Material icons". I had to do this:

     

    .RadPanelBar_Material .p-icon::before {
        font-family: inherit !important;
    }

  4. Eyup
    Admin
    Eyup avatar
    4011 posts

    Posted 19 Mar Link to this post

    Hi Beth,

     

    I'm glad the issue is now resolved and thank you for sharing your solution with our community.

     

    Regards,
    Eyup
    Progress Telerik

    Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.
Back to Top