jQuery UI Widgets Forums Grid With Column Pivot Grid

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 9 months, 3 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • With Column Pivot Grid #107463

    paulo33
    Participant

    How to define the column width of Pivot Grid ??

    With Column Pivot Grid #107485

    Hristo
    Participant

    Hello paulo33,

    You should use the width member for the column that you want to change its default width.
    This should be added to the particular item from the values member.
    Please, take a look at this example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>JavaScript PivotGrid - Custom Pivot Function</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", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
                ];
    
                var lastNames =
                [
                    "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
                ];
    
                var productNames =
                [
                    "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"
                ];
    
                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 < 500; 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,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
    
                                // sample's mean
                                var mean = 0;
                                for (var i = 0; i < values.length; i++)
                                    mean += values[i];
    
                                mean /= values.length;
    
                                // calc squared sum
                                var ssum = 0;
                                for (var i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
    
                                // calc the variance
                                var variance = ssum / values.length;
    
                                return variance;
                            }
                        },
                        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', width: 120, 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', width: 190, 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    });
    
                // create a pivot grid
                $('#divPivotGrid').jqxPivotGrid(
                    {
                        source: pivotDataSource,
                        treeStyleRows: false, // change this property to switch between treestyle and olap style display
                        autoResize: false,
                        multipleSelectionEnabled: true
                    });
    
            });
        </script>
    </head>
    <body>
        <div id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
        </div>
    </body>
    </html>
    

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.