Selected element style in a list

Discontinued products DHTMLX Touch
#1

Hi,
I’ve got a list of elements, and I’d like to change style of the text in the list’s element that user select. Just for visually help the user to know wich element has selected, before OnItemClick event.

[code]var sessionsType = {
name:“Sessions”,
height:40,
margin:0,
padding:0,
css:“sessions”,
template:function(obj){
var html = ‘

’+obj.data3+’ ‘+obj.hora+’
’;
html += ‘
’;
return html;
}
};

dhx.Type(dhx.ui.list,sessionsType );
[/code]

And then

$$("filmShows").attachEvent("onItemClick",function(id){
var newpage = "https://myfile.php?"+"plan="+this.item(id).id+"&sala="+this.item(id).salados+"&peli="+this.item(id).film
parent.location=newpage;
})

I just want to underline the text before parent.location. Is it possible?

Thank you,

#2

Hi,

do you want to enable selection for the list?

{
view:“list”,
select:true,
…
}

In this case the selected item will be highlighted. Please take a look at the sample

dhtmlxTouch_v10_111114/samples/technical/server/01_loading/04_list_form_auto.html

#3

Hi Alexandra,

if I use view:list, in my type, it becomes invisible, and empty of data. My definition is:

var sessionsType = {
	name:"Sessions",
	height:40,
	margin:0,
	padding:0,
	css:"sessions",
	template:function(obj){
		var html = '<div class="session_text">'+obj.data2+' '+obj.hora+'</div>';
		html += '<div class="item_arrow"></div>';
		return html;
	}
};

dhx.Type(dhx.ui.list,sessionsType );

If I add a select: true, nothing happens. But I don’t know it’s because OnItemClick event occurs, going to another URL, and the “selected” style can’t be seen.

Thank you for your help,
Ruben

#4

Ruben,

view:“list” and select:true should not be set in the type definitiion. select is property of the List component (view).

Please find a code snippet where you defined a view with id “filmShows”. Probably it is your List view. And then add select:true there. Please take a look at the sample:

dhtmlxTouch_v10_111114/samples/technical/server/01_loading/04_list_form_auto.html

#5

Hi Alexandra,

I’ve done it as you say:

{
			id:"filmShows",
			view:"list",
			type:"Sessions",
			scroll:false,
			height:"auto",
			url:"data/sessions.js",
			datatype:"json",
			select:true
		}

But when I click on list element, no “select effect” is done, and then OnItemClick event start. Maybe OnItemClick is very fast and effect cannot be seen?

Thank you for your help,
Ruben

#6

Hi Rubenmgr

Did you find an answer? I know it was a while ago but it looks like your last question got ignored - maybe Alexandra got bored of helping :wink:

I have the same issue. I have an event handler which fires on “onItemClick” and that seems to interfere with the ‘selected’ style change - the event handler works fine in that it changes a view to reflect the current selected list item. If I comment-out the event handler, then items change to a selected state when clicked, (although nothing else happens of course). Looks like I can have one or the other!! driving me mad. I guess what I need to do is extend the standard list click handler, but I can’t find it… any help from Anyone muchly appreciated :slight_smile:

btw Here’s my handler:

$$('topiclist').attachEvent('onItemClick',function(id){ switchView(id, true, false); });

#7

Fixed it.

In my case it was caused by a reference to a non-existant object in my switchView() function. This caused it to fail to return i think.
I diagnosed it the obvious way, by commenting the call to switchView() and replacing that with an alert(‘message’). This showed that both the alert and the CSS style change were working, which made it easy to see where the problem lay.
Hopefully someone else can benefit from this!