jQWidgets Forums

Tagged: #pivotgrid, javascript pivotgrid, jquery pivotgrid, jqwidgets pivotgrid, pivot

This topic contains 1 reply, has 2 voices, and was last updated by Hristo 6 years, 7 months ago.

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

Author

pivotGrid data refresh Posts

August 31, 2018 at 10:30 pm pivotGrid data refresh #101785

chanho

Participant

I do not have local data and I want to get the data out of the pivotgrid when the ajax call succeeds.
I want to know two things.

First, if the pivotgrid does not have local data, it is normal for the pivotgrid not to have any headers or columns.
The general grid does not have the data, but the header is well.

Second, I want to load the data at the click of a button and get it to the pivotGrid
Not good.

I want you to help me.

$ (“# RefreshButton”) At button click
I want to get the data out.

$(document).ready(function () {
//
var newData = [
{ employee: ‘s1’, month: ‘Jan’, commission: 0 },
{ employee: ‘s2’, month: ‘Jan’, commission: 200 },
{ employee: ‘s1’, month: ‘Mar’, commission: 100 },
{ employee: ‘s3’, month: ‘Apr’, commission: 200 },
{ employee: ‘s4’, month: ‘May’, commission: 100 },
{ employee: ‘s1’, month: ‘Apr’, commission: 50 }
];

// create a data source and data adapter
var source =
{
localdata: [],
datatype: “array”,
datafields:
[
{ name: ’employee’, type: ‘string’ },
{ name: ‘month’, type: ‘string’ },
{ name: ‘commission’, type: ‘number’ },
{ name: ‘total’ }
]
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {
// get data records.
var records = dataAdapter.records;

var length = records.length;

}
});
dataAdapter.dataBind();

// create a pivot data source from the dataAdapter
var pivotDataSource = new $.jqx.pivot(
dataAdapter,
{
pivotValuesOnRows: true,
totals: {
rows: {
subtotals: true,
grandtotals: true
},
columns: {
subtotals: true,
grandtotals: true
}
},
rows: [{ dataField: ’employee’, width: 70 }],
columns: [{ dataField: ‘month’ }],
values: [
{ dataField: ‘commission’, width: 70, ‘function’: ‘sum’, text: ” ” }
]
});
// create a pivot grid
$(‘#divPivotGrid’).jqxPivotGrid(
{
source: pivotDataSource,
treeStyleRows: false,
autoResize: false,
multipleSelectionEnabled: true
});

$(“#RefreshButton”).click(function () {
//will ajax recieve data
source.localdata = newData,
dataAdapter.dataBind();

});
});

September 3, 2018 at 9:23 am pivotGrid data refresh #101795

Hristo

Participant

Hello chanho,

The rows and the columns are determined by the records and its values.
For this reason, if you do not have records there then you will have one empty jqxPivotGrid.
As a workaround for this, you could create one record that to use it to describe the content.

About the refresh method – yes, the jqxPivotGrid has such method.
You could update the “DataAdapter” and the “pivotDataSource” and after that to set it to the jqxPivotGrid.
Please, take a look at this example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>JavaScript PivotGrid - olap and tree style rows display</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.light.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.12.4.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/jqxpivot.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>

    <script type="text/javascript">
        $(document).ready(function ()
        {
            // prepare sample data
            var data = new Array();

            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter"
            ];

            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase"
            ];

            var productNames =
            [
                "45 columns",
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist",
                "New Black Tea", "New Green Tea", "New Caffe Espresso", "New Doubleshot Espresso", "New Caffe Latte", "New White Chocolate Mocha", "New Cramel Latte", "New Caffe Americano", "New Cappuccino", "New Espresso Truffle", "New Espresso con Panna", "New Peppermint Mocha Twist",

                "Black Tea X", "Green Tea X", "Caffe Espresso X", "Doubleshot Espresso X", "Caffe Latte X", "White Chocolate Mocha X", "Cramel Latte X", "Caffe Americano X", "Cappuccino X", "Espresso Truffle X", "Espresso con Panna X", "Peppermint Mocha Twist X",
                "New Black Tea X", "New Green Tea X", "New Caffe Espresso X", "New Doubleshot Espresso X", "New Caffe Latte X", "New White Chocolate Mocha X", "New Cramel Latte X", "New Caffe Americano X", "New Cappuccino X", "New Espresso Truffle X", "New Espresso con Panna X", "New Peppermint Mocha Twist X"
            ];

            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];

            for (var i = 0; i < 5000; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);

                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;

                data[i] = row;
            }

            // create a data source and data adapter
            var source =
            {
                localdata: [],  //data,
                datatype: "array",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'total', type: 'number' }
                ]
            };

            var dataAdapter = new $.jqx.dataAdapter(source);
            dataAdapter.dataBind();

            // create a pivot data source from the dataAdapter
            var pivotDataSource = new $.jqx.pivot(
                dataAdapter,
                {
                    pivotValuesOnRows: false,
                    rows: [{ dataField: 'firstname' },
                        { dataField: 'lastname' }],
                    columns: [{ dataField: 'productname' }],
                    filters: [
                        {
                            dataField: 'productname',
                            filterFunction: function (value)
                            {
                                if (value == "Black Tea" || value == "Green Tea")
                                    return true;

                                return false;
                            }
                        }
                    ],
                    values: [
                        { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2 } },
                        { dataField: 'price', 'function': 'count', text: 'count' },
                        { dataField: 'price', 'function': 'average', text: 'average', formatSettings: { prefix: '$', decimalPlaces: 2 } }
                    ]
                });

            // create a pivot grid
            $('#divPivotGrid').jqxPivotGrid(
            {
                source: pivotDataSource,
                treeStyleRows: false,
                autoResize: false,
                multipleSelectionEnabled: true
            });
            // get the pivot grid instance
            var pivotGridInstance = $('#divPivotGrid').jqxPivotGrid('getInstance');

            var isClicked = false;
            $('#btnCheckRowsDisplayStyle').jqxToggleButton({ width: 200 });
            $('#btnCheckRowsDisplayStyle').on('click', function ()
            {
                isClicked = !isClicked;

                if (isClicked) {
                    source.localdata = data;
                } else {
                    source.localdata = [];
                }

                dataAdapter.dataBind();
                pivotDataSource.dataBind();

                $('#divPivotGrid').jqxPivotGrid({
                    source: pivotDataSource
                });

                pivotGridInstance.refresh();
            });

        });
    </script>
</head>
<body class='default'>
    <div id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </div>
    <br />
    <input id="btnCheckRowsDisplayStyle" style="height: 30px;" type="button" value="Change Data" />
</body>
</html>

Best Regards,
Hristo Hristov

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.