Print Page - Append formatter and editor to markup edatagrid

Title: Append formatter and editor to markup edatagrid
Post by: jaimi on September 06, 2012, 12:39:08 AM

How can I change the format of a datebox within a edatagrid?

the markup line is

<th field="pva_end_format" width="080" sortable="true" editor="{type:\'datebox\',options:{required:true}}" >Ende </th>

Where and how to add the formatter funcion?

I have defined an editor like this:

<th field="vrl_role" width="100" sortable="true" editor="{type:\'combobox\',options:{valueField:\'productid\', textField:\'name\', data:products, required:true}}">Rolle</th>

How can I append a javascript editor like the following to the markup?
$('#cc').combobox({
url:'combobox_data.json',
valueField:'id',
textField:'text'
});

I am sure it is trivial to experienced developers but I am not one. So please give me a hint.
Thanks.

Title: Re: Append formatter and editor to markup edatagrid
Post by: stworthy on September 06, 2012, 06:26:07 PM

Try the following code that use the 'formatter' and 'parser' functions to change the datebox format to 'yyyy-mm-dd'.

Code:

<th field="pva_end_format" width="80" editor="{
		type:'datebox',
		options:{
			required:true,
			formatter:function(date){
				var y = date.getFullYear();
				var m = date.getMonth()+1;
				var d = date.getDate();
				return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
			},
			parser:function(s){
				if (!s) return new Date();
				var ss = s.split('-');
				var y = parseInt(ss[0],10);
				var m = parseInt(ss[1],10);
				var d = parseInt(ss[2],10);
				if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
					return new Date(y,m-1,d);
				} else {
					return new Date();
				}
			}
		}
	}">Ende</th>

Title: Re: Append formatter and editor to markup edatagrid
Post by: jaimi on September 06, 2012, 11:56:07 PM

Thank you for the answer.

I worked through the tutorial datagrid12 where a formatter is defined like this:
<script>
      var products = [
        {productid:'FI-SW-01',name:'Koi'},
        {productid:'K9-DL-01',name:'Dalmation'},
        {productid:'RP-SN-01',name:'Rattlesnake'},
        {productid:'RP-LI-02',name:'Iguana'},
        {productid:'FL-DSH-01',name:'Manx'},
        {productid:'FL-DLH-02',name:'Persian'},
        {productid:'AV-CB-01',name:'Amazon Parrot'}
      ];
      $(function(){
         $('#tt').datagrid({
            title:'Editable DataGrid',
            iconCls:'icon-edit',
            width:660,
            height:250,
            singleSelect:true,
            idField:'itemid',
            url:'datagrid_data.json',
            columns:[[
               {field:'itemid',title:'Item ID',width:60},
               {field:'productid',title:'Product',width:100,
                  formatter:function(value){
                     for(var i=0; i<products.length; i++){
                        if (products.productid == value) return products.name;
                     }
                     return value;
                  },
                  editor:{
                     type:'combobox',
                     options:{
                        valueField:'productid',
                        textField:'name',
                        data:products,
                        required:true
                     } ...
I would like to implement a similar functionality. My data loaded into the combobox comes not from a variable but from a url:json.php. How to define the formatter function in this case?
And in additon how do I have to define the formatter and editor as javascript functions when I don't want to write them directly into the markup. example:
Instead of:
<th field="vrl_role" width="100" sortable="true" editor="{type:\'combobox\',options:{valueField:\'productid\', textField:\'name\', data:products, required:true}}">Rolle</th>

I want to implement like this:
<th field="vrl_role" width="100" sortable="true" editor="myEditor">Rolle</th>

Title: Re: Append formatter and editor to markup edatagrid
Post by: stworthy on September 07, 2012, 02:01:58 AM

Define a 'url' property for combobox to retrieve data from server, you can define the editor using javascript:

Code:

var peditor = {
	type:'combobox',
	options:{
		valueField:'productid',
		textField:'name',
		url:'json.php',
		required:true
	}
};

And then assign this editor into the column:
<th field="vrl_role" width="100" sortable="true" data-options="editor:peditor">Rolle</th>

In this case, you can define another field named 'productname' and then display it directly. The 'formatter' can be written as:

Code:

formatter:function(value,row){
  return row.productname;
}

Before finish editing a row, update the 'productname' field value for that row. The code look like this:

Code:

onClickRow:function(rowIndex, rowData){
	if (lastIndex != rowIndex){
		var ed = $('#tt').datagrid('getEditor',{index:lastIndex,field:'productid'});  // get field editor
		if (ed){
			var val = $(ed.target).combobox('getText');  // get the combobox text value
			var row = $(this).datagrid('getRows')[lastIndex];
			row.productname = val;  // update the 'productname' field value
		}
		$('#tt').datagrid('endEdit', lastIndex);
		$('#tt').datagrid('beginEdit', rowIndex);
	}
	lastIndex = rowIndex;
}

Title: Re: Append formatter and editor to markup edatagrid
Post by: jaimi on September 07, 2012, 11:59:24 PM

Thank you a lot. The editor stuff works properly.

Does the formatter works like the editor? Can I define the formatter also as variable and add it as data-option to the markup?

And in this case, after override the field with the productname does the edatagrid sends the productid to the php-file as well?
It seems that it sends only the content of the visible fields to the php-file.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: jaimi on September 06, 2012, 12:39:08 AM