EasyUI Forum

Hi, i find a problem in my codes, and can't fix it for nealy a week longer, and have to report it here.
I have an editable datagrid, which has an nested subgrid. After I delete all rows of the main grid , then i want to add a new first row again,  but the new row doesn't appear (it only flashes then disappears.) until i  click "AddNew" button of toolbar  the second time.  In order to demo this problem , I modify my codes like below, and ommit the server side codes of CRUD. You have to add the CRUD in your environment if you want to observe the odd problem. If I delete the codes section 'subgrid : {......}' , the problem will disappear, but another problem appears: the new added row has a row number of -9 not 1.

<table id="dg"></table>
<script type="text/javascript">
   var conf = {
      options : {
         rownumbers : true,
         striped : true,
         fitColumns : false,
         nowrap : false,
         fixed : true,
         idField : 'id',
         pagination : true,
         singleSelect : false,
         autoSave : false,
         url : "/getData",
         saveUrl : "/saveData",
         destroyUrl : "/deleteData",
         updateUrl : "/updateData",
         edatagrid : true,
         autoUpdateDetail : false,
         toolbar : [ {
            iconCls : 'icon-add',
            text : 'AddNew',
            handler : function() {

               $(this).datagrid('getSelfGrid').edatagrid('addRow');

            }
         }, {
            iconCls : 'icon-remove',
            text : 'Delete',
            handler : function() {
               $(this).datagrid('getSelfGrid').edatagrid('destroyRow');
            }
         }, {
            iconCls : 'icon-save',
            text : 'Save',
            handler : function() {
               $(this).datagrid('getSelfGrid').edatagrid('saveRow');
            }
         }, {
            iconCls : 'icon-undo',
            text : 'Cancel',
            handler : function() {
               $(this).datagrid('getSelfGrid').edatagrid('cancelRow');
            }
         } ],
         onSuccess : function(index, row) {
            $(this).datagrid('reload');

         },
         columns : [ [ {
            field : 'id',
            title : 'ID',
            width : 100,
            hidden : true
         }, {
            field : 'name',
            title : 'Name',
            width : 200,
            editor : {
               type : 'textbox'
            }
         }, {
            field : 'number',
            title : 'Number',
            width : 200,
            editor : {
               type : 'textbox'
            }
         } ] ]
      },
      subgrid : {
         options : {
            fitColumns : true,
            foreignField : 'id',
            columns : [ [ {
               field : 'orderdate',
               title : 'Order Date',
               width : 200
            }, {
               field : 'shippeddate',
               title : 'Shipped Date',
               width : 200
            }, {
               field : 'freight',
               title : 'Freight',
               width : 200
            } ] ],
            data : [ {
               orderdate : '08/23/2012',
               shippeddate : '12/25/2012',
               freight : 9734
            }, {
               orderdate : '08/23/2012',
               shippeddate : '12/25/2012',
               freight : 9734
            }, {
               orderdate : '08/23/2012',
               shippeddate : '12/25/2012',
               freight : 9734
            } ]
         }

      }
   };

   $(function() {
      $('#dg').edatagrid({
         title : 'xxxxx',
         width : '100%',
         height : '100%'
      }).datagrid('subgrid', conf);
   });
</script>

Please look at this example http://code.reloado.com/ufasec3/edit#preview. It works fine.