Following on from this post: http://www.jeasyui.com/forum/index.php?topic=365.0

I am having difficulty in manipulating dates in a pop-up form launched from a datagrid.

I would like to convert my MySQL date field (format: yyyy-mm-dd) to a UK date format dd-mm-yyyy.

As per previous posts, the following script formats and parses the date field so that it at least works with the MySQL db format but displays as yyyy-mm-dd.

Code:

	$.fn.datebox.defaults.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);
	};
	$.fn.datebox.defaults.parser = function(s){
		if (!s) return new Date();
		var ss = s.split('-');
		var d = parseInt(ss[2],10);
		var m = parseInt(ss[1],10);
		var y = parseInt(ss[0],10);
		if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
			return new Date(y,m-1,d);
		} else {
			return new Date();
		}
	};

If I change it to the following in order to format it as dd-mm-yyyy, it no longer works...

Code:

	$.fn.datebox.defaults.formatter = function(date){
		var y = date.getFullYear();
		var m = date.getMonth()+1;
		var d = date.getDate();
		return (d<10?('0'+d):d)+'-'+(m<10?('0'+m):m)+'-'+y;
	};
	$.fn.datebox.defaults.parser = function(s){
		if (!s) return new Date();
		var ss = s.split('-');
		var d = parseInt(ss[2],10);
		var m = parseInt(ss[1],10);
		var y = parseInt(ss[0],10);
		if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
			return new Date(y,m-1,d);
		} else {
			return new Date();
		}
	};

Upon opening the form the date appears incorrectly formatted yyyy-mm-dd (although the correct date).
Upon selecting a new date from the calendar popup tool, it correctly returns it in the correct format dd-mm-yyyy
If you re-open the calendar popup tool, the previously selected date is no longer selected and the calendar tool is set to a completely different year.
Upon saving the form it doesn't save the date. Presumably it fails to correctly parse the date...

Any ideas? Thanks in advance...

Just to add to this, the previous post demonstrates how to extract field data from json data source that the grid and popup form is based upon.

In this case the json data source created in "data_select.php":

Code:

<table id="dg" title="Supplier Schemes" class="easyui-datagrid" url="data_select.php" ...

Where this is the case, you access that data with rowData.field

Code:

	$(document).ready(function(){
	$('#iditem_id').combogrid({
  		onSelect:function(rowIndex, rowData){
   		$('#idPurchaseRate').numberbox('setValue',rowData.PurchaseCost);
   		$('#idDescription').val(rowData.PurchaseDescription);
  		}
 	});        
});

HOWEVER, if you want to access the data source of your combobox, for example in this case "get_item_data.php":

Code:

				<input id="idformitem_id" name="item_id" class="easyui-combobox" style="width:400px;" 
				data-options="required:true,
				valueField:'item_id',
				textField:'itemcatcode',
				url:'get_item_data.php'">

Then you access the data with record.field
ie.

Code:

	$(document).ready(function(){
	$('#idformitem_id').combobox({
  		onSelect:function(record){
   		$('#idformuom_id').combobox('setValue',record.UOM);
   		$('#idformRating').val(record.Rating);
  		}
 	});        
});

Hope this explains the difference between record and rowData.

OK. I have managed to resolve both loading the dialog form and setting the checkbox as checked/unchecked depending on whether the field value = 1 or 0

Code:

		function editRecord(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$('#dlg').dialog('open').dialog('setTitle','Edit Class');
				$('#fm').form('load',row);
//CHECKBOX START
					if(row.IsActive=='1'){
					$('#idformIsActive').prop('checked',true);
					} else {
					$('#idformIsActive').prop('checked',false);
					}
//CHECKBOX END
				url = 'data_update.php?class_id='+row.id;
			}
		}

I have also resolved how to translate a checkbox 'checked' property into a 1 or 0 value:

