Change listView item's class dynamically


#1

Hi, I’m trying to use the itemTap even on one of my listViews to change the appearance of the tapped listView item. I have successfully identified the index of the item tapped, and have even successfully altered the item’s properties in the items array, but it’s not rerendering the list on the screen.

Essentially I am binging the class property to a class property within my object in the array, and updating it dynamically has no effect on what’s displayed on screen.

I’ve confirmed that I am altering the array as I log the new values to the console (class and item_name) and they are correct - just not updating the listView itself.

Does anyone know how to go about doing this?


#2

You could maybe use thehnik that is used here:


just instead of toggling visibilty you could toggle class :slight_smile:


#3

Thanks so much @marko89 I’m going to try this and see if it works. Could you perhaps send the .ts to me in .js - I don’t know TS very well and am worried I implement it incorrectly. Apologies bud!


#4
const observableModule = require('data/observable');

var Item = (function (_super) {
    __extends(Item, _super);
    function Item(props, isItemVisible) {
        var _this = _super.call(this) || this;
        _this.isItemVisible = isItemVisible;
        return _this;
    }
    Contact.prototype.toggleVisibility = function (args) {
        this.set("isItemVisible", !this.isItemVisible);
    };
    return Item;
}(observableModule.Observable));

Then you just create Item like

let visibility = false;
const item = new Item({}, visibility);

#5

Thanks so much, going to try it tonight still! :slight_smile: