Talal Tahir Malik
Talal Tahir Malik

Reputation: 175

How to convert gridview data to Json?

I have a task in which i have to create a gridview with data from database and export the information from the Gridview to Pdf and also Json.

I am done with PDF part but now i am stuck at the Json part and i have no idea how to achieve it.

var json = new JavaScriptSerializer().Serialize(GridViewStudents.Rows);
Response.ContentType = "application/json; charset=utf-8";
Response.AppendHeader("content-disposition", "attachment;filename=Students.txt");
Response.Write(json);
Response.End();

This is what i was trying to do. I need to first convert the data from

  1. Gridview to Json

  2. Export the data to some file like txt file which will show the convertable data.

The code i have already written gives and error which states

A circular reference was detected while serializing an object of type 'System.Web.UI.WebControls.GridViewRow'

Can any one help me through this and find the appropriate solution.

Thank you.

Upvotes: 0

Views: 2991

Answers (1)

Ankita Biswas
Ankita Biswas

Reputation: 443

include these files

<script src="~/Scripts/jquery.base64.js"></script>
<script src="~/Scripts/tableExport.js"></script>
<script src="~/Scripts/jspdf/libs/base64.js"></script>
<script src="~/Scripts/jspdf/jspdf.js"></script>
<script src="~/Scripts/jspdf/FileSaver.js"></script>
<script src="~/Scripts/jspdf/jspdf.plugin.cell.js"></script>

And then add these functions to your scripts

function ExportTpGridtoPDF(divid) {
    var table1 =
   tableToJson($('#' + divid + ' .grid-table').get(0)),
   cellWidth = 35,
   rowCount = 0,
   cellContents,
   //leftMargin = 2,
   //topMargin = 12,
   //topMarginTable = 55,
   //headerRowHeight = 13,
   //rowHeight = 9,
   leftMargin = 10,
   topMargin = 15,
   topMarginTable = 5,
   headerRowHeight = 13,
   rowHeight = 13,

    l = {
        orientation: 'l',
        unit: 'mm',
        format: 'a3',
        compress: true,
        fontSize: 8,
        lineHeight: 1,
        autoSize: false,
        printHeaders: true
    };

    var doc = new jsPDF(l, '', '', '');

    doc.setProperties({
        title: 'Test PDF Document',
        subject: 'This is the subject',
        author: 'author',
        keywords: 'generated, javascript, web 2.0, ajax',
        creator: 'author'
    });

    doc.cellInitialize();

    $.each(table1, function (i, row) {

        rowCount++;

        $.each(row, function (j, cellContent) {
            if (rowCount == 1) {
                doc.margins = 1;
                doc.setFontSize(12);

                doc.cell(leftMargin, topMargin, cellWidth, headerRowHeight, cellContent, i)
            }
            else if (rowCount == 2) {
                doc.margins = 1;
                doc.setFontSize(12);

                doc.cell(leftMargin, topMargin, cellWidth, rowHeight, cellContent, i);
            }
            else {

                doc.margins = 1;
                doc.setFontSize(12);

                doc.cell(leftMargin, topMargin, cellWidth, rowHeight, cellContent, i);
            }
        })
    })

    doc.save('sample Report.pdf');
}

function tableToJson(table) {
    var data = [];

    // first row needs to be headers
    var headers = [];
    for (var i = 0; i < table.rows[0].cells.length; i++) {
        if (table.rows[0].cells[i].innerHTML != "") {
            headers[i] = table.rows[0].cells[i].innerText.toLowerCase().replace(/ /gi, '');
        }
    }
    // go through cells
    for (var i = 1; i < table.rows.length; i++) {
        var tableRow = table.rows[i];
        var rowData = {};
        for (var j = 1; j < tableRow.cells.length; j++) {
            rowData[headers[j]] = tableRow.cells[j].innerText;
        }
        data.push(rowData);
    }
    return data;
}

Upvotes: 1

Related Questions