Making listview selectable

0
I need to make listview selectable like gridview. By default focus only works. I tried adding a javascript snippet and used addEventListener to add class ‘selected’ when a ‘mx-listview-item’ which is the class of <li> is clicked. But I get error that addEventListener is not a function when I do: var listview = document.getElementsByClassName("customList")[0]; var listitem = listview.getElementsByClassName("mx-listview-item"); listitem.addEventListener("click",function(e) { console.log("Click Worked"); listitem.classList.toggle("selected"); }); So I had to put it in a loop and add event listener one by one: var listview = document.getElementsByClassName("customList")[0]; var listitems = listview.getElementsByClassName("mx-listview-item"); console.log("listitems lenght:" + listitems.length); var i; for(i=0; i < listitems.length; i++) { var listitem = listview.getElementsByClassName("mx-listview-item")[i]; listitem.addEventListener("click",function(e) { console.log("Click Worked"); listitem.classList.toggle("selected"); }); } But only the last element is getting selected as the ‘listitem’ contains only the last element. Help me fix this issue or suggest any better way to make listview selectable. Thanks in advance!
asked
4 answers
5

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.

answered
3

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.

answered
0

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

answered
0

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

answered