jQuery UI Widgets Forums Grid pivotGrid data refresh

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 1 year ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • 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();

    });
    });

    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

    • This reply was modified 1 year ago by  Hristo.
    • This reply was modified 1 year ago by  Hristo.
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.