EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: entoknakal on April 16, 2013, 07:52:20 PM


Title: Problem Row Editing Datagrid
Post by: entoknakal on April 16, 2013, 07:52:20 PM
Hello, iam newbie and this is my first topic..
I want to ask using combobox editor at row editing datagrid. When i click append action and choose some value on combobox, why the first value always give a comma?is it a bug or there's something wrong in my code?

I try from the row editing datagrid sample (rowediting.html)

the script:
<table id="dg" class="easyui-datagrid" title="Row Editing DataGrid" style="width:700px;height:auto"
         data-options="
            iconCls: 'icon-edit',
            singleSelect: true,
            toolbar: '#tb',
            url: '../datagrid/datagrid_data1.json',
            onClickRow: onClickRow
         ">
      <thead>
         <tr>
            <th data-options="field:'itemid',width:80">Item ID</th>
            <th data-options="field:'productid',width:100,
                  formatter:function(value,row){
                     return row.productname;
                  },
                  editor:{
                     type:'combobox',
                     options:{
                        valueField:'productid',
                        textField:'productname',
                        url:'../datagrid/products.json',
                        required:true,
                        multiple:true
                     }
                  }">Product</th>
            <th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th>
            <th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
            <th data-options="field:'attr1',width:250,editor:'text'">Attribute</th>
            <th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>
         </tr>
      </thead>
   </table>

regards

Title: Re: Problem Row Editing Datagrid
Post by: stworthy on April 16, 2013, 10:53:26 PM
The combobox editor should be override to support multiple selection.
Code:
<script>
	$.extend($.fn.datagrid.defaults.editors,{
		combobox: {
			init: function(container, options){
				var combo = $('<input type="text">').appendTo(container);
				combo.combobox(options || {});
				return combo;
			},
			destroy: function(target){
				$(target).combobox('destroy');
			},
			getValue: function(target){
				if ($(target).combobox('options').multiple){
					return $(target).combobox('getValues');
				} else {
					return $(target).combobox('getValue');
				}
			},
			setValue: function(target, value){
				if ($(target).combobox('options').multiple){
					$(target).combobox('setValues', value ? ($.isArray(value) ? value : [value]) : []);
				} else {
					$(target).combobox('setValue', value);
				}
			},
			resize: function(target, width){
				$(target).combobox('resize', width)
			}
		}
	});
</script>

Title: Re: Problem Row Editing Datagrid
Post by: entoknakal on April 17, 2013, 02:08:12 AM
Hi stworthy,

Thank's for the respone and it's worked ^_^

Title: Re: Problem Row Editing Datagrid
Post by: entoknakal on April 25, 2013, 01:57:31 AM
Hello, I am asking again  ;D
I've succeed combine my row editing datagrid with merge cell
When I click unit cost at row 3 then i click Accept, Unit Cost value appear at Attribute field too..
Q1: Is it possible when I edit unit cost, the editor width will follow merging cell?
Q2: How can I remove that Attribute value on the merged cell and after click Accept button the Unit Cost cell will merge back?

code:

