If it's only about making it selectable, styling works well by adding a container in the listview item with a custom class. Add '.mx-listview-item.selected .customclass’ in the custom CSS file and customize away!
If it's about clickable instead of selectable, you could also use the very simple but excellent clickable container widget.
Hi Gifton,
If the code Sytze and Ockert are posting does not make any sense to you, I’d advice not to use it: even if you get it to work, as soon as the requirements or platform changes and it breaks, you will not be able to fix it.
You can stick within default mendix functionality by (for instance) create and link an object between your listview object and your user, which can say something about the relationship (in your case, if the user has selected the item). Based on the ‘isSelected’ boolean on this relationship object, you could for instance show an image (checkmark) or text (“Selected”) on the list item. This can be triggered by setting the isSelected boolean in the on-click microflow of the listview.
Hi Gifton
The following does not include your on click, but is some other solution to extending what is rendered within the mxui.widget.ListView instance
//get widget
var wid=
dijit.byNode(
dojo.query(
'.mx-listview'
)[0]
);
wid._itemList[0].domNode
//extend if not extended
if(wid._renderDataOrig==null){
console.log(wid.id+": Extending _renderData");
//add util function to manipulate _itemList members
wid.patchListItems=function(){
this._itemList.forEach(
function(itm,itmidx){
if(itm.onClickOrig==null){
console.log(itm.id+": Extension executed");
itm.onClickOrig=itm.onClick;
itm.onClick=function(){
mx.ui.info(this.id+": Clicked");
this.onClickOrig();
}
}else{
console.log(itm.id+": Already Extended");
}
}
)
}
//extend _renderData
wid._renderDataOrig=wid._renderData;
wid._renderData=function(){
console.log(this.id+": Extension executed");
this._renderDataOrig();
//execute util function to manipulate _itemList members after rendition
this.patchListItems();
}
//execute util function to manipulate _itemList members after initially
wid.patchListItems();
}else{
console.log(wid.id+": Already Extended");
}
Of course you would implement at the patch function iterator to implement your click stuff, generally speaking you can backup the original event listeners, then inject your own functions to perform something, thereafter calling the backed up version
Hi Gifton,
If you need a data view to show the details of the selected item of the list view, it is recommended to use https://docs.mendix.com/refguide/listen-to-grid-source
This will automatically add selected styling to your list view if an item is select.
Cheers, Andries