jQuery UI Widgets Forums General Discussions jqxpivotgrid collapse button

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

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

    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

    jqxpivotgrid collapse button #99248

    hhm8152
    Participant

    Thanks!

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

You must be logged in to reply to this topic.