<table id="dg" class="easyui-datagrid" title="Row Editing DataGrid" style="width:700px;height:auto"
         data-options="
            iconCls: 'icon-edit',
            singleSelect: true,
            toolbar: '#tb',
            url: '../datagrid/datagrid_data1.json',
            onClickRow: onClickRow,
                                onLoadSuccess: onLoadSuccess
         ">
      <thead>
         <tr>
            <th data-options="field:'itemid',width:80">Item ID</th>
            <th data-options="field:'productid',width:100,
                  formatter:function(value,row){
                     return row.productname;
                  },
                  editor:{
                     type:'combobox',
                     options:{
                        valueField:'productid',
                        textField:'productname',
                        url:'../datagrid/products.json',
                        required:true,
                        multiple:true
                     }
                  }">Product</th>
            <th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th>
            <th data-options="field:'unitcost',width:80,align:'right',editor:'validatebox'">Unit Cost</th>
            <th data-options="field:'attr1',width:250,editor:'text'">Attribute</th>
            <th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>
         </tr>
      </thead>
   </table>

   <div id="tb" style="height:auto">
      <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">Append</a>
      <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="remove()">Remove</a>
      <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">Accept</a>
      <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">Reject</a>
      <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">GetChanges</a>
   </div>
   
   <script type="text/javascript">
   
   $.extend($.fn.datagrid.defaults.editors,{
      combobox: {
         init: function(container, options){
            var combo = $('<input type="text">').appendTo(container);
            combo.combobox(options || {});
            return combo;
         },
         destroy: function(target){
            $(target).combobox('destroy');
         },
         getValue: function(target){
            if ($(target).combobox('options').multiple){
               //console.info($(target).combobox('options').multiple);
               return $(target).combobox('getValues');
            } else {
               return $(target).combobox('getValue');
            }
         },
         setValue: function(target, value){
            if ($(target).combobox('options').multiple){
               $(target).combobox('setValues', value ? ($.isArray(value) ? value : [value]) : []);
            } else {
               $(target).combobox('setValue', value);
            }
         },
         resize: function(target, width){
            $(target).combobox('resize', width)
         }
      }
   });
      var editIndex = undefined;
      function endEditing(){
         if (editIndex == undefined){return true}
         if ($('#dg').datagrid('validateRow', editIndex)){
            var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'productid'});
            var productname = $(ed.target).combobox('getText');
            $('#dg').datagrid('getRows')[editIndex]['productname'] = productname;
            $('#dg').datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
         } else {
            return false;
         }
      }
      function onClickRow(index){
         if (editIndex != index){
            if (endEditing()){
               $('#dg').datagrid('selectRow', index)
                     .datagrid('beginEdit', index);
               editIndex = index;
            } else {
               $('#dg').datagrid('selectRow', editIndex);
            }
         }
      }
      function append(){
         if (endEditing()){
            $('#dg').datagrid('appendRow',{status:'P'});
            editIndex = $('#dg').datagrid('getRows').length-1;
            $('#dg').datagrid('selectRow', editIndex)
                  .datagrid('beginEdit', editIndex);
         }
      }
      function remove(){
         if (editIndex == undefined){return}
         $('#dg').datagrid('cancelEdit', editIndex)
               .datagrid('deleteRow', editIndex);
         editIndex = undefined;
      }
      function accept(){
         if (endEditing()){
            $('#dg').datagrid('acceptChanges');
         }
      }
      function reject(){
         $('#dg').datagrid('rejectChanges');
         editIndex = undefined;
      }
      function getChanges(){
         var rows = $('#dg').datagrid('getChanges');
         alert(rows.length+' rows are changed!');
      }
                function onLoadSuccess(data){
         var merges = [{
            index: 2,
            colspan: 2
         }   ];
         for(var i=0; i<merges.length; i++){
            $(this).datagrid('mergeCells',{
               index: merges.index,
               field: 'unitcost',
               colspan: merges.colspan,
               rowspan:merges.rowspan
            });
         }
      }
   </script>

Title: Re: Problem Row Editing Datagrid
Post by: stworthy on April 25, 2013, 05:54:45 AM
Please try to override editor's 'resize' method to solve this issue:
Code:
<script>
	$.fn.datagrid.defaults.editors['validatebox'].resize = function(target,width){
		var td = $(target).closest('td.datagrid-td-merged');
		if (td.length){
			var cell = td.children('div.datagrid-editable');
			cell._outerWidth(td.width());
			$(target)._outerWidth(cell.width());
		} else {
			$(target)._outerWidth(width);
		}
	};
</script>

Title: Re: Problem Row Editing Datagrid
Post by: entoknakal on April 25, 2013, 07:11:48 PM
Hi stworthy,

thank's for the problem solving.
for the Q2: I added onLoadSuccess function when onAfterEdit for merge back

Code:
<table id="dg" class="easyui-datagrid" title="Row Editing DataGrid" style="width:700px;height:auto"
			data-options="
				iconCls: 'icon-edit',
				singleSelect: true,
				toolbar: '#tb',
				url: '../datagrid/datagrid_data1.json',
				onClickRow: onClickRow,
				onLoadSuccess: onLoadSuccess,
				[b]onAfterEdit: onLoadSuccess[/b]
			">
		<thead>
			<tr>
				<th data-options="field:'itemid',width:80">Item ID</th>
				<th data-options="field:'productid',width:100,
						formatter:function(value,row){
							return row.productname;
						},
						editor:{
							type:'combobox',
							options:{
								valueField:'productid',
								textField:'productname',
								url:'../datagrid/products.json',
								required:true,
								multiple:true
							}
						}">Product</th>
				<th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th>
				<th data-options="field:'unitcost',width:80,align:'right',editor:'validatebox'">Unit Cost</th>
				<th data-options="field:'attr1',width:250,editor:'text'">Attribute</th>
				<th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>
			</tr>
		</thead>
	</table>


Powered by SMF 1.1.18 | SMF © 2013, Simple Machines