I did copy and paste your code and it's working sir, Thank You...maybe there's error in my code when I use the sample code:
What I am trying to do know based on your sample code is this Computation:

Prin   = 100,000
Int     = .04
Term  = 4
Face Value = 116,000  (answer)

I tried this non-easyui code and its working aside from the result becomes 115999.99. How could I re-write it in easyui way:

<table>
<tr>
   <td>Principal:</td>
   <td><input name="Prin"></input></td>
</tr>
<tr>
   <td>Interest:</td>
   <td><input name="Int" ></input></td>
</tr>
<tr>
   <td>Term:</td>
   <td><input name="Term" ></input></td>
</tr>
<tr>
   <td>Face Value:</td>
   <td><input name="FaceValue" disabled="true"></input></td>
</tr>
</table>

<script type="text/javascript">
$('input[name="Term"]').keyup(function() {
    var Prin = $('input[name="Prin"]').val();
    var Int = $('input[name="Int"]').val();
    var Term = $('input[name="Term"]').val();
    $('input[name="FaceValue"]').val(
        parseFloat(Prin)*((1+(parseFloat(Int) * parseFloat(Term)))
    ));
});
</script>

Sir the onChange is not firing

could this code above my table affects it:

<form id="fm_investigate_maker" method="post" novalidate>

Please help. I need sample code on how to calculate textbox or numberbox value say onchange value then update the numberbox for the total value:

<tr>
   <td>Expense 1</td>
   <td><input name="Expense1" class="easyui-numberbox" value="Expense1" ></input></td>
</tr>
<tr>
   <td>Expense 2</td>
   <td><input name="Expense2" class="easyui-numberbox" value="Expense2" ></input></td>
</tr>
<tr>
   <td>Expense 3</td>
   <td><input name="Expense3" class="easyui-numberbox" value="Expense3" ></input></td>
</tr>
<tr>
   <td>Total Expense:</td>
   <td><input name="TotalExpense" class="easyui-numberbox" disabled="true" value=TotalExpense" ></input></td>
</tr>

