jQWidgets Forums

Tagged: javascript pivot grid, jquery pivot grid, jqxpivotgrid, pivot grid

This topic contains 10 replies, has 4 voices, and was last updated by alejo9109 7 years, 5 months ago.

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

Author

Rowheight in jqxPivotGrid Posts

September 8, 2017 at 7:04 pm Rowheight in jqxPivotGrid #95907

Participant

Hello,

I am testing jqxPivotGrid using your cdn/hosting(https://jqwidgets.com/public/jqwidgets/jqx-all.js) I have the pivot grid working, it is basically a copy of your sample with pivot Grid designer. I have two oddities.
1). my columns have a ‘+’ sign to expand them. On just those columns, the bottom portion of the text is cutoff. I would like to make the row larger. How do I do this (increase height).
2). When I try to drag and drop fields to change the layout… I can pick up a field, drag it to the new attribute (row/column/filter/value), but it appears to leave a “ghost image” of the column I am moving. By this, I mean that it almost looks as it there was a copy and paste of the pixels about halfway through the move, and then the Pivotgrid does not update it’s layout.

Any ideas?

September 12, 2017 at 4:36 am Rowheight in jqxPivotGrid #95948

Peter Stoev

Keymaster

Hi George,

To update the row height of the Pivot Grid, use this:

            $('#divPivotGrid').jqxPivotGrid('getPivotRows').items[0].setHeight(100);
            $('#divPivotGrid').jqxPivotGrid('refresh');

For item 2, I do not understand it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

September 18, 2017 at 5:22 pm Rowheight in jqxPivotGrid #96099

George S

Participant

I am starting to think that it is a CSS issue, although I can’t figure out why.
I am using ONLY the following CSS

https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css
https://jqwidgets.com/public/jqwidgets/styles/jqx.light.css
https://jqwidgets.com/public/jqwidgets/styles/jqx.fresh.css
https://jqwidgets.com/public/jqwidgets/styles/jqx.metrodark.css

I am having several (probably related) video issues. The bottom portion of the text in the rows are cut off. However, if I have 2 values for rows, for example, manager and employee, when collapsed, the bottom portion of the manager name is cut off. When I expand, both Manager and Employee display fine.
The second issue is that when I move columns from one area to another, the movement leaves a ghost image, meaning that the PivotGrid does NOT entirely erase what was displayed during the movement, and when finished, does NOT refresh the grid. I notice that when I finish the operation, I am getting a javascript error… Uncaught TypeError: Cannot read properly ‘length’ of undefined in jqx-all.js:23

Here is what I see. http://i67.tinypic.com/11j3u6t.png
Display issue

September 18, 2017 at 5:24 pm Rowheight in jqxPivotGrid #96100

George S

Participant

Additional information. The above graphic is caused by picking up the FY-QTR column and moving it from ‘Columns’ to ‘Filters’. Why the column moves, it leaves a ghost-image, or after image, and it does NOT refresh the Grid.

September 19, 2017 at 5:48 am Rowheight in jqxPivotGrid #96108

admin

Keymaster

Hi George S,

Unfortunately, we cannot reproduce this behavior with our Pivot Grid. I suppose it could be related to something else.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

September 22, 2017 at 11:16 am Rowheight in jqxPivotGrid #96247

George S

Participant

OK, so I have down to a complete working example of the issue. This issue happens in both Firefox and Chrome browsers. I did not test IE. To show the problem, save the code as an HTML file and open it in a browser. You will see the Designer and PivotGrid. Pick up the COUNTRY column from the ROWS section, and move it to the FILTERS section. The grid will NOT be updated, and you will see the new location of COUNTRY, as well as a copy of the COUNTRY field, as if it was not being properly erased from the graphics display.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">
   
    <link rel="stylesheet" href="http://jqwidgets.com/public/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="http://jqwidgets.com/public/jqwidgets/styles/jqx.light.css" type="text/css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
	 
	
    <script type="text/javascript" src="http://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/public/jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="http://jqwidgets.com/public/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/public/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/public/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/public/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/public/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/public/jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/public/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/public/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/public/jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/public/jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="http://jqwidgets.com/public/jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/public/jqwidgets/jqxpivotdesigner.js"></script>

   <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js"></script>  
	
	</head> 
	<body class='default'> 
     <script>
        $(document).ready(function () {
            // prepare sample data
            var data = new Array();

            var countries =
            [
                "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
            ];

            var dataPoints =
            [
                "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 < countries.length * 2; i++) {
                var row = {};
                var value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);

                row["country"] = countries[i % countries.length];
                row["value"] = value;

                data[i] = row;
            }

            // create a data source and data adapter
            var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                [
                    { name: 'country', type: 'string' },
                    { name: 'value', 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: 'country', width: 190 }],
                    columns: [],
                    values: [
                        { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                        { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                        { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                    ]
                });
			
			var localization = { 'var': 'Variance' };

			// create a pivot grid
            $('#divPivotGrid').jqxPivotGrid(
            {
                localization: localization,
                source: pivotDataSource,
                treeStyleRows: false,
                autoResize: false,
                multipleSelectionEnabled: true
            });
			
            var pivotGridInstance = $('#divPivotGrid').jqxPivotGrid('getInstance');
            // create a pivot grid
            $('#divPivotGridDesigner').jqxPivotDesigner(
            {
                type: 'pivotGrid',
                target: pivotGridInstance
            });
        });

    </script>
    <table>
        <tr>
            <td>
                <div id="divPivotGridDesigner" style="height: 400px; width: 250px;">
                </div>
            </td>
            <td>
                <div id="divPivotGrid" style="height: 400px; width: 550px;">
                </div>
            </td>
        </tr>
    </table>   
</body>
</html>

September 22, 2017 at 11:58 am Rowheight in jqxPivotGrid #96253

Peter Stoev

Keymaster

Hi George S,

Based on the provided example, we were able to reproduce the reported behavior with our Pivot Grid. Thank you for the feedback! During the next week, we will release a build which includes that fix.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

October 3, 2017 at 10:42 am Rowheight in jqxPivotGrid #96482

George S

Participant

Any update on when this will be fixed?

Thank you,
George S

October 3, 2017 at 7:37 pm Rowheight in jqxPivotGrid #96491

admin

Keymaster

Hi George S,

Sorry, about the delay.

We still test and fix as some other issues were reported, too. It should not take more than a week from now.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

November 1, 2017 at 2:16 pm Rowheight in jqxPivotGrid #97053

alejo9109

Participant

I resolve this problem

`var pivotDataSource = new $.jqx.pivot(
dataAdapter,
{
pivotValuesOnRows: false,

rows: [
{

width: ‘auto’,
<em>height: 30,</em>
dataField: ‘nom_style’,
align: ‘right’

},
{

dataField: ‘groups’,
align: ‘right’

},
{

dataField: ‘po’,
align: ‘right’

}
],
columns: [
{
dataField: ‘fec_debe’,
align: ‘center’
},
{

dataField: ‘eta’,
align: ‘center’

}
,

{
width: ‘auto’,
dataField: ‘contai’,
align: ‘center’
}

],
values: [

{
dataField: ‘cantidads’, ‘function’: ‘sum’, text: ‘Qty’, align: ‘center’, height: ‘auto’, width: 60
}
]
}
);`

November 1, 2017 at 2:34 pm Rowheight in jqxPivotGrid #97054

alejo9109

Participant

but i have other problem i need the column in a one group actually show this

pivotgrid

but i need this

pivotgrid2

Author

Posts

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

You must be logged in to reply to this topic.