Print Page - How to dynamically set datagrid/treegrid editor

I am using minimal markup in my HTML to define a treegrid.

<div id="treePanelContent">
<table id="myTree"></table>
</div>

I initialize the treegrid with javascript, here's a snippet that shows columns definitions without editors.

$('#myTree').treegrid({
   ...,
   idField:'id',
   treeField:'name',
   frozenColumns:[[
{title:'Id',field:'id',width:100,
formatter:function(value){
   return '<span style="color:red">'+value+'</span>';
},
     editor: 'text'
}
   ]],
   columns:[[
      {field:'description',title:'Name',width:250,rowspan:2},
      {field:'type',title:'Type',width:75,rowspan:2},
      {field:'startDate',title:'Start Date',width:75,rowspan:2},
      {field:'endDate',title:'End Date',width:75,rowspan:2},
   ]],
   ...,
});

The "description" column is special because editing is dependent on the node type in the tree. The node type can be defined as "text", which would use {editor : {type: 'text'}}, or "select", which would use {editor: {type: 'combox', options: { ...}}. The node type is defined in a context menu which allows the user to select which type of node to add to the tree.

How can I set the editor dynamically after the treegrid has been initialized?

When begin to edit a row, the 'onBeforeEdit' event handler can be used to change the editor type for a specify column.

Code:

$('#myTree').treegrid({
	onBeforeEdit:function(row){
		var col = $(this).treegrid('getColumnOption','description');
		if (row.type == 'text'){
			col.editor = 'text';
		} else if (row.type == 'select'){
			col.editor = {
				type: 'combobox',
				options:{
					//...
				}
			}
		}
	}
});

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: pmjenn on January 03, 2013, 05:32:35 AM