Propertygrid with Combotree - multiselect with key/values

[chkaufmann]

In a propertygrid I want to create a combotree control with multiselect values.
The items are all defined with id/name (http://www.geologix.ch/downloads/testdata.json). On my server I only save the selected values, e.g. "1,22,4". As display value I would like to show the names ("First, Second Child, Third").

What is the correct approach to implement this in a general way? Where do I have to add the functionality?

cu Christian

[stworthy]

You will have to extend or override the combotree editor to support multiple editing. The simplest way is to download the updated datagrid plugin from http://www.jeasyui.com/easyui/plugins/jquery.datagrid.js and include it to the page.

Code:

<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/plugins/jquery.datagrid.js"></script>
<script type="text/javascript" src="../../plugins/jquery.propertygrid.js"></script>

For more information please refer to this example http://jsfiddle.net/fup75/.

[chkaufmann]

For more information please refer to this example http://jsfiddle.net/fup75/.

After done editing there are two things that don't work
- only one item is showed as selected
- the id and not the text is displayed after editing

cu Christian

[stworthy]

The tree nodes must have 'id' and 'text' properties, otherwise you have to use 'loadFilter' function to convert to standard node data.

Code:

{"name":"ComboTree","group":"Marketing Settings","editor":{
	"type":"combotree",
	"options":{
		url: ...,
		multiple:true,
		loadFilter:function(data,parent){
			var toDo = [];
			for(var i=0; i<data.length; i++){
				toDo.push(data[i]);
			}
			while(toDo.length){
				var node = toDo.shift();
				node.text = node.name;
				if (node.children){
					toDo = toDo.concat(node.children);
				}
			}
			return data;
		}
	}
}},

[chkaufmann]

But your JSFiddle example doesn't work

- click on ComboTree; Tree apears -> ok
- Select "Second" and "Third" -> ok
- click somewhere else do close the tree -> NOT ok:
  * id displayed instead of text
  * only one item stays selected

cu Christian

[stworthy]

Please refer to the attached example, it works well. If the issue continues, please try to clear your browser's cache and try it again.

[chkaufmann]

Please refer to the attached example, it works well. If the issue continues, please try to clear your browser's cache and try it again.

The attached example solved the multi select problem (http://www.jeasyui.com/easyui/jquery.easyui.min.js). But in this version of EasyUI, button icons are not placed correctly. Is it possible to get an updated version?

cu Christian

[stworthy]

If you include the easyui file from site, please also include the corresponding theme file from http://www.jeasyui.com/easyui/themes/default/easyui.css