jQWidgets Forums

Tagged: calculation, excel, grid, jqxgrid, value

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 11 years, 8 months ago.

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

Author

how to re-calculator in cells? Posts

September 14, 2013 at 12:56 pm how to re-calculator in cells? #28987

Nguyen Huu Hanh Lam

Participant

I have a grid and want re-calc its values then save all of them, how i do this?

Ex:

| field1 | field2 | field3 = field1 + field2

September 16, 2013 at 6:50 am how to re-calculator in cells? #29014

Dimitar

Participant

Hello Nguyen Huu Hanh Lam,

Here is a modified version of the example Spreadsheet which achieves the requested functionality:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.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/jqxdata.export.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.edit.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.export.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            // renderer for grid cells.
            var numberrenderer = function (row, column, value) {
                return '<div style="text-align: center; margin-top: 5px;">' + (1 + value) + '</div>';
            }
            var cellvaluechanging = function (row, datafield, columntype, oldvalue, newvalue) {
                if (datafield == "A") {
                    var valueB = $('#jqxgrid').jqxGrid('getcellvalue', row, "B");
                    var valueC = parseFloat(newvalue) + parseFloat(valueB ? valueB : 0);
                    $("#jqxgrid").jqxGrid('setcellvalue', row, "C", valueC);
                } else if (datafield == "B") {
                    var valueA = $('#jqxgrid').jqxGrid('getcellvalue', row, "A");
                    var valueC = parseFloat(newvalue) + parseFloat(valueA ? valueA : 0);
                    $("#jqxgrid").jqxGrid('setcellvalue', row, "C", valueC);
                };
            };
            // create Grid datafields and columns arrays.
            var datafields = [];
            var columns = [];
            for (var i = 0; i < 26; i++) {
                var text = String.fromCharCode(65 + i);
                if (i == 0) {
                    var cssclass = 'jqx-widget-header';
                    if (theme != '') cssclass += ' jqx-widget-header-' + theme;
                    columns[columns.length] = { pinned: true, exportable: false, text: "", columntype: 'number', cellclassname: cssclass, cellsrenderer: numberrenderer };
                }
                datafields[datafields.length] = { name: text };
                columns[columns.length] = { text: text, datafield: text, width: 60, align: 'center', cellvaluechanging: cellvaluechanging };
            }
            var source =
            {
                unboundmode: true,
                totalrecords: 100,
                datafields: datafields,
                updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command   
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                editable: true,
                columnsresize: true,
                selectionmode: 'multiplecellsadvanced',
                theme: theme,
                columns: columns
            });
            $("#excelExport").jqxButton({ theme: theme });
            $("#excelExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid', false);
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
        <div style='margin-top: 20px;'>
            <div style='float: left;'>
                <input type="button" value="Export to Excel" id='excelExport' />
            </div>
        </div>
    </div>
</body>
</html>

In this case “C” = “A” + “B”.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.