Print Page - Propertygrid with Combotree - multiselect with key/values

Title: Propertygrid with Combotree - multiselect with key/values
Post by: chkaufmann on February 11, 2014, 09:44:43 AM

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

Title: Re: Propertygrid with Combotree - multiselect with key/values
Post by: stworthy on February 11, 2014, 08:31:01 PM

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/.

Title: Re: Propertygrid with Combotree - multiselect with key/values
Post by: chkaufmann on February 11, 2014, 11:14:40 PM

Quote from: stworthy on February 11, 2014, 08:31:01 PM

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

Title: Re: Propertygrid with Combotree - multiselect with key/values
Post by: stworthy on February 12, 2014, 12:19:05 AM

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;
		}
	}
}},

Title: Re: Propertygrid with Combotree - multiselect with key/values
Post by: chkaufmann on February 12, 2014, 02:00:38 AM

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

Title: Re: Propertygrid with Combotree - multiselect with key/values
Post by: stworthy on February 12, 2014, 06:11:31 AM

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.

Title: Re: Propertygrid with Combotree - multiselect with key/values
Post by: chkaufmann on February 17, 2014, 06:29:34 AM

Quote from: stworthy on February 12, 2014, 06:11:31 AM

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

Title: Re: Propertygrid with Combotree - multiselect with key/values
Post by: stworthy on February 17, 2014, 08:58:47 AM

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

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: chkaufmann on February 11, 2014, 09:44:43 AM