jQWidgets Forums

Tagged: angular grid, data export, export nested grids, grid, jquery grid, jqxgrid, nested grid

This topic contains 16 replies, has 4 voices, and was last updated by Dimitar 8 years, 4 months ago.

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

Author

Export data from a nested grid Posts

November 9, 2012 at 9:17 am Export data from a nested grid #10775

Member

I’m trying to export nested grid as , “CSV”, “XML” etc. But only main grid data are exported, sub grid data is not included. Here is my code please give me some hints, how do it correctly


<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdata.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.grouping.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxgrid.edit.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxdata.export.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxgrid.export.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="scripts/gettheme.js"></script>
<script type="text/javascript" src="scripts/generatedata.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var theme = getTheme();
        // prepare the data
        var data = new Array();
        //var documentName= new Array();
        var documentName=["HSBC inc.","City Bank"];
       // var sectionName =new Array();
        var sectionName =["Risk Factors","Discription of Notes","Plan of Distribution","ERISA Considerations", "Tax Considerations"];
        var sectionCatogoryID= ["0","1","2","3","4"];
 
        var docSec=new Array();
        
    
            
            
            
            //creating a hidden element to store the no of docs
            
//            var input = document.createElement("input");
//
//input.setAttribute("type", "hidden");
//
//input.setAttribute("name", "name_you_want");
//input.setAttribute("id", "name_you_want");
//
//input.setAttribute("value",documentName.length);
//
////append to form element that you want .
//document.appendChild(input);
          // document.getElementById('number_of_docs').value =documentName.length;
            // create nested arrays
               
        for(var i=0; i<sectionName.length; i++){
            docSec[i]=new Array();
            for(var j=0; j<documentName.length; j++){
                docSec[i][j]= new Array();
            }
        }
        
  
        docSec[0][0]=["Putable","Calleble","assets managed by","Asset Pool Equity","Strippable"];
        docSec[0][1]= ["Putable","Strippable","Asset Pool Equity","Strippable"];
        docSec[0][2]= ["Putable"];
        docSec[0][3]= ["Bond Pool","Bullet Bond","Cash CDO"];
        
        
        docSec[1][0]=[];
        docSec[1][1]= ["Putable","Strippable","Asset Pool Equity","Strippable"];
        docSec[1][2]=  ["Calleble","assets managed by","Asset Pool Equity","Strippable"];
        docSec[1][3]=  ["Bond Pool","Cash CDO"];
        
      
        docSec[2][0]=["Management Style","Seniority","CDO Portfolio Manager"];
        docSec[2][1]= ["Putable","Strippable","Asset Pool Equity","Strippable"];
        docSec[2][2]=    [];
        docSec[2][3]=  ["Bond Pool","Cash CDO"];
        
        docSec[3][0]=["Value At Issue"];
        docSec[3][1]= ["Putable","Strippable","Asset Pool Equity","Strippable"];
        docSec[3][2]=  ["Calleble","assets managed by","Asset Pool Equity","Strippable","Cash CDO"];
        docSec[3][3]=  [];
        
        docSec[4][0]=["Value At Issue"];
        docSec[4][1]= ["Putable","Strippable","Asset Pool Equity","Strippable"];
        docSec[4][2]=  ["Calleble","assets managed by","Asset Pool Equity","Strippable","Value At Issue"];
        docSec[4][3]=  ["Strippable","Asset Pool Equity"];
             
            var k = 0;
            for (var i = 0; i < sectionName.length; i++) {
                var row = {};
                row["sectionname"] = sectionName[k];
                row["sectioncatogory"] = k;
                //row["sectioncatogory"] = sectionCatogoryID[k];
                data[i] = row;
                k++;
            }
            var source =
                {
                localdata: data,
                 datatype: "array",
                datafields: [
                    { name: 'sectionname', type: 'string' },
                    { name: 'sectioncatogory', type: 'string' }
                  
                ] 
            };
            //initising the column field
             var dataFields= new Array();
           for(var i=0;i<documentName.length;i++){
                dataFields.push({name:'doc'+i, type:'string'});
            }
       
        
            var initrowdetails = function (index, parentElement, gridElement, datarecord) {
                var tabsdiv = null;
                var information = null;
                var notes = null;
                tabsdiv = $($(parentElement).children()[0]);
            
                //  alert(tabsdiv);
                var data2 = new Array();
            
           
            
                //var firstName1=datarecord.firstname;
                //var lastName1=datarecord.lastname;
                for (var i = 0; i < 10; i++) {
                    var row2 = {};
                    for (var j = 0; j < documentName.length; j++) {
                        if(typeof  docSec[datarecord.sectioncatogory][j] == 'undefined') {
                            row2["doc"+j]="";
                        }
                        else{
                            row2["doc"+j] = docSec[datarecord.sectioncatogory][j][i];
                        }
                        
                    }
                    data2[i] = row2;
            
                }
                var source2 =
                    {
                    localdata: data2,
                    datatype: "array",
                    datafields:dataFields
                };
                var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
            
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #0000ff;">' + value + '</span>';
            
                }
            
            
            
            
                //adding data to columns
                var columnsData = [];
                for (var i = 0; i < documentName.length; i++) {
                    columnsData.push({ text: documentName[i], datafield:'doc'+i , width: 150 });
                };
                if (tabsdiv != null) {        //if sub grid is not null
                    var dataAdapter2 = new $.jqx.dataAdapter(source2);
                    tabsdiv.jqxGrid({source:dataAdapter2 , theme: theme, width: 700, height: 200,columns:columnsData});
   
                }
                
       
            }
        
   var dataAdapter = new $.jqx.dataAdapter(source);
            //create Parent Grid and call to raw details
            $("#jqxgrid").jqxGrid(
            {
                width: 770,
                height: 450,
                source:dataAdapter ,
                theme: theme,
                rowdetails: true,
            
                rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true },
                ready: function () {
                    $("#jqxgrid").jqxGrid('showrowdetails', 1);
  
                },
                initrowdetails: initrowdetails,
                columns: [
                
             
                    { text: 'Doc Section Name', datafield: 'sectionname', width: 770}
                ]
            });
            
            $("#excelExport").jqxButton({ theme: theme });
            $("#xmlExport").jqxButton({ theme: theme });
            $("#csvExport").jqxButton({ theme: theme });
    
            
            $("#excelExport").click(function () {
                // alert("test");
                $("#jqxgrid").jqxGrid('exportdata', 'xls','doccomparison');  
              
            });
            
            $("#xmlExport").click(function () {
                // alert("test");
                $("#jqxgrid").jqxGrid('exportdata', 'xml','doccomparison');  
              
            });
          
            $("#csvExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'csv','doccomparison');
            });
           
        });
