Print Page - editable treegrid issue

Title: editable treegrid issue
Post by: rahul.sanjose on November 12, 2012, 06:26:22 PM

The edit functionality is not working. Is this a bug or am I doing something wrong?

When I click on edit by selecting a row, I see the node.id in the alert, but I am not able to edit the row. Any help will be greatly appreciated.

<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
   <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
   <script>
$('#tt').treegrid({
         url:'data.json',
         idField:'Dashboard',
         treeField:'Dashboard',
         columns:[[
            {title:'Dashboard',field:'Dashboard',width:60},
            {field:'URL',title:'URL',width:200}
         ]]
     });

      function editNode(){
         var node = $('#tt').treegrid('getSelected');
         if (node){
            alert(node.id);
            $('#tt').treegrid('beginEdit',node.id);
         }
      }


   </script>
</head>

<body>
   <h2>TreeGrid</h2>

   <div style="margin:10px 0;">
      <a href="#" onclick="remove()">Remove</a>
      <a href="#" onclick="append()">Append</a>
      <a href="#" onclick="editNode()">Edit</a>
      <a href="#" onclick="getSelected()">GetSelected</a>
   </div>

   <table id="tt" class="easyui-treegrid" style="width:600px;height:400px"
data-options="url:'data.json',idField:'Dashboard',treeField:'Dashboard'">
      <thead>
         <tr>
            <th data-options="field:'Dashboard',width:180">Task Name</th>
            <th data-options="field:'URL',width:60,align:'right'">Persons</th>
         </tr>
      </thead>
   </table>

Title: Re: editable treegrid issue
Post by: stworthy on November 13, 2012, 01:01:57 AM

The field 'Dashboard' is the id field you declared. Pass its value to 'beginEdit' method to begin an editing operation.

Code:

      function editNode(){
         var node = $('#tt').treegrid('getSelected');
         if (node){
            alert(node.Dashboard);
            $('#tt').treegrid('beginEdit',node.Dashboard);
         }
      }

Title: Re: editable treegrid issue
Post by: rahul.sanjose on November 13, 2012, 11:53:16 AM

I tried that as well. Still Edit is not working :(

Code:

<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
	<script>
	    $('#tt').treegrid({  
			url:'data.json',  
			idField:'Dashboard',  
			treeField:'Dashboard',
			columns:[[  
				{title:'Dashboard',field:'Dashboard',width:60},  
				{field:'URL',title:'URL',width:200}  
			]]
	    }); 
		
		function editNode(){
			var node = $('#tt').treegrid('getSelected');
			if (node){
				alert(node.id);
				$('#tt').treegrid('beginEdit',node.Dashboard);
			}
		}	
	</script>
</head>

<body>
	<h2>TreeGrid</h2>
	
	<div style="margin:10px 0;">
		<a href="#" onclick="remove()">Remove</a>
		<a href="#" onclick="append()">Append</a>
		<a href="#" onclick="editNode()">Edit</a>
		<a href="#" onclick="getSelected()">GetSelected</a>
	</div>

	<table id="tt" class="easyui-treegrid" style="width:600px;height:400px"  
        data-options="url:'data.json',idField:'Dashboard',treeField:'Dashboard'">  
		<thead>  
			<tr>  
				<th data-options="field:'Dashboard',width:180">Task Name</th>  
				<th data-options="field:'URL',width:60,align:'right'">Persons</th>
			</tr>  
		</thead>  
	</table>

Title: Re: editable treegrid issue
Post by: stworthy on November 13, 2012, 01:17:14 PM

Please refer to http://www.jeasyui.com/demo/main/index.php?plugin=TreeGrid&theme=default&dir=ltr&pitem=Editable%20TreeGrid

Title: Re: editable treegrid issue
Post by: pmjenn on December 02, 2012, 05:24:28 AM

Maybe I missed something, but I couldn't see where you have defined an editor for the fields you want to edit.

beginEdit starts the editor for the treegrid, but if no editor is defined, nothing happens.

It can be done in html:

<th data-options="field:'name',width:180,editor:'text'">Task Name</th>

It can be done when declaring columns for the treegrid:

      ...,
      columns:[[
         {field:'description',title:'Name',width:250,rowspan:2,editor:'text'},
         ...
      ]],
      ...

I'm pretty sure there are other ways to do it as well. There are several types of editors, or you can write your own.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: rahul.sanjose on November 12, 2012, 06:26:22 PM