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

Losing Font Icon when changing button text

1 Answer 8 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Top achievements
Rank 1
perico asked on 08 Sep 2016, 04:07 PM


I have a listview with 4 buttons 

01.<ul data-role="listview" id="myTripsView" data-inset="true">
02.       <li class="form-content-item" id="bt1">
03.           <i></i><a data-role="button" id="button1" data-animated="true" data-icon="bomb" class="button_red" data-click="myFunction1">MyTxt 1</a>
04.       </li>
05.       <li class="form-content-item" id="bt2">
06.           <i></i><a data-role="button" id="button2" data-animated="true" data-icon="pitch" class="button_blue" data-click="myFunction2">MyTxt 2</a>
07.       </li>
08.       <li class="form-content-item" id="bt3">
09.           <i></i><a data-role="button" id="button3" data-animated="true" data-icon="bell" class="button_orange" data-click="myFunction3">MyTxt 3</a>
10.       </li>
11.       <li class="form-content-item" id="bt4">
12.           <i></i><a data-role="button" id="button4" data-animated="true" data-icon="fire" class="button_green" data-click="myFunction4">MyTxt 4</a>
13.       </li>
14.   </ul>

I want to change my button text when i click on it so i use this code

01.var pressBt1 = 0;
03.function myFunction1() {
04.    var property = document.getElementById("button1");
05.    if (pressBt1 == 1) {
06.        property.className = "button_red km-widget km-button";
07.        property.textContent = "MyTxt 1";
08.        pressBt1 = 0;
09.    }
10.    else {
11.        property.className = "button_grey km-widget km-button";
12.        property.textContent = "MyTxt 1 bis";
13.        pressBt1 = 1;
14.   }

That works but when the button text is changed, my font icon disappears.

Do you have any suggestions ?

Thank you



1 Answer, 1 is accepted

Sort by
Telerik team
answered on 12 Sep 2016, 09:33 AM
Hi Perico,

This happens because with the textContent setting, you overwrite the button's inner HTML. When instantiated, the Button widget generates additional HTML and when it has an icon, the HTML output of this button
<a data-role="button" data-icon="add" data-bind="events:{click: changeText}">Click me!</a>

looks like this:
<a data-role="button" data-icon="add" data-bind="events:{click: changeText}" class="km-widget km-button">
    <span class="km-icon km-add"></span>
    <span class="km-text">Click me!</span>

To change the text of the button, you need to modify only the text content of the second span element:
changeText: function (e) {
    $(".km-text").text("Good job!");

Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
General Discussions
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question