CODEWITHSUNDEEP
dojo
Tribhuwan
Tribhuwan

Reputation: 180

Programmatically add and remove icon in dojo

I want to add Icon on a ListItem type which is in LI, How to add this at run time programmatically.

<ul data-dojo-type="dojox.mobile.RoundRectList" class="resultList">
    <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"addAPatientView", icon: "mblDomButtonDarkBlueCheck"'>
        <div class="ListItemTitle">Patient</div>
        <div class="ListItemSubTitle">Complete the new patient profile</div>
    </li>
</ul>


require(["dojo/ready","dojox/mobile/parser",
"dojox/mobile/Icon"], function (ready, Icon) {
});;

Code is written JSfiddle it may not display icon in JSfiddle.

Upvotes: 1

Views: 877

Answers (1)

Craig Swing
Craig Swing

Reputation: 8162

I forked and updated your fiddle. In your fiddle, you were not parsing the widgets.

The documentation uses a stylesheet, so I added the stylesheet. The icon css class you were using was not in that css, so i changed it.

http://dojotoolkit.org/reference-guide/1.8/dojox/mobile/ListItem.html

I also demonstrated how to programatically change the icon.

http://jsfiddle.net/cswing/L7Pwt/

require(["dojo/ready","dijit/registry","dojox/mobile/parser", 
  "dojox/mobile/Icon", "dojox/mobile/RoundRectList", "dojox/mobile/ListItem"], 
function (ready, registry, parser, Icon) {

    ready(100, function(){
        parser.parse();

        // change the icon programatically in 5 seconds
        setTimeout(function(){
            var li = registry.byId("listItem");
            li.set('icon', 'mblDomButtonRedCircleMinus');
        }, 5000);
    });        
});

Upvotes: 1

Related Questions