jqxpivotgrid collapse button - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: #pivotgrid, add element, collapse, expand, itemsRenderer, javascript pivotgrid, jquery pivotgrid, jqwidgets pivotgrid

This topic contains 2 replies, has 2 voices, and was last updated by hhm8152 6 years, 8 months ago.

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

Author

jqxpivotgrid collapse button Posts

March 14, 2018 at 4:52 pm jqxpivotgrid collapse button #99210

hhm8152

Participant

I followed this demo code.
But How can I add collapse button (plus button and minus button) in the customItemRenderer?
If I didn’t use customItemRenderer function, there is collapse button but if I used customItemRenderer function, collapse button was gone.
How can I fix it?

March 15, 2018 at 12:56 pm jqxpivotgrid collapse button #99232

Hristo

Participant

Hello hhm8152,

You could add this customization with itemsRenderer with a few checks about the item.isExpanded and also this item child or parent is.
Please take a look at this example below based on the “Pivot grid custom rendering” demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>JavaScript PivotGrid - rows, columns and pivot cells with custom HTML</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="https://code.jquery.com/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,
                {
                    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, // change this property to switch between treestyle and olap style display
                    autoResize: false,
                    multipleSelectionEnabled: true,
                    itemsRenderer: function (pivotItem) {
                        var backgroundColor = pivotItem.isColumn ? 'rgba(187, 232, 227, 255)' : 'rgba(203, 254, 187, 255)';
                        if (pivotItem.isSelected)
                            backgroundColor = pivotItem.isColumn ? 'rgba(167, 212, 207, 255)' : 'rgba(183, 234, 157, 255)';

                        var sortElement = '';
                        if (pivotItem.hierarchy.getSortItem() == pivotItem)
                        {
                            var elementClass = pivotItem.hierarchy.getSortOrder() == 'desc' ? "jqx-icon-arrow-down" : "jqx-icon-arrow-up";
                            sortElement = "<div id='sortElement' class='" + elementClass + "' style='position: relative; float: right; margin-right: 0px; width: 16px; height: 100%; line-height: 100%;'></div>";
                        }

                        var additionalItem = '';
                        if (!pivotItem.isColumn) {
                            var classStyle = 'jqx-pivotgrid-expand-button';
                            if (pivotItem.isExpanded) {
                                classStyle = 'jqx-pivotgrid-collapse-button';
                            }

                            additionalItem = '<div style="position: relative; top: 5px; padding: 5px; width: 11px; height: 11px;" class="' + classStyle + '"></div>'

                            if (pivotItem.items.length == 0) {
                                additionalItem = '';
                            }
                        }

                        return additionalItem + "<div style='background: "
                            +  backgroundColor
                            + "; width: calc(100% - 8px); height: calc(100% - 8px); padding: 4px;'>"
                            + pivotItem.text
                            + sortElement
                            + "</div>";
                    },
                    cellsRenderer: function (pivotCell) {

                        var colors = ['rgba(248, 105, 107, 255)', 'rgba(250,170,120,255)', 'rgba(255,230,130,255)', 'rgba(175,215,130,255)', 'rgba(100,190,120,255)'];
                        var selectedColors = ['rgba(228, 85, 87, 255)', 'rgba(230,150,100,255)', 'rgba(235,210,110,255)', 'rgba(155,195,110,255)', 'rgba(80,170,100,255)'];

                        var val = Math.min(pivotCell.value, 20);
                        var backgroundColor = pivotCell.isSelected ? selectedColors[Math.round(val / 5)] : colors[Math.round(val / 5)];

                        if (pivotCell.pivotColumn.text != 'Sum')
                            backgroundColor = pivotCell.isSelected  ? 'rgba(225, 225, 225, 255)' : 'rgba(255, 255, 255, 255)';

                        if (pivotCell.isSelected)
                            backgroundColor 

                        var cellText = pivotCell.value == 0 ? '' : pivotCell.formattedValue;
                        return "<div style='background: " + backgroundColor + "; width: calc(100%-8px); height: 100%; padding: 4px; margin: 0px;'>" + cellText + "</div>";
                    },

                });
        });
    </script>
</head>
<body class='default'>
    <div id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </div>
    <div class="example-description">
        <br />
        <h2>Description</h2>
        <div style="width: 800px;">
            This is an example of Pivot Grid with custom style of the grid cells depending on their current value. You can change the
            rendering of any cell, row or column and insert your own HTML content by implementing the itemsRenderer and cellsRenderer functions.
            In this case, the custom code simply chooses among five predefined colors and sets the backgroundColor property of the
            cell content. This color customization is applied only to the cells with 'Sum' aggregation function. You can change
            the code of the itemsRender and cellsRenderer functions and implement your own customization logic using standard HTML and CSS.
        </div>
    </div>

</body>
</html>

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

March 15, 2018 at 7:58 pm jqxpivotgrid collapse button #99248

hhm8152

Participant

Thanks!

Author

Posts

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

You must be logged in to reply to this topic.