Populating active richselect element within an group list

Discontinued products DHTMLX Touch
#1

Hi all,

I’m trying to do something quite complex so please feel free to tell me its impossible!

I am trying to create a grouplist with several active components. What I’m trying to do is allow the user to see a grid, where the top element is actually a richselect element. Changing this element changes what they see in the rest of the grid (which will resemble a legend).
The reason I’m doing this as a grouplist is because each of these logically belong to a group which the user selects (and also has a checkbox associated with it… for extra fun.

I’ve created the richselect element as an active component of the grouplist, but cant figure out a way to initalize it or populate it with data (or even set its id for that matter).

Any help in this matter would be appreciated. I really am not clear on how the common.object() creation method works.

Below is a code snippet.

var cbcData = [	{title:"DH Properties",id:"dwelling", cbcType:"layer", item: [
		{title:"Category", id:"dwellingPropCategory", cbcType:"category"}
	]}
];

dhx.protoUI({
	name: "activelist",
}, dhx.ui.grouplist, dhx.ActiveContent);

dhx.ready(function(){
	dhx.ui({
		rows:[
			{view: "activelist",
			datatype: "json",
			width: 300,
			height: 260,
			data: cbcData,
			select: false,
			id: "list",
			activeContent: {checkbox
				checkbox: {
					view: "checkbox",
					width: 40
				},
					catSelect:{
					view:"richselect",
					value:1, 
					title: "Catagory",
					width: 300,
					 data: [{id:1, value:"Property Category"}, {id:2, value:"Dwelling Category"}]
				}
			},
			type: {
				templateItem: function(obj,common) {
					var css = obj.css || "";
					var cb_cls = "checkbox";
					var icon_cls = "icon";
					var title_cls = "title";
					if (css) {
						cb_cls += " checkbox_"+css;
						icon_cls += " icon_"+css;
						title_cls += " title_"+css;
					}
					if(obj.cbcType == "layer"){
						return "<div class='"+cb_cls+"'>" + common.checkbox(obj,common) + "</div>" +
						"<div class='"+icon_cls+"'" +
							"></div>" + "<div class='"+title_cls+"'>" + obj.title + "</div>";
					}
					else if(obj.cbcType == "category"){
						return "<div>" + common.catSelect(obj, common) + "</div>" + "<div class='"+title_cls+"'>" + obj.title + "</div>";
					}
					else if(obj.cbcType == "legend"){
						return "<div class='"+icon_cls+"'" + (obj.image ? "style='background:url(../housing-trunk/webapps/hagis/src/main/webresources/client/images/"+obj.image+") no-repeat'" : "") + 
							"></div>" + "<div class='"+title_cls+"'>" + obj.title + "</div>";
					}
							},
					templateGroup: function(obj,common){
					var css = obj.css || "";
					var cb_cls = "checkbox";
					var icon_cls = "icon";
					var title_cls = "title";
					if (css) cb_cls += " checkbox_"+css;
					return "<div class='"+cb_cls+"'>" + common.checkbox(obj,common) + "</div>" +
					"<div class='"+icon_cls+"'" + (obj.image ? "style='background-image:url("+obj.image+")'" : "") + "></div>" +
					"<div" + (obj.css ? (" class='"+obj.css+"'") : "") +">" + obj.title + "</div>";
					},
				templateBack: function(obj){
					var css = obj.css || "";
					return "<div" + (obj.css ? (" class='"+obj.css+"'") : "") +">" + obj.title + "</div>";
				}
			}
		}]
	});

Thanks,

Dan

#2

So the final UI have multiple richselects, right?
Because if you are expecting to have only one - it will be better to create it as a separate view in the layout.

Adding richselects to elements of lists can be complicated, but you can use something like

[code]{
id:“mylist”
view:“grouplist”,
template:"#value# #categoryName#",
…
}

$$(‘mylist’).on_click.category = function(e, id, target){
//this - list
//id - related item
$$(‘some_popup’).show();
}[/code]

Above code will add category box in the item, and when user will click on category - it will open popup ( which can hold list of options or anything else )

#3

Oh wow… now i’ve never seen that before!
Could you walk through that for me… How does “on_click.category” work? Does that work for any class or is there something special about category?
I also cant seem to get the onclick working…

#4

Yep, any container with css class in the list|dataview|pagelist|grouplist|grid can have its own handler defined in such way.

component.on_click.{css class name} = function(e, id, target){ ... }

Sample of usage is attached.
touchsample.zip (86.1 KB)

#5

That is quite funky!
Though I just realized that it only works for the first class defined.
eg. if you have multiple classes, it only picks up the first one.