</script>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div id="jqxgrid"></div>
     <br/>
    <div style='float: left;'>
        <input type="button" value="Export to Excel" id='excelExport' />
        <input type="button" value="Export to CSV" id='csvExport' />
        <input type="button" value="Export to XML" id='xmlExport' />
    </div>
</div>

November 9, 2012 at 9:23 am Export data from a nested grid #10776

Dimitar

Participant

Hello kkasunperera,

Exporting of the nested grid is not supported. Please check out the following forum topic for more information on the matter: Expectation on data exporting.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

November 12, 2012 at 4:34 am Export data from a nested grid #10848

kkasunperera

Member

Hi Dimitar

I do understand that exporting nested grid is not supported yet.
But I’m thinking about a workaround to export child grid data, here is what I’m trying to do

I’m trying to loop through child grids and get the child grid Id. Then using the child grid ID, export child grids separately with the main grid.
Will this work?
if it works how can I obtain the childgridID’s from the parentGrid?

   $("#gridCsvExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'csv','doccomparison');
                var childGridID= new Array(); 
                //how do I get chidgrid ID's' ???
             for(var i; i<childGridID.lenth;i++){
               $(childGridID[i]).jqxGrid('exportdata', 'csv','doccomparison');   
             }

Thanks

November 12, 2012 at 7:46 am Export data from a nested grid #10859

Dimitar

Participant

Hi kkasunperera,

A solution on the matter is to add the tabsdiv jQuery object in an array when initrowdetails is called. You can use these objects to export each nested grid.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

November 12, 2012 at 8:27 am Export data from a nested grid #10861

kkasunperera

Member

Hi Dimitar

I’m trying this code , but export function still works only for parentgrid.
Do you see anything wrong with this code?

            var childGridObj = {};
            var initrowdetails = function (index, parentElement, gridElement, datarecord) {
                var tabsdiv = null;
               // var tabsdiv2 = null;
                var information = null;
                var notes = null;
                tabsdiv = $($(parentElement).children()[0]);
               
                childGridObj[index]=tabsdiv;
                 }
$("#gridCsvExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'csv','doccomparison');
               var noofrows=  $("#jqxgrid").jqxGrid('getrows').length;    
             for(var i=0;i<noofrows;i++){
                 if(typeof  childGridObj[i] != 'undefined'){
                  childGridObj[i].jqxGrid('exportdata', 'csv','doccomparison');
                 }
             }
               
              
            });

