tags:

views:

124

answers:

3
Q: 

Jgrid Problem Generating XML

Hi,

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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.

A: 

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.

Oleg  2010-09-20 16:30:27
Thanks a lot Oleg
Shivi  2010-09-21 06:14:13
Hi Oleg I am using the ths same code but it not produce the correct output..
Shivi  2010-09-22 07:17:14
A: 

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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

Shivi  2010-09-22 07:19:11
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  2010-09-22 08:27:52
i revive the blank xml just with hard coded tag when i click on the Export button.
Shivi  2010-09-22 09:43:01
Please reply ASAP...
Shivi  2010-09-22 10:15:16
its very urgent..
Shivi  2010-09-22 10:25:08
it returning the null value in var dataFromGrid = {row: grid.jqGrid ('getGridParam', 'data') };
Shivi  2010-09-22 12:16:59
A: 

Hi Oleg,

Please, reply As soon as possible. Its really very imp.

Shivi  2010-09-23 06:47:26

related questions

Load an XmlNodeList into an XmlDocument without looping?
Does System.Xml use MSXML?
Using an XML catalog with Python's lxml?
Why Are People Still Creating RSS Feeds?
Pretty printing XML files on Emacs
Application configuration files
What is the best XML editor?
How much extra overhead is generated when sending a file over a web service as a byte array?
XPATHS and Default Namespaces
How to parse XML in VBA
Small modification to an XML document using StAX
how to use xpath in python
Best binary XML format for JavaME
How can I split an XML document into thirds (or, even better, n pieces)?
Test serialization encoding
Is it "bad practice" to be sensitive to linebreaks in XML documents?
HTML comments break down
Authoritative source on XML-sig
Best way to get InnerXml of an XElement?
HTML version choice
SQL 2005 For XML Explicit - Need help formatting
Any experiences with Protocol Buffers?
XML Editing/Viewing Software
XML Processing in Python
Converting CSV File to XML in Java