Jgrid Problem Generating XML

Question

i am using Jgrid. i am injecting the data to the Grid using Xml as we most of us do.

i want the batch update to database, my requirement that when i click on the "Save Change" it generate the Xml of current(updated) grid data.

So, how can i generate the Xml of Jgrid data.

please help.

here is the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <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" />

    <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 type="text/javascript">

    jQuery(document).ready( function() {
    //debugger;
    var lastsel3;
    jQuery("#test").jqGrid({
    url:'/Content/xml/user.xml',
    datatype: "xml",
    colNames:['Consultant','Project Role', 'Task', 'Start Date','End Date','Deliverables','Complete'],
    colModel:[
        {name:'id',index:'id', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
        {name:'tax',index:'tax', width:80, align:"right",editable:true},
        {name:'tax',index:'tax', width:80, align:"right",editable:true},
        {name:'invdate',index:'invdate', width:90,editable:true},
        {name:'invdate',index:'invdate', width:90,editable:true},
        {name:'tax',index:'tax', width:80, align:"right",editable:true},
        {name:'note',index:'note', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Complete:"}}       
    ],

    onSelectRow: function(id){
        if(id && id!==lastsel3){
            jQuery('#test').jqGrid('restoreRow',lastsel3);
            jQuery('#test').jqGrid('editRow',id,true,pickdates);
            lastsel3=id;
        }
    },

    rowNum:10,
    rowList:[10,20,30],
    pager: '#pcelltbl',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    caption:"Cell Edit Example",
    forceFit : true,
    cellEdit: true,
    cellsubmit: 'clientArray',
    afterEditCell: function (id,name,val,iRow,iCol){
    if(name=='invdate') {
            jQuery("#"+iRow+"_invdate","#test").datepicker({dateFormat:"yy-mm-dd"});
        }
    },
    afterSaveCell : function(rowid,name,val,iRow,iCol) {
        if(name == 'amount') {
            var taxval = jQuery("#celltbl").jqGrid('getCell',rowid,iCol+1);
            jQuery("#test").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(taxval)});
        }
        if(name == 'tax') {
            var amtval = jQuery("#test").jqGrid('getCell',rowid,iCol-1);
            jQuery("#test").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(amtval)});
        }
    }
});
jQuery("#test").jqGrid('navGrid','#pgwidth',{edit:true,add:true,del:true});

        });
    </script>

</head>
<body>
    <form id="form1">
        <div>
            <table id="test">
            </table>
        </div>
    </form>
</body>
</html>

Thanks.

It is strange that you defined 3 times the same 'tax' column and twice the same 'invdate' column. Do you have the same problem in your program or it is just an error in posting of the code here? — Oleg, Sep 20 '10 at 15:11

score 1 · Answer 1 · answered Sep 20 '10 at 16:30

To export data to XML you can use jQuery("#test").jqGrid ('getGridParam', 'data') in combination with xmlJsonClass.json2xml from JsonXml.js which included to jqGrid.

I created a working example which demonstrate this way: http://www.ok-soft-gmbh.com/jqGrid/ExportInXml.htm. You can use external button or a button in the jqGrid navigator to make the export. In the example I just display the exported data with respect of alert function. The same data as a file you find here.

score 0 · Accepted Answer · answered Sep 22 '10 at 07:19

Hi Oleg I am using the ths same code but it not produce the correct output.. My code is

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <!-- <script type="text/javascript">
            debugger;
            alert($!retrivexml);
            </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" />

    <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">

        jQuery(document).ready( function() {


        var grid = jQuery("#test");
            var MyExportToXml = function (grid) {debugger;
                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 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',


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


//      afterSaveCell : function(rowid,name,val,iRow,iCol) {
//          if(name == 'amount') {
//              var taxval = jQuery("#celltbl").jqGrid('getCell',rowid,iCol+1);
//              jQuery("#test").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(taxval)});
//          }
//          
//          
//          
//          if(name == 'tax') {
//              var amtval = jQuery("#test").jqGrid('getCell',rowid,iCol-1);
//              jQuery("#test").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(amtval)});
//          }
//      }
    });
    jQuery("#test").jqGrid('navGrid','#pagediv',{edit:false,add:false,del:false});


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



    jQuery("#bedata").click(function(){

    jQuery("#test").jqGrid('navButtonAdd','#pagediv',{caption:"New", buttonicon :'ui-icon-circle-plus', 
                    onClickButton:function(id){
                      var datarow = {Consultant:"",Role:"",Task:"",SDate:"",EDate:"",
                                       Deliverables:"",Complete:""};
                      var lastsel2 = id;
                      //debugger;
                      var su=jQuery("#test").addRowData(lastsel2, datarow, "last") ;
//                  if (su) { 
//                          jQuery('#test').editRow(lastsel2,true); 
//                                            
//                     
//                           }  
                      },
                title:"New Button",
                position:"last"
                });
        //jQuery("#test").jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false});
    });

            });
    </script>

</head>
<body>
    <form id="form1">
        <div id="pagediv">
        </div>
        <table id="test">
        </table>
        <input type="BUTTON" id="bedata" value="Edit Selected" />
        <input type="BUTTON" id="export" value="Export" />
    </form>
</body>

Please..correct the code if i m doing some mistake here

Do you recieve an error mesaage or a wrong XML is you click on the "Export" button? What you do on `jQuery("#bedata").click` is wrong. First you acc new button to the Navigator on evry lick. Next if a row is selected you add empty row **with the same id as selected row has**. It is very bad! Ids **must** be unique to have correct HTML. — Oleg, Sep 22 '10 at 08:27
i revive the blank xml just with hard coded tag when i click on the Export button. — Shivi, Sep 22 '10 at 09:43
it returning the null value in var dataFromGrid = {row: grid.jqGrid ('getGridParam', 'data') }; — Shivi, Sep 22 '10 at 12:16
@Shivi: Just now accidentally I see that you wrote me here. Please read the following Information http://meta.stackexchange.com/questions/43019/how-do-comment-replies-work. If you just write comment to **his own answer** or to **his own question** only nobody sees any notification. So your message could not be read. It seems to me that you had problems because you used `datatype: "xml"` which is **not local** data type. To have `data` filled you have to have `datatype: "xmlstring"` or use `loadonce:true` parameter. — Oleg, Jan 24 '11 at 12:07

Jgrid Problem Generating XML

2 Answers2

Linked