views:

73

answers:

2

Hi,

i am using Jgrid.i want when i add new row to the table each time it assign the new id to that row.

I am adding the row using

var AddNewRow = function(id){
                      var datarow = {Consultant:"",Role:"",Task:"",SDate:"",EDate:"",
                                       Deliverables:"",Complete:""};

                      var lastsel2 = i+1;
                      //debugger;
                      var su=jQuery("#test").addRowData(lastsel2, datarow, "last") ;
//                  if (su) { 
//                          jQuery('#test').editRow(lastsel2,true); 
//                                            
//                     
//                           }  


                      };

And my complete code is....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
    <title>Untitled Page</title>
     <!--<script type="text/javascript">

     var check=\$retrivexml;
      alert(check);
      </script>-->
    <link href="../../Content/css/Style/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../../Content/css/Style/jquery-ui-1.7.2.custom.css"
        type="text/css" media="screen" />
    <link rel="stylesheet" href="../../Content/css/Style/ui.jqgrid.css" type="text/css"
        media="screen" />
    <!--  <link rel="stylesheet" type="text/css" media="screen" href="../../Content/css/Style/jqModal.css" />-->
    <!--<link rel="stylesheet" type="text/css" media="screen" href="../../Content/css/Style/datePicker.css" />-->
    <!--<link href="../../Content/css/Test/jquery-ui.css" rel="stylesheet" type="text/css" />-->
    <!--<link href="../../Content/css/Test/ui.jqgrid.css" rel="stylesheet" type="text/css" />-->

    <script src="../../Content/js/Jgrid js/jquery.js" type="text/javascript"></script>
    <script src="../../Content/js/Jgrid js/grid.locale-en.js" type="text/javascript"></script>
    <script src="../../Content/js/Jgrid js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <!--<script src="../../Content/js/Jgrid js/celledit.js" type="text/javascript"></script>-->
    <script src="../../Content/js/Jgrid js/ui.datepicker.js" type="text/javascript"></script>
    <script src="../../Content/js/Jgrid js/json2.js" type="text/javascript"></script>
    <script src="../../Content/js/Jgrid js/JsonXml.js" type="text/javascript"></script>
    <script src="../../Content/js/Jgrid js/grid.import.js" type="text/javascript"></script>

    <!--<script type="text/javascript" src="../../Content/js/Jgrid js/grid.base.js"></script> 
    <script type="text/javascript" src="../../Content/js/Jgrid js/grid.formedit.js"></script> -->

    <script type="text/javascript">

     jQuery(document).ready( function() {

      var i=3;  
     var grid = jQuery("#test");
            var MyExportToXml = function (grid) {
                var dataFromGrid = {row: grid.jqGrid('getGridParam', 'data') };
                var xmldata = '<?xml version="1.0" encoding="utf-8" standalone="yes"?>\n<rows>\n' +
                              xmlJsonClass.json2xml (dataFromGrid, '\t') + '</rows>';
                alert(xmldata);
            };


    var AddNewRow = function(id){
                      var datarow = {Consultant:"",Role:"",Task:"",SDate:"",EDate:"",
                                       Deliverables:"",Complete:""};

                      var lastsel2 = i+1;
                      //debugger;
                      var su=jQuery("#test").addRowData(lastsel2, datarow, "last") ;
//                  if (su) { 
//                          jQuery('#test').editRow(lastsel2,true); 
//                                            
//                     
//                           }  


                      };

     var lastsel3;
     jQuery("#test").jqGrid({
        url:'/Content/xml/user.xml',
        //url: $!retrivexml,
     datatype: "xml",
        colNames:['Consultant','Project Role', 'Task', 'Start Date','End Date','Deliverables','Complete'],
        colModel:[
         {name:'Consultant',index:'Consultant', width:90, editable: true,edittype:"select",editoptions:{value:"K:Kin;R:Rajesh;R:Renee;S:Sandeep"}},
         {name:'Role',index:'Role', width:80, align:"right",editable:true},
         {name:'Task',index:'Task', width:80, align:"right",editable:true},
         {name:'SDate',index:'SDate', width:90,editable:true},
         {name:'EDate',index:'EDate', width:90,editable:true},
         {name:'Deliverables',index:'Deliverables', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"25"}},
         {name:'Complete',index:'Complete', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Complete:Incomplete"}}  
        ],


        rowNum:10,
        //rowList:[10,20,30],
        pager: '#pagediv',
        sortname: 'id',
        viewrecords: true,
        sortorder: "desc",
        caption:"Project Planning",
     forceFit : false,
     cellEdit: true,
     editurl:'clientArray',
     cellsubmit: 'clientArray',
     height: "100%",

     ondblClickRow: function(id, iRow, iCol, e) {alert(iRow);}, 

     afterEditCell: function (id,name,val,iRow,iCol){     

        if(name=='SDate') {
       jQuery("#"+iRow+"_SDate","#test").datepicker({dateFormat:"yy-mm-dd"});

      }

     if(name=='EDate') {
       jQuery("#"+iRow+"_EDate","#test").datepicker({dateFormat:"yy-mm-dd"});
      }
     },


    });
    jQuery("#test").jqGrid('navGrid','#pagediv',{edit:false,add:false,del:false}).navButtonAdd('#pagediv', { caption:"New", buttonicon :'ui-icon-circle-plus', title: "Add New Row",
       onClickButton: function() {
           AddNewRow (grid);
       }
    });


    $("#export").click(function(){
                MyExportToXml (grid);
            });


      });
    </script>

