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

Mobile Collapsible breaks header icons

11 Answers 57 Views
Collapsible
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 2
Dan asked on 02 Feb 2016, 05:09 PM

Sample: http://dojo.telerik.com/OCURa

 

I'm trying to use a mobile Collapsible widget with icons in the header, but toggling the collapsed state will break those icons marked with the km-icon class. Icons in the body are unaffected.

 

11 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 03 Feb 2016, 05:39 PM
Hi Dan,

You should set the icons through the configuration options:


Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Dan
Top achievements
Rank 2
answered on 03 Feb 2016, 05:57 PM

Alexander,

Thank you for the reply and the information. That's great to know, but not quite what I was looking to do. Sorry, my example was perhaps too simplistic. We use multiple icons in the header, not just the ones for the collapse/expand icons, to indicate various quick-glance statuses. An updated sample is here: http://dojo.telerik.com/OCURa/2

Thanks,

Dan

 
0
Accepted
Alexander Valchev
Telerik team
answered on 05 Feb 2016, 12:35 PM
Hello Dan,

This will not work if you are using Kendo icons or generally elements with km-icon class because the current implementation manipulates the elements with km-icon class that are located in the widget's header.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Dan
Top achievements
Rank 2
answered on 05 Feb 2016, 03:53 PM
Okay, that's what I figured. Can I suggest that the mobile widget be updated to support this functionality in a future release? Thanks again for the help.
0
Alexander Valchev
Telerik team
answered on 08 Feb 2016, 05:52 PM
Hi Dan,

We will log this as an enhancement.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Marco
Top achievements
Rank 1
answered on 15 Jan 2020, 03:54 PM

Hi Alexander,

Is it possible to add an icon to the header almost 4 years later? I can't find any documentation how to get this done.

Kind Regards,

Marco

 

0
Teya
Telerik team
answered on 17 Jan 2020, 09:40 AM

Hi Marco,

I am stepping in for my colleague Alexander, who is currently out of the office.

You can check the icons that you can use in the following demo:

https://demos.telerik.com/kendo-ui/m/index#mobile-styling/icons

The icons are added with the following HTML:

<i class="km-icon km-icon-name"></i>

I hope this would be helpful.

 

Regards,
Teya
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Teya
Telerik team
answered on 17 Jan 2020, 09:46 AM

Hello Marco,

In my previous reply I forgot to share with you the following article from our documentation which goes into more details regarding the mobile icons:

https://docs.telerik.com/kendo-ui/controls/hybrid/styles/icons#list-of-additional-hybrid-font-icons

Regards,
Teya
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Marco
Top achievements
Rank 1
answered on 17 Jan 2020, 10:01 AM

Hello Teay,

I'm aware of the documentation. The problem with the collapsible is, that if you want to display an icon in front of the header text, you MUST use the collapse and expand icon properties. If i use your approach, something weird happens. When I expand the collapsible, i get the same icon that I have specified under data-icon-expand property twice. See attachment.

 

My html:

<div id="afsprakenCollapsible" data-role="collapsible" data-inset="true" data-expand-icon="kalender mijnVrumunCollapsibleIconHeaderAfsprakenExpand" data-collapse-icon="kalender mijnVrumunCollapsibleIconHeaderAfsprakenCollapse">
         <h3>
             <i class="km-icon km-icon-camera"></i>
             Afspraken
         </h3>
         <ul id="afsprakenListView" data-role="listview"></ul>
     </div>

 

 

 

 

 

0
Teya
Telerik team
answered on 17 Jan 2020, 02:37 PM

Hi Marco,

Excuse me for the misunderstanding. As far as I understand, you would like to replace the default arrow icon of the collapsible element with a different one. Is this correct? If you want to change the toggle down and up icons, you can set it with the attributes as you have stated in your reply: 

data-expand-icon="camera" data-collapse-icon="camera"

Without having to add the icon's HTML inside the container as well. I have updated the Dojo you have sent me with an implementation of the example:

http://dojo.telerik.com/IQAlaJAr

However, if you would like to add other icons as well, I am afraid this is currently not possible, as all of the icons within the collapsible container are being replaced with the icons specified in the expand and collapse attributes.

Regards,


Teya
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Marco
Top achievements
Rank 1
answered on 17 Jan 2020, 02:44 PM

Hi Teya,

Thanks for the effort. I indeed already replaced the toggle up and down arrows with other icons. It's the only decent way to get an icon before the heading tag of the collapsible control.

Kind Regards,

Marco

Tags
Collapsible
Asked by
Dan
Top achievements
Rank 2
Answers by
Alexander Valchev
Telerik team
Dan
Top achievements
Rank 2
Marco
Top achievements
Rank 1
Teya
Telerik team
Share this question
or