November 12, 2012 at 8:54 am Export data from a nested grid #10867

Dimitar

Participant

Hi kkasunperera,

The issue comes from trying to export all data into one file, i.e. ‘doccomparison’. Note that you can set a parameter to the exportdata method which determines the array of rows to be exported. For all available paramerters, please refer to jqxGrid’s API.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

November 12, 2012 at 9:48 am Export data from a nested grid #10875

kkasunperera

Member

Hi Dimitar
Well i’m trying with giving a different name as below now, but only one export is happening.
So it’s really not the samename of output file?
Something like it only allows one export per one button click? any ideas?

$("#gridCsvExport").click(function () {
               // $("#jqxgrid").jqxGrid('exportdata', 'csv','doccomparison');
               var noofrows=  $("#jqxgrid").jqxGrid('getrows').length;    
             for(var i=0;i<noofrows;i++){
                 alert("inside loop");
                 if(typeof  childGridObj[i] != 'undefined'){
                    alert("inside if condition");
                  childGridObj[i].jqxGrid('exportdata', 'csv','doccomparison_'+i);
                 }
             }
               
              
            });

November 12, 2012 at 10:00 am Export data from a nested grid #10877

Dimitar

Participant

Hi kkasunperera,

One thing you can do is save the rows of the nested grids in an array and then set it as a parameter to the export method so that the rows in the array are exported.

We cannot think of another solution on the matter.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

November 16, 2012 at 5:42 am Export data from a nested grid #11082

kkasunperera

Member

Hi Dimitar

I’m tring to do what you have suggested, but I’m confused how to do export selected rows. Description on the API is not clear to me, this the code I worte to export selected rows. But it’s not working. Can you please tel me what’s the wrong with it?


 $("#gridCsvExport").click(function () {
                
              
                var data=new Array();
               var noofrows=  $("#jqxgrid").jqxGrid('getrows').length;  
               for(var i=0;i< noofrows-2;i++){
                data[i] = $('#jqxgrid').jqxGrid('getrowdata', i);   
               }
              
               $("#jqxgrid").jqxGrid('exportdata', 'csv','doccomparison',true, data);
            
              
            });

November 16, 2012 at 7:38 am Export data from a nested grid #11084

Dimitar

Participant

Hi kkasunperera,

Basically, what you need to do is, each time initrowdetails is called, get the rows of the current child (nested) grid and put them in an array. After that you will have an array with all the rows of all the child grids. You can then use the array to export all the information into a single file.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

November 16, 2012 at 8:29 am Export data from a nested grid #11089

kkasunperera

Member

Hi Dimitar

Thanks I got what you said (you said this in earlier reply too) ,. What I want to know is how to export the array?

var data =new Array();
data=  $("#jqxgrid").jqxGrid('getrows');

Then hoe do I export this array ? I couldn’t find how to do it on API?

November 16, 2012 at 8:37 am Export data from a nested grid #11092

Dimitar

Participant

Hi kkasunperera,

Please check out the documentation on the method exportdata in jqxGrid’s API. Of importance here is the fourth parameter:

The fourth parameter is optional and determines the array of rows to be exported. By default all rows are exported. Set null, if you want all rows to be exported.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

November 16, 2012 at 8:43 am Export data from a nested grid #11093

kkasunperera

Member

Hi Dimitar

Yes I saw that, that’s what i’m confused of

This the code I wrote, for the 4th parameter I have given the array of data that I want to export(see my code). But it does export all the data (not that data that I wanted to export)

 $("#gridCsvExport").click(function () {
                var data=new Array();
               var noofrows=  $("#jqxgrid").jqxGrid('getrows').length;
               for(var i=0;i< noofrows-2;i++){
                data[i] = $('#jqxgrid').jqxGrid('getrowdata', i);
               }
               $("#jqxgrid").jqxGrid('exportdata', 'csv','doccomparison',true, data);
            });

Can you tell whether anything wrong with above code. or can you provide me a simple example of how to export array of rows?

November 19, 2012 at 8:37 am Export data from a nested grid #11172

Dimitar

Participant

Hi kkasunperera,