Code:

		function updateRecord(){
//CHECKBOX START
			if ($('#idformIsActive').prop('checked') == true) {
				$('#idformIsActive').val('1');
			} else {
				$('#idformIsActive').val('0');
			}
//CHECKBOX END

			$('#fm').form('submit',{
				url: url,
				onSubmit: function(){
					return $(this).form('validate');
				},
				success: function(result){
					var result = eval('('+result+')');
					if (result.success){
						$('#dlg').dialog('close');		// close the dialog
						$('#dg').datagrid('reload');	// reload the user data
					} else {
						$.messager.show({
							title: 'Error',
							msg: result.msg
						});
					}
				}
			});
		}

Hope this is of help to someone else.

I have added to what in the Basic Crud Application example is the editUser() function in order to translate my database value of 1 or 0 to checked or unchecked. But it only works the first time...

Code:

function editRecord(){
	var row = $('#dg').datagrid('getSelected');
	if (row){
		$('#dlg').dialog('open').dialog('setTitle','Edit Class');
		$('#fm').form('load',row);
			if(row.IsActive=='1'){
				$.messager.show({ // always triggers correctly
					title: 'Watch',
					msg: 'IsActive is 1'
				});
			$('#idformIsActive').attr('checked',true); // only works the first time
			}
		url = 'data_update.php?estimatelinedetail_id='+row.id;
	}
}

The messager pop up triggers correctly when editing rows where isActive == 1. Happy days
BUT the checkbox input (#idformIsActive) is correctly checked only the first time you invoke the edit form.
Subsequent invocations of the form show it unchecked even when the value = 1..

Any ideas? Thanks in advance.

The next question is going to be:
How do I translate the checked or unchecked checkbox field states into a 1 or 0 to save in the database?

I have built a datagrid with pop up form editing based on the CRUD application demo
http://www.jeasyui.com/tutorial/app/crud.php

One of the input fields is a checkbox.

Database field is tinyint where 1 = checked and 0= unchecked.

How can I pass these to a checkbox input field?

My popup form dialog is here:

Code:

	<div id="dlg" class="easyui-dialog" style="width:600px;height:260px;padding:10px 20px"
			closed="true" buttons="#dlg-buttons" data-options="modal:true">
		<div class="ftitle">Class</div>
		<form id="fm" method="post" novalidate>
			<div class="fitem">
				<input name="class_id" hidden>
			</div>
			<div class="fitem">
				<label>Class:</label>
				<input id="idformClass" name="Class" class="easyui-validatebox" data-options="required:true,validType:'length[1,20]'">
			</div>
			<div class="fitem">
				<label>Active?</label>
				<input type="checkbox" id="idformIsActive"  name="IsActive" class="easyui-checkbox">
			</div>
			<div class="fitem">
				<label>Sort Order</label>
				<input id="idformsortorder" name="sortorder" type="text" style="width:90px" class="easyui-numberspinner" required="required" data-options="min:0,max:100,editable:false">
			</div>
		</form>
	</div>
	<div id="dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="updateRecord()">Save</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
	</div>

You're a legend. Thanks very much. Works like magic 

I have built a datagrid with pop up form editing based on the CRUD application demo
http://www.jeasyui.com/tutorial/app/crud.php

Everything works fine, except the delete record function.
It fires, the prompt comes up, no error message but I don't think it's getting the record ID for some reason.
Can anyone see anything incorrect in my code? Thanks

Javascript delete function:

Code:

		function deleteRecord(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$.messager.confirm('Confirm','Are you sure you want to delete this record?',function(r){
					if (r){
						$.post('data_delete.php',{id:row.id},function(result){
							if (result.success){
								$('#dg').datagrid('reload');	// reload the user data
							} else {
								$.messager.show({	// show error message
									title: 'Error',
									msg: result.msg
								});
							}
						},'json');
					}
				});
			}
		}

Datagrid html:

