jQuery UI Widgets Forums Grid Keep decimal places when exporting GridView to Excel

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 9 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • karthic_cdm
    Participant

    Hi,
    I need to deploy export to excel functionality in JQXgrid.
    But some of the columns have decimal values.
    I try to format those columns to 2 decimal values,during export to excel.
    Result is getting those columns without formatting.(such as 24234.0608745 instead of 24234.06)
    In my project,all of the values are retrieved dynamically from database.
    Below is my code.Please help me.
    Thanks in advance.

    function JqxGridCreate(jqxDiv, ajaxURL, hiddenJQX) {
    // $(document).ready(function () {

    try {
    // debugger;
    $.ajax({
    type: “POST”,
    url: ajaxURL,
    data: “{}”,
    contentType: “application/json; charset=utf-8”,
    success: SuccessTestService,
    dataType: “json”,
    failure: ajaxCallFailed
    });
    }
    catch (e) {
    alert(‘failed to call web service. Error: ‘ + e);
    }

    var pagerrenderer = function () {
    var element = $(“<div style=’margin-top: 5px; width: 100%; height: 100%;’></div>”);
    var paginginfo = $(jqxDiv).jqxGrid(‘getpaginginformation’);
    for (i = 0; i < paginginfo.pagescount; i++) {
    // add anchor tag with the page number for each page.
    var anchor = $(“” + i + ““);
    anchor.appendTo(element);
    anchor.click(function (event) {
    // go to a page.
    var pagenum = parseInt($(event.target).text());
    $(jqxDiv).jqxGrid(‘gotopage’, pagenum);
    });
    }
    return element;
    }

    function SuccessTestService(response) {
    debugger;
    var jsdata = JSON.parse(response.d);
    var columns = jsdata[0].columns;
    var rows = jsdata[1].rows;
    var listsourcedata = jsdata[2].listsource;
    var datafield = jsdata[3].Table3;

    var source =
    {
    datatype: “json”,
    datafields: datafield,
    localdata: rows
    };

    var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
    if (value < 20) {
    return ‘<span style=”margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; color: #ff0000;”>’ + value + ‘</span>’;
    }
    else {
    return ‘<span style=”margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; color: #008000;”>’ + value + ‘</span>’;
    }
    }

    var dataAdapter = new $.jqx.dataAdapter(source, {
    downloadComplete: function (data, status, xhr) { },
    loadComplete: function (data) { },
    loadError: function (xhr, status, error) { }
    });

    $(jqxDiv).jqxGrid(
    {
    source: dataAdapter,
    ready: function () {
    // callback function which is called by jqxGrid when the widget is initialized and the binding is completed.
    },
    columnsresize: true,
    sortable: true,
    pageable: true,
    autoheight: true,
    // pagerrenderer: pagerrenderer,
    width: ‘100%’,
    filterable: true,
    columnsheight: 75,
    pagesizeoptions: [‘5′, ’10’, ’20’, ’30’, ’50’],
    theme: ‘arctic’,
    columns: columns
    });

    FillDropDownList(listsourcedata);

    $(“#excelExport”).jqxButton({ theme: ‘arctic’ });

    $(“#csvExport”).jqxButton({ theme: ‘arctic’ });

    }

    function FillDropDownList(listsourcedata) {
    //debugger;
    $(“#jqxdropdownlist”).jqxDropDownList({ source: listsourcedata, filterable: true, checkboxes: true, displayMember: “label”, valueMember: “value”, width: 200, height: 25 });

    $(“#jqxdropdownlist”).on(‘checkChange’, function (event) {
    $(jqxDiv).jqxGrid(‘beginupdate’);
    if (event.args.checked) {
    $(jqxDiv).jqxGrid(‘showcolumn’, event.args.value);
    }
    else {
    $(jqxDiv).jqxGrid(‘hidecolumn’, event.args.value);
    }
    $(jqxDiv).jqxGrid(‘endupdate’);
    });
    }

    function ajaxCallFailed(error) {
    alert(‘error: ‘ + error);
    }
    //});
    }
    function ExportTO() {
    var exportInfo;
    exportInfo = $(jqxDiv).jqxGrid(‘exportdata’, ‘xls’);
    $(hiddenJQX).val(“”);
    $(hiddenJQX).val(exportInfo);
    }

    function ExportTOCSV() {
    var exportInfo;
    exportInfo = $(jqxDiv).jqxGrid(‘exportdata’, ‘csv’);
    $(hiddenJQX).val(“”);
    $(hiddenJQX).val(exportInfo);
    }

    Regards,
    Karthic Srinivasan

    • This topic was modified 9 years, 1 month ago by  Peter Stoev. Reason: Moved to Grid Forum, because was posted in Wrong Forum

    Dimitar
    Participant

    Hello Karthic Srinivasan,

    In the provided sample there is no code which changes the numbers formatting to two decimal values. Our suggestion is to apply the property cellsformat with a value of “f2” (for floating point numbers with two decimal values) to your number column. Since your columns object is automatically generated, you would have to set the cellsformat column field before you initialize the grid. E.g., if the numbers column is the first one, add the following line before the grid initialization code:

    columns[0].cellsformat = 'f2';
    
    $(jqxDiv).jqxGrid({
        source: dataAdapter,
        ready: function () {
            // callback function which is called by jqxGrid when the widget is initialized and the binding is completed.
        },
        columnsresize: true,
        sortable: true,
        pageable: true,
        autoheight: true,
        // pagerrenderer: pagerrenderer,
        width: '100%',
        filterable: true,
        columnsheight: 75,
        pagesizeoptions: ['5', '10', '20', '30', '50'],
        theme: 'arctic',
        columns: columns
    });

    Best Regards,
    Dimitar

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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.