Here is an example which shows export of the rows of nested grids. However, note that to export a nested grid, it must first be initialized (initrowdetails called), i.e. the parent row should be “expanded”. The rows of the grids are also exported in the order of initialization of their respective grids.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to display nested Grid plugins.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.export.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.export.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            // cretes an array which will hold the rows of the nested grids
            var data = new Array();
            // creates a variable which will hold the rows of each nested grid
            var nestedRows;
            var url = "../demos/sampledata/employees.xml";
            var source =
            {
                datafields: [
                    { name: 'FirstName' },
                    { name: 'LastName' },
                    { name: 'Title' },
                    { name: 'Address' },
                    { name: 'City' }
                ],
                root: "Employees",
                record: "Employee",
                id: 'EmployeeID',
                datatype: "xml",
                async: false,
                url: url
            };
            var employeesAdapter = new $.jqx.dataAdapter(source);
            var orderdetailsurl = "../demos/sampledata/orderdetails.xml";
            var ordersSource =
            {
                datafields: [
                    { name: 'EmployeeID' },
                    { name: 'ShipName' },
                    { name: 'ShipAddress' },
                    { name: 'ShipCity' },
                    { name: 'ShipCountry' },
                    { name: 'ShippedDate' }
                ],
                root: "Orders",
                record: "Order",
                datatype: "xml",
                url: orderdetailsurl,
                async: false
            };
            var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true });
            orders = ordersDataAdapter.records;
            var nestedGrid = null;
            // create nested grid.
            var initrowdetails = function (index, parentElement, gridElement, record) {
                var id = record.uid.toString();
                var grid = $($(parentElement).children()[0]);
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 1;
                var filtervalue = id;
                var filtercondition = 'equal';
                var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                // fill the orders depending on the id.
                var ordersbyid = [];
                for (var m = 0; m < orders.length; m++) {
                    var result = filter.evaluate(orders[m]["EmployeeID"]);
                    if (result)
                        ordersbyid.push(orders[m]);
                }
                var orderssource = { datafields: [
                    { name: 'EmployeeID' },
                    { name: 'ShipName' },
                    { name: 'ShipAddress' },
                    { name: 'ShipCity' },
                    { name: 'ShipCountry' },
                    { name: 'ShippedDate' }
                ],
                    id: 'OrderID',
                    localdata: ordersbyid
                }
                if (grid != null) {
                    grid.jqxGrid({ source: orderssource, theme: theme, width: 600, height: 200,
                        columns: [
                          { text: 'Ship Name', datafield: 'ShipName', width: 200 },
                          { text: 'Ship Address', datafield: 'ShipAddress', width: 200 },
                          { text: 'Ship City', datafield: 'ShipCity', width: 150 },
                          { text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
                          { text: 'Shipped Date', datafield: 'ShippedDate', width: 200 }
                       ]
                    });
                }
                nestedRows = grid.jqxGrid('getrows');
                $.each(nestedRows, function () {
                    data.push(this);
                });
                nestedGrid = grid;
            }
            var photorenderer = function (row, column, value) {
                var name = $('#jqxgrid').jqxGrid('getrowdata', row).FirstName;
                var imgurl = '../../images/' + name.toLowerCase() + '.png';
                var img = '<div style="background: white;"><img style="margin:2px; margin-left: 10px;" width="32" height="32" src="' + imgurl + '"></div>';
                return img;
            }
            var renderer = function (row, column, value) {
                return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>';
            }
            // creage jqxgrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                height: 365,
                source: source,
                theme: theme,
                rowdetails: true,
                rowsheight: 35,
                initrowdetails: initrowdetails,
                rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true },
                ready: function () {
                    $("#jqxgrid").jqxGrid('showrowdetails', 1);
                },
                columns: [
                      { text: 'Photo', width: 50, cellsrenderer: photorenderer },
                      { text: 'First Name', datafield: 'FirstName', width: 100, cellsrenderer: renderer },
                      { text: 'Last Name', datafield: 'LastName', width: 100, cellsrenderer: renderer },
                      { text: 'Title', datafield: 'Title', width: 180, cellsrenderer: renderer },
                      { text: 'Address', datafield: 'Address', width: 300, cellsrenderer: renderer },
                      { text: 'City', datafield: 'City', width: 170, cellsrenderer: renderer }
                  ]
            });
            $("#exportButton").click(function () {
                if (nestedGrid) {
                    nestedGrid.jqxGrid('exportdata', 'csv', 'doccomparison', true, data);
                }
            });
        });
    </script>
</head>
<body class='default'>
    <button id="exportButton">
        Export!</button>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

September 5, 2013 at 4:32 pm Export data from a nested grid #28406

Dylanotron

Member

The last example will export a nested grid. Is there a way to export a document with both the parent(s) and associated nested grid?

Author

Posts

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

You must be logged in to reply to this topic.