Print Page - Parsing autofill onSelect function to work with numberbox class in datagrid

Title: Parsing autofill onSelect function to work with numberbox class in datagrid
Post by: andyj on July 09, 2013, 02:39:13 AM

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!

Title: Re: Parsing autofill onSelect function to work with numberbox class in datagrid
Post by: stworthy on July 09, 2013, 04:47:53 PM

The 'onSelect' of combogrid is inherited from datagrid, so you must use as

Code:

$('#cc').combogrid({
onSelect: function(index,row){
...
});
});

When add class="easyui-numberbox" to a input element, it becomes a numberbox component. Please use the 'setValue' method to set the component value.

Code:

$('#idPurchaseRate').numberbox('setValue', 23);

Title: Re: Parsing autofill onSelect function to work with numberbox class in datagrid
Post by: andyj on July 10, 2013, 04:02:44 AM

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 :)

Title: Re: Parsing autofill onSelect function to work with numberbox class in datagrid
Post by: andyj on July 20, 2013, 11:47:47 AM

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.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: andyj on July 09, 2013, 02:39:13 AM