Print Page - About value of combobox of editable datagrid

Title: About value of combobox of editable datagrid
Post by: nyr_jack on September 13, 2012, 01:06:15 AM

$(function(){
   var lastIndex;
   $('#serviceTargetGrid').datagrid({
      url:'data/service_data.json',
      title:'',
      align:'center',
      //fit: true,
      width:800,
      height:'auto',
      remoteSort:false,
      fitColumns:false,
      nowrap:true,
      striped: true,
border: true,
singleSelect:true,
rownumbers:true,
      idField:'resourceid',
      sortName:'resourceid',
      columns:[[
         {field:'ck',checkbox:true},
         {field:'resourceid',title:'ID',width:80,sortable:true,align:'left',editor:'validatebox'},
         {field:'servicetypename',title:'servicetype',width:150,sortable:true,align:'left',
            editor:{
               type:'combobox',
               options:{
                  url:'data/servicetype_data.json',
                  valueField:'servicetypeid',
                  textField:'servicetypename',
                  panelHeight:'auto',
                  editable:false
               }
            }
         },

up is my scripts,Now the combobox display valueField when I finished edit and click another row, so I want to know how can combobox display the textField when I finished edit and click another row?
please help,hurry!!!!!

Title: Re: About value of combobox of editable datagrid
Post by: stworthy on September 13, 2012, 05:57:25 PM

1. Suppose that the data returned from url('data/service_data.json') contains 'servicetypeid' and 'servicetypename' fields. Please change the columns definition as:

Code:

$('#serviceTargetGrid').datagrid({
	columns:[[
		{field:'ck',checkbox:true},     
		{field:'resourceid',title:'ID',width:80,sortable:true,align:'left',editor:'validatebox'},
		{field:'servicetypeid',title:'servicetype',width:150,sortable:true,align:'left',
			editor:{
			   type:'combobox',
			   options:{
				  url:'data/servicetype_data.json',
				  valueField:'servicetypeid',
				  textField:'servicetypename',
				  panelHeight:'auto',
				  editable:false
			   }   
			},
			formatter:function(value,row){
				return row.servicetypename;
			}
		}
	]]
});

2. Before finish editing a row, update the 'servicetypename' field value for that row:

Code:

var index = ...	// the editing row index
var ed = $('#serviceTargetGrid').datagrid('getEditor', {
	index: index,
	field: 'servicetypeid'
});
if (ed){
	var text = $(ed.target).combobox('getText');	// get combobox text
	var row = $('#serviceTargetGrid').datagrid('getRows')[index];
	row.servicetypename = text;	// update field value
}
$('#serviceTargetGrid').datagrid('endEdit', index);

Title: Re: About value of combobox of editable datagrid
Post by: nyr_jack on September 14, 2012, 12:57:53 AM

Thank you very much!

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: nyr_jack on September 13, 2012, 01:06:15 AM