editable treegrid issue

EasyUI Forum

September 15, 2025, 06:46:10 AM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > editable treegrid issue

Pages: [1]

« previous next »

Author

Topic: editable treegrid issue (Read 16971 times)

rahul.sanjose

Newbie

Posts: 8

editable treegrid issue

« 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>


	Logged

stworthy

Administrator
Hero Member

Posts: 3581

Re: editable treegrid issue

« Reply #1 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);
         }
      }


	Logged

rahul.sanjose

Newbie

Posts: 8

Re: editable treegrid issue

« Reply #2 on: November 13, 2012, 11:53:16 AM »

I tried that as well. Still Edit is not working Sad

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>


	Logged

stworthy

Administrator
Hero Member

Posts: 3581

Re: editable treegrid issue

« Reply #3 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


	Logged

pmjenn

Newbie

Posts: 9

Re: editable treegrid issue

« Reply #4 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.


	Logged

Pages: [1]

« previous next »