EasyUI Forum

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'
   }
});

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');

Please use the code below instead.

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.

In your click event handler, call addRow method, the new row with be inserted to your special position.

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
          }
        });     
        }
    }