Losing Font Icon when changing button text

Thread is closed for posting
2 posts, 1 answers
  1. perico
    perico avatar
    28 posts
    Member since:
    Dec 2006

    Posted 08 Sep 2016 Link to this post


    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



  2. Answer
    Tsvetina avatar
    2481 posts

    Posted 12 Sep 2016 Link to this post

    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) {
        $(e.target).find(".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
Back to Top