It works. thank you..here's my code:

   include '../data/conn.php';
   $id = intval($_REQUEST['id']);
   
   $rs = mysql_query("select *, DATE_FORMAT(appdate,'%d/%m/%Y') from tblloanapp app left join tblmasterdata master on app.makermasterDataID=master.masterdataid
                  where loanAppID=" . $id );

   $result = mysql_fetch_array($rs);
   echo json_encode($result);   

could id be just like refresh in datagrid, showing [processing, please wait...] and not using messenger approach

Im using this code to load the basic info of client and test load info based on sample ID. The function frm_maker_show works fine but the function loadCIRinfo to load the test info does not work. I've attached the url file get_latestCIRdata.php. Please help

<a href="javascript:void(0)" class="easyui-linkbutton" onclick="loadCIRinfo()" style="width:160px">Load Latest CIR info</a>

<script type="text/javascript">
      function frm_maker_show(){
         var row = $('#dgrid_loanapp').datagrid('getSelected');
         if (row){
            urldata = 'modules/application/get_maker_data.php?id='+row.loanAppID;
            $('#dlg_investigate_maker').dialog('open').dialog('setTitle','Credit Investigation - Maker');
            $('#fm_investigate_maker').form('load',row);
            url = 'modules/application/update_investigate_maker.php?id='+row.loanAppID;
         }
      }
      
      function loadCIRinfo(){
                     var newLoanID = 944;
           urldata = 'modules/application/get_latestCIRdata.php?id='+newLoanID;
           $('#fm_investigate_maker').form('load',urldata);
      }


//=== get_latestCIRdata.php ======

<?php
   include '../data/conn.php';
   $id = intval($_REQUEST['id']);
   
   $rs = mysql_query("select *, DATE_FORMAT(appdate,'%d/%m/%Y') from tblloanapp app left join tblmasterdata master on app.makermasterDataID=master.masterdataid
                  where loanAppID=" . $id );
   $rows = array();

   while($r = mysql_fetch_assoc($rs)) {
     $rows[] = $r;
   }

   echo json_encode($rows);   

?>

I did some workaround sir. It's functioning well, but i know there's a better approach to do this:
The default value of added row is equal to selected id of record prior to viewing the edatagrid

      <div id="toolbar">
<? /*         <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">New</a> */ ?>
         <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addNewRow()">New</a>
         <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">Delete</a>
         <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">Save</a>
         <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
      </div>

   function loanhistoryshow(){
        var row = $('#dgrid_loanapp').datagrid('getSelected');
        if (row){
            $('#dlg_loanhistory').dialog('open').dialog('setTitle','Loan History');
         
            $('#dg').edatagrid({
               url: 'modules/data/get_loanhistory.php?id='+row.makermasterDataID,
               saveUrl: 'modules/loanhistory/save_loanhistory.php',
               updateUrl: 'modules/loanhistory/update_loanhistory.php',
               destroyUrl: 'modules/loanhistory/delete_loanhistory.php',
            });
        }
    }

   function addNewRow(index){
        var row = $('#dgrid_loanapp').datagrid('getSelected');
        if (row){
        $('#dg').edatagrid('addRow',{
          index: index,
          row:{
            loanhistorymid: row.makermasterDataID
          }
        });     
        }
    }

Thank you sir, the code successfully add new row with default values upon onLoadSuccess. But what i need is to load default values upon clicking New button for Addrow.

Please try the updated example http://jsfiddle.net/98SsR/1/.

sir how if i the value to be set to row(s) are variables

Make sure to call a method after creating the editable datagrid. If your issue continues, please describe what error you are getting.

Sir I'm just a novice...please help...here's my code

   <div id="toolbar_dgrid_loanapp">
      <a id="btnShowLoanHistory"       href="javascript:void(0)" class="easyui-linkbutton easyui-tooltip" title=""     iconCls="icon-loan"       plain="true" onclick="loanhistoryshow()">Loan History</a>
   </div>

   <div id="dlg_loanhistory" class="easyui-dialog" style="margin: 0 auto;width:1000px; height:500px" closed="true" data-options="modal:true,shadow:true">
      <table id="dg" title="" style="width:980px;height:auto"
            toolbar="#toolbar"
            pagination="false"
            idField="id"
            rownumbers="true"
            fitColumns="true"
            singleSelect="true">
         <thead>
            <tr>
               <th data-options="field:'loanhistorymid',width:80">MasterID</th>
               <th data-options="field:'dategranted',formatter:formatDate,width:90,align:'center',editor:'datebox'">DateGranted</th>
               <th data-options="field:'maturity',formatter:formatDate,width:90,align:'center',editor:'datebox'">Maturity</th>
               <th data-options="field:'security',width:70,editor:'textbox'">Security</th>
               <th data-options="field:'pnnumber',width:80,editor:'textbox'">PN No</th>
               <th data-options="field:'loanamount',width:90,align:'right',editor:'numberbox'">LoanAmount</th>
               <th data-options="field:'otclano',width:75,editor:'textbox'">OT/CLA No.</th>
               <th data-options="field:'otcladate',formatter:formatDate,width:90,align:'center',editor:'datebox'">OT/CLA Date</th>
               <th data-options="field:'obalance',width:90,align:'right',editor:'numberbox'">Obalance</th>
               <th data-options="field:'remarks',width:250,editor:'textbox'">Remarks</th>
            </tr>
         </thead>
      </table>
      
      <div id="toolbar">
         <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">New</a>
         <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">Delete</a>
         <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">Save</a>
         <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
      </div>
      </form>
   </div>
   
   <script type="text/javascript">
   
      function loanhistoryshow(){
         var row = $('#dgrid_loanapp').datagrid('getSelected');
         if (row){
            $('#dlg_loanhistory').dialog('open').dialog('setTitle','Loan History');
            $('#dg').edatagrid({
               url: 'modules/data/get_loanhistory.php?id='+row.makermasterDataID,
               saveUrl: 'modules/loanhistory/save_loanhistory.php',
               updateUrl: 'modules/loanhistory/update_loanhistory.php',
               destroyUrl: 'modules/loanhistory/delete_loanhistory.php'
            });
         }
      }
      
      // insert a row with default values
      $('#dg').edatagrid('addRow',{
         index: 2,
         row:{
            loanhistorymid:'11111',
            remarks:'test'
         }
      });      
   
   </script>
   
// My objective is to insert row with default value equal to var row = $('#dgrid_loanapp').datagrid('getSelected');

Hi all
Please help, I'm getting error in using
// insert a row with default values
$('#dg').edatagrid('addRow',{
   index: 2,
   row:{
      name:'name1',
      addr:'addr1'
   }
});

do have online demo of this:
<input class="easyui-searchbox" data-options="prompt:'Please Input Value',menu:'#mm',searcher:doSearch" style="width:300px"></input>
<div id="mm">
    <div data-options="name:'all',iconCls:'icon-ok'">All News</div>
    <div data-options="name:'sports'">Sports News</div>
</div>
<script>
    function doSearch(value,name){
        var dg = $('#dg');  // the datagrid
        dg.datagrid('load', {  // reload the datagrid data by passing the 'q' and 'category' parameters to server
            q: value,
            category: name
        });
    }
</script>
please post. thank you

I'm using mysql as database. I'm trying to use datagrid with category searchbox but of no luck. please post me complete sample code including sql query to mysql. Thank you