var fieldName = 'Name'; // the field name
var opts = $('#tt').datagrid('getColumnOption',fieldName);  // get the specified column option
alert(opts.title);  // the title to display

Use 'formatter' function to format your 'parent' field value. Below is the tutorial:

http://www.jeasyui.com/tutorial/datagrid/datagrid7.php

The 'columns' property is required.

Here is a tutorial on how to create multiple row head for datagrid.

http://www.jeasyui.com/tutorial/datagrid/datagrid9.php

Please correct your code:

Code:

<script type="text/javascript">
        $(document).ready(function() {
            $('.gridview').datagrid({
            title: 'Frozen Columns',
            height: 300,
            frozenColumns: [[
               { field: 'itemid', title: 'Item ID', width: 80 },
               { field: 'productid', title: 'Product ID', width: 80 }
            ]],
            columns:[[ 
                    {field:'code',title:'Code',width:100}, 
                    {field:'name',title:'Name',width:100},
                    {field:'price',title:'Price',width:100,align:'right'}
                ]]
            });
        });
    </script>

Call 'endEdit' method will finish editing action and the row data will be posted to server. In this case, you can get all the editing field value and do some validation:

Code:

onBeforeSave:function(index){
	var nameEditor = $('#tt').edatagrid('getEditor',{index:index,field:'name'});
	var countryEditor = $('#tt').edatagrid('getEditor',{index:index,field:'country'});
	var nameValue = $(nameEditor.target).val(); // get name field value
	var countryValue = $(countryEditor.target).combobox('getValue'); // get country field value, notice that the editor type is combobox
	// do validation about name and country field
	return false; // valiate failure
}

The edatagrid plugin is an extension of standard library, see http://www.jeasyui.com/extension/edatagrid.php for more details.

If use 'edatagrid' plugin, add 'onBeforeSave' event is a good idea.

Usage Example:
$('#tt').edatagrid({
  onBeforeSave:function(index){
    // do the row(index) validate
    return false; // return false to prevent editing action
  }
});

Try the below code, set the 'closed' to true to create a hidden panel and the open it.

    $('#tt').tabs('add',{   
      title:title,
      href: url,
      closable:true,
      closed:true,
      cache:true
   });   

For the first question, set 'cache' property to true to prevent reload page when select tab panel.

For the second question, when create panel with 'href' property, the remote page content will be loaded.
$('#p').panel({
      title: 'My Panel',
      href: xxxx.jsp
});
The code above will create a panel and send a remote request to load content.
Call 'refresh' will reload the panel content again, so a content page request will be sent to remote server again.

Use the remote validatebox to do server side validation, the code looks like this:

Code:

{field:'name',title:'Your Title',width:100,
editor:{
  type:'validatebox',
  options:{
    required:true,
    validType:'url["dovalidate.php","name"]'
  }
}
}

The server side validate logic:

Code:

$name = $_REQUEST['name'];
//your validate code here
echo 'true'; // return true if validate successfully

Another way to do remote validation is to validate before end your editing.

Code:

var ed = $('#tt').datagrid('getEditor',{index:2,field:'name'}); // get the editor
var v = $(ed.target).val(); // get the field value
// do validate now
$.post('...',{name:v},function(result){
  if (result.success){
    $('#tt').datagrid('endEdit',2); // end editing
  }
});

Change your jQuery version to 1.4.4 or update your datagrid plugin from http://www.jeasyui.com/easyui/plugins/jquery.datagrid.js.

The page(datagrid.html) to be loaded cannot contain a body tag. Try the page code below:

Code:

	<table id="tt"></table>
	<script>
		$(function(){
			$('#tt').datagrid({
				url: 'datagrid_data.json',
				title: 'DataGrid - ContextMenu',
				width: 600,
				height: 300,
				fitColumns: true,
				columns:[[
					{field:'itemid',title:"Item ID11s",width:80},
					{field:'productid',title:'Product ID',width:100},
					{field:'listprice',title:'List Price',width:80,align:'right'},
					{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
					{field:'attr1',title:'Attribute',width:150},
					{field:'status',title:'Status',width:60,align:'center'}
				]]
			});
		});
	</script>

Only one element may has a particular id. If two or more elements share the same id, then you cannot find the exactly element by id.
A better way is to set the class attribute to every grid, at later you can use the class selector to find them, just like this:

<table class="mytable easyui-datagrid"></table>

If you want to do some actions with the grid that displayed in selected tab panel, get the selected tab panel first and then find that grid:

Code:

var p = $('#tt').tabs('getSelected'); // get the selected tab panel
var g = p.find('table.mytable'); // get datagrid object
g.datagrid('reload'); // call datagrid method

Update to the version 1.2.4 and you can simply call 'reload' method, don't need to delete the 'id' property.