Code:

				<table id="dg" title="Classes" class="easyui-datagrid" 
							url="data_select.php" idField="class_id" striped="true" loadMsg="Hey patience is a virtue"
							toolbar="#toolbar" pagination="true" pageSize="30"
							rownumbers="true" fitColumns="true" showFooter="true" singleSelect="true"
							data-options="onDblClickRow:function(rowIndex, rowData){
							editRecord();}">
						<thead>
							<tr>
								<th id="idclass_id" field="class_id" width="35" align="right">ID</th>
								<th id="idTimeCreated" field="TimeCreated" width="80">Created</th>
								<th id="idTimeModified" field="TimeModified" width="80">Last Modified</th>
								<th id="idClass" field="Class" >Class</th>
								<th id="dgIsActive" field="IsActive" width="80">Active?</th>
								<th id="idsortorder" field="sortorder" width="80">Sort Order</th>
							</tr>
						</thead>
					</table>
	<div id="toolbar">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="insertRecord()">New Line Item</a> | 
		<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editRecord()">Edit Line Item</a> | 
		<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteRecord()">Remove Line Item</a>
	</div>

data_delete.php file:

Code:

<?php
$id = intval($_REQUEST['class_id']);
include '../../common/conn.php';
$sql = "DELETE FROM class where class_id=$id";
$result = @mysql_query($sql);
if ($result){
	echo json_encode(array('success'=>true));
} else {
	echo json_encode(array('msg'=>'An error occurred while attempting to delete the record.'));
}
?>

Thanks for any insights...  

Thanks very much. Works like a dream.

Here's the resulting code.
Note the two methods.
#idPurchaseRate input field is an "easyui-numberbox"

Code:

<input id="idPurchaseRate" name="PurchaseRate" class="easyui-numberbox" data-options="groupSeparator:',',prefix:'£',precision:2">

#idDescription input field is a standard html textarea.

Code:

<textarea rows="4" cols="70" id="idDescription" name="Description"></textarea>

Code:

	$(document).ready(function(){
	$('#iditem_id').combogrid({
  		onSelect:function(rowIndex, rowData){
   		$('#idPurchaseRate').numberbox('setValue',rowData.PurchaseCost);
   		$('#idDescription').val(rowData.PurchaseDescription);
  		}
 	});        
});

Hope that helps anyone else. Thanks for your assistance stworthy

[class="easyui-numberbox"]

My datagrid is based on the popup editing application in this demo:
(Application : Basic Crud)
http://www.jeasyui.com/demo/main/index.php?plugin=Application&theme=default&dir=ltr&pitem=Basic%20CRUD

My popup form includes a combogrid, a text area and 3 number input fields.
When the user makes a selection from the combogrid, using an onSelect event, it looks up two values from the combogrid datasource and autofills them in the popup edit form.

This is the autofill function:

Code:

	$(document).ready(function(){
	$('#iditem_id').combogrid({
  		onSelect:function(rowIndex, rowData){
   		$('#idPurchaseRate').val(rowData.PurchaseCost);
   		$('#idDescription').val(rowData.PurchaseDescription);
  		}
 	});        
});

onSelect:function(record) didn't work but the above works fine.

HOWEVER
If the target input fields include class="easyui-numberbox" to give them numberbox functionality
i.e:

Code:

<input id="idPurchaseRate" name="PurchaseRate" class="easyui-numberbox" type="text" style="width:80px">

The record saves but does not save the autofill number.

I believe that I need to parse the json datasource so that the receiving numberbox input recognises it as a float decimal number.

Not sure how to achieve this. Can anyone advise?

(I would also be interested to understand when onSelect:function(record) should be used for autofills)

Thank you!

I managed to resolve Question 1 and get the combobox working.

I removed from the editor options:
mode: 'remote'

I also removed the header from the json file

Code:

					{field:'item_id',title:'Item Code',width:300,
					formatter:function(value,row){  
                            return row.ItemCode;  
                        },
					 	editor:{
							type:'combobox',
							options:{
//								mode:'remote',  //REMOVED
								url:'item_id_select.php',
								valueField:'item_id',
								textField:'ItemCode',
								required:true
									}
								}
					},

PHP file to create combobox datasource:

Code:

	$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
	$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 20;
	$offset = ($page-1)*$rows;
	$result = array();

	include 'conn.php';
	
	$rs = mysql_query("select item_id,ItemCode from item limit $offset,$rows");
	
	$items = array();
	while($row = mysql_fetch_object($rs)){
		array_push($items, $row);
	}

	echo json_encode($items);

Resulting json:

Code:

[{"item_id":"1","ItemCode":"English-French"},{"item_id":"2","ItemCode":"English-German"},{"item_id":"23","ItemCode":"German-English"}]

Previous incorrect json:

Code:

{"rows":[{"item_id":"1","ItemCode":"English-French"},{"item_id":"2","ItemCode":"English-German"},{"item_id":"23","ItemCode":"German-English"}]

Hope this is of some help to someone else.

Aha.
Question No. 2 answered  
So the trick is to do all the foreign key joins and pull all the data into a single data source and reference that.
In terms of datagrid displaying the correct data, works like a dream. Thank you!

Question No. 1 still unresolved..
My combobox doesn't work in Edit Mode. No items at all, completely blank...

Code:

{field:'item_id',title:'Item Code',width:300,
					formatter:function(value,row){  
                            return row.ItemCode;  
                        },
					 	editor:{
							type:'combobox',
							options:{
								mode:'remote',
								url:'item_id_select.php',
								valueField:'item_id',
								textField:'ItemCode',
								required:true
									}
								}
					},

item_id_select.php:

Code:

<?php
	$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
	$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 20;
	$offset = ($page-1)*$rows;
	$result = array();

	include 'conn.php';

	$rs = mysql_query("select item_id,ItemCode from item limit $offset,$rows");
	
	$items = array();
	while($row = mysql_fetch_object($rs)){
		array_push($items, $row);
	}
	$result["rows"] = $items;

	echo json_encode($result);
?>

Hi.
New to the forum so this is probably easy to answer...
This is based on this tutorial:
http://www.jeasyui.com/tutorial/datagrid/datagrid12.php

I have created a datagrid.
One of the fields is an integer-type field, with its editor set to combobox.
My combobox is loaded with data from a mysql db, not local array data.
The integer is based on a lookup table other than the table the datagrid is based on.
1) How do I populate the combobox with remote data?
2) How do I display not the integer but a field from the remote table (the lookup table)

Code:

$('#tt').datagrid({
title:'Estimate Line Items',
iconCls:'icon-edit',
width:1200,
height:650,
singleSelect:true,
idField:'estimatelinedetail_id',
url:'data_select.php',
columns:[[
{field:'estimatelinedetail_id',title:'ID',width:60},
{field:'item_id',title:'Item Code',width:300,
editor:{
type:'combobox',
options:{
mode:'remote',
url:'item_id_select.php',
valueField:'item_id',
textField:'ItemCode',
required:true
	}
}
},
{field:'Description',title:'Description',width:300,align:'left',editor:'textarea'},
{field:'Quantity',title:'Quantity',width:100,align:'right',editor:'numberbox'},
{field:'PurchaseRate',title:'Purchase Rate',width:180,align:'right',editor:'numberbox'},
{field:'NetTotal',title:'Net Total',width:100,align:'right',editor:'numberbox'},
{field:'action',title:'Action',width:90,align:'center',
formatter:function(value,row,index){
if (row.editing){
var s = '<a href="#" onclick="saverow(this)">Save</a> ';
var c = '<a href="#" onclick="cancelrow(this)">Cancel</a>';
return s+c;
} else {
var e = '<a href="#" onclick="editrow(this)">Edit</a> ';
var d = '<a href="#" onclick="deleterow(this)">Delete</a>';
return e+d;
}
}
}
]],

data_select.php extracts data into json for my datagrid
item_id_select.php extracts data into json for my combobox lookup

The above displays item_id from the datagrid table. I want to get the 'ItemCode' field from my look up table.
The combobox doesn't load any data.

Can anyone help? Thanks