Mobile Collapsible breaks header icons

[Dani]

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.

 

[Alexander Valchev]

Hi Dan,

You should set the icons through the configuration options:

• http://docs.telerik.com/kendo-ui/api/javascript/mobile/ui/collapsible#configuration-collapseIcon
• http://docs.telerik.com/kendo-ui/api/javascript/mobile/ui/collapsible#configuration-expandIcon

Regards,
Alexander Valchev
Telerik

 

 

[Dani]

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

 

[Alexander Valchev]

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

 

 

[Dani]

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.

[Alexander Valchev]

Hi Dan,

We will log this as an enhancement.

Regards,
Alexander Valchev
Telerik

 

 

[Marco]

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

 

[Teya]

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

[Teya]

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

[Marco]

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>

 

 

 

 

 

[Teya]

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

[Marco]

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