jQWidgets Forums

Tagged: angular grid, Angular splitter, auto resize columns, autoresizecolumns, column, enablecolumnsvirtualization, jquery grid, jquery splitter, jqxsplitter, resize, splitter

This topic contains 5 replies, has 2 voices, and was last updated by iguanamind 9 years, 9 months ago.

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

Author

grid autoresizecolumns with splitter events Posts
May 29, 2015 at 4:21 pm grid autoresizecolumns with splitter events #71806

iguanamind
Participant

Should the columns resize on the events in this code. After I collapse the left panel, the grid columns are all screwed up:

<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”description” content=””>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<script type=”text/javascript” src=”//code.jquery.com/jquery-2.1.1.min.js”></script>
<script type=”text/javascript” src=”http://localhost/public/js/application.js”></script>
<link rel=”stylesheet” href=”http://localhost/public/css/vutrac-basic-styles.css” type=”text/css” />
<link rel=”stylesheet” href=”http://localhost/public/js/jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”http://localhost/public/js/jqwidgets/styles/jqx.arctic.css” type=”text/css” />

<link rel=”stylesheet” href=”http://localhost/public/js/jquery_mobile/jquery.mobile-1.4.5.min.css” type=”text/css” />
<script type=”text/javascript” src=”http://localhost/public/js/jquery_mobile/jquery.mobile-1.4.2.min.js”></script>

<script type=”text/javascript” src=”http://localhost/public/js/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”http://localhost/public/js/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”http://localhost/public/js/jqwidgets/jqxscrollbar.js”></script>

<script type=”text/javascript” src=”http://localhost/public/js/jqwidgets/jqxdatatable.js”></script>

<script type=”text/javascript” src=”http://localhost/public/js/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”http://localhost/public/js/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”http://localhost/public/js/jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”http://localhost/public/js/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”http://localhost/public/js/jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”http://localhost/public/js/jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”http://localhost/public/js/jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”http://localhost/public/js/jqwidgets/jqxsplitter.js”></script>

<script type=”text/javascript”>
$(document).ready(function () {
var theme = ‘arctic’;
$(“#jqxpanel”).jqxPanel({theme: theme, width: ‘98%’, height: ‘98%’, sizeMode: “wrap”});
$(‘#jqxSplitter’).jqxSplitter({
width: ‘97%’,
height: ‘97%’,
panels: [{size: ‘25%’}, {size: ‘75%’}],
theme: theme
});

// prepare the 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 < 1000; 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;
row[“firstname1”] = firstNames[Math.floor(Math.random() * firstNames.length)];
row[“lastname1”] = lastNames[Math.floor(Math.random() * lastNames.length)];
row[“productname1”] = productNames[productindex];
row[“price1”] = price;
row[“quantity1”] = quantity;
row[“total1”] = price * quantity;
row[“firstname2”] = firstNames[Math.floor(Math.random() * firstNames.length)];
row[“lastname2”] = lastNames[Math.floor(Math.random() * lastNames.length)];
row[“productname2”] = productNames[productindex];
row[“price2”] = price;
row[“quantity2”] = quantity;
row[“total2”] = price * quantity;
data[i] = row;
}
var source =
{
localdata: data,
datatype: “array”
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
$(“#jqxgrid”).jqxGrid(
{
width: ‘99%’,
height: ‘95%’,
ready: function () {
$(‘#jqxgrid’).jqxGrid(‘autoresizecolumns’);
},
theme: theme,
source: dataAdapter,
columns: [
{ text: ‘First Name’, datafield: ‘firstname’},
{ text: ‘Last Name’, datafield: ‘lastname’},
{ text: ‘Product’, datafield: ‘productname’},
{ text: ‘Quantity’, datafield: ‘quantity’,cellsalign: ‘right’ },
{ text: ‘Unit Price’, datafield: ‘price’, cellsalign: ‘right’, cellsformat: ‘c2’ },
{ text: ‘Total’, datafield: ‘total’, cellsalign: ‘right’, cellsformat: ‘c2’ },
{ text: ‘First Name1’, datafield: ‘firstname1’},
{ text: ‘Last Name1’, datafield: ‘lastname1’},
{ text: ‘Product1’, datafield: ‘productname1’},
{ text: ‘Quantity1’, datafield: ‘quantity1’,cellsalign: ‘right’ },
{ text: ‘Unit Price1’, datafield: ‘price1’, cellsalign: ‘right’, cellsformat: ‘c2’ },
{ text: ‘Total1’, datafield: ‘total1’, cellsalign: ‘right’, cellsformat: ‘c2’ },
{ text: ‘First Name2’, datafield: ‘firstname2’},
{ text: ‘Last Name2’, datafield: ‘lastname2’},
{ text: ‘Product2’, datafield: ‘productname2’},
{ text: ‘Quantity2’, datafield: ‘quantity2’,cellsalign: ‘right’ },
{ text: ‘Unit Price2’, datafield: ‘price2’, cellsalign: ‘right’, cellsformat: ‘c2’ },
{ text: ‘Total2’, datafield: ‘total2’, cellsalign: ‘right’, cellsformat: ‘c2’ }
]
});

$(‘#jqxSplitter’).on(‘resize’, function (event) {
$(‘#jqxgrid’).jqxGrid(‘autoresizecolumns’);
});

$(‘#jqxSplitter’).on(‘collapsed’, function (event) {
$(‘#jqxgrid’).jqxGrid(‘autoresizecolumns’);
});

$(‘#jqxSplitter’).on(‘expanded’, function (event) {
$(‘#jqxgrid’).jqxGrid(‘autoresizecolumns’);
});
});
</script>
<script type=”text/javascript” src=”<?php echo URL; ?>application/views/treeview/TreeBehavior.js”></script>
<style>
html, body
{
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id=”jqxpanel”>
<div id=”jqxSplitter”>
<div id=”Panel1″>
<div id=”jqxTree”>
</div>
</div>
<div id=”Panel2″>
<div id=”jqxgrid”>
</div>
</div>
</div>
</div>
</body>
</html>

June 1, 2015 at 5:51 am grid autoresizecolumns with splitter events #71822
Dimitar
Participant
Hello iguanamind,

To fix this behaviour, set the grid’s property enablecolumnsvirtualization to false, i.e.:
```
$("#jqxgrid").jqxGrid({
    width: '99%',
    height: '95%',
    enablecolumnsvirtualization: false,
...
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
June 1, 2015 at 9:59 pm grid autoresizecolumns with splitter events #71863

iguanamind
Participant

Hello Dimitar,

I inserted that line into the code above, and it doesn’t work. You can see the columns don’t show the entire contents after collapsing the left pane in the splitter.

I hope there is some solution to this.

Thank you,

June 1, 2015 at 11:25 pm grid autoresizecolumns with splitter events #71864

iguanamind
Participant

And by the way, I have tried everything I could think of to solve this. Binding to any relative event in the page. But it seems that there is an event that is triggered in the grid after all of the resizing from the splitter is completed. I tried to bind to the div resize in the grid but it doesn’t help either.

June 2, 2015 at 6:25 am grid autoresizecolumns with splitter events #71882

Dimitar
Participant

Hi iguanamind,

The following works fine on our side: http://jsfiddle.net/Dimitar_jQWidgets/b3710eLr/.

Best Regards,
Dimitar

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

June 2, 2015 at 6:46 pm grid autoresizecolumns with splitter events #71931

iguanamind
Participant

Thank you Dimitar. These are my results.

Chrome: 43.0.2357.81 m — Works fine. No timer necessary.
Chromium: Version 41.0.2272.76 Ubuntu 14.04 (64-bit) — Have to set the timer to at least 200.
IE: Version: 10.0.9200.17357 — Have to set the timer to at least 200.

Seems wonky to have to do it that way, but I don’t really mind as long as there is a solution.

Again, Dimitar, thank you for responding and looking into my issue.
Author

Posts

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

You must be logged in to reply to this topic.