</head>
<body>
    <form id="form1">
        <div align="center">
            <div id="pagediv">
            </div>
            <table id="test" align="center">
            </table>
            <input type="BUTTON" id="export" value="Export" />
        </div>
    </form>
</body>
</html>
A: 

Your code seems to me mostly OK. The only potential problem which you can have with IDs is the possible conflict with IDs from /Content/xml/user.xml. You should be careful and not include integer IDs grater as 3 in the /Content/xml/user.xml.

Some more remarks to you code. I find personally not good to use variable with the name lastsel2 in the context which has nothing with selection. The usage of variable with the name i in the scope of jQuery(document).ready (so the variable will be almost global because it will be seen everywhere) not very nice. A later modification of your code could occasionally reset the value of i.

Moreover I recommend you always verify you HTML code in a HTML Validator like http://validator.w3.org and verify your JavaScript code in JSLint.

JSLint will help you to find some problems in your code like

newDom.loadXML('<?xml version="1.0"?><rows><page>1</page><total>1</total><records>'+
               + entries.length + '</records></rows>');

('+' will be used twice: on the end of one line and at the beginning of the first one) or unused variables like groupingView inside of gridComplete functions. JSLint could help you to make your code more robust.

HTML Validator show you other errors in your XHTML code which could follow that in other browser version as you used for testing your Web application could work incorrect:

1) runat in unknown attribute for the <head> element in "-//W3C//DTD XHTML 1.0 Transitional//EN". So you should replace <head runat="server"> to <head>

2) To have no XHTML validation errors you should place the JavaScript code inside of //<![CDATA[ //]]> block:

<script type="text/javascript">
//<![CDATA[
  /* you can place your code here */
//]]>
</script>

3) Replace <input type="BUTTON" ...> to <input type="button" ...> because XHTML is case sensitive.

4) Add mandatory attribute action="" to your <form> to follow "-//W3C//DTD XHTML 1.0 Transitional//EN". You can also replace <form> to <fieldset> if you not really want to use a form submitting.

5) Include <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> inside of the <head> element.

6) Include <tr><td /></tr> inside of <table> to follow "-//W3C//DTD XHTML 1.0 Transitional//EN"

Oleg
Thanks Oleg for your valuable comments..Thank you very much...
Shivi
A: 

I have solved the problem using..

i count all the row in grid and then add 1 to the count..

onClickButton: function() {
    var last = jQuery('#test').jqGrid('getGridParam','records'); 
    AddNewRow (last);
}

var AddNewRow = function(id){

    var datarow = {Consultant:"",Role:"",Task:"",SDate:"",EDate:"",
                   Deliverables:"",Complete:""};

    var lastsel2 = parseInt(id) + 1;

    var su=jQuery("#test").addRowData(lastsel2, datarow, "last") ;

};
Shivi
It can work or not work depends on the values of `id` attributes inside of `/Content/xml/user.xml` and not depend of the count of rows in the table. Moreover if you allow user to remove a row then this algorithm could follow to double IDs. If you use integers as the IDs you could get all current IDs with respect of `getDataIDs`, find the maximum value and then use the max value + 1 for the new ID.
Oleg
How can i use that getDataIDs property ?? Please Help.
Shivi
Ok..thanks i got it...thanks Oleg..
Shivi