jQWidgets Forums

Tagged: Auto-Resize Column Error

This topic contains 11 replies, has 3 voices, and was last updated by Peter Stoev 8 years, 7 months ago.

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

Author

Auto-Resize Column Error Posts
January 28, 2013 at 10:29 am Auto-Resize Column Error #14246
aravindtrue
Member
Hi,

I have the following code, where auto resize is not working. If I remove the cellsrenderer from the ‘Ship Name’ the code is perfect and working fine.
```
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>This example shows how to auto-resize the grid columns.</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.8.2.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
<script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../../scripts/gettheme.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var theme = getTheme();
var url = "../sampledata/orders.xml";
// prepare the data
var source =
{
datatype: "xml",
datafields: [
{ name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
{ name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
{ name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
{ name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
{ name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
{ name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
],
root: "entry",
record: "content",
id: 'm\\:properties>d\\:OrderID',
url: url
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
width: '100%',
source: source,
theme: theme,
columns: [
{ text: 'Ship Name', datafield: 'ShipName', width: 50, cellsrenderer: function(row, column, value){
/*Some Actions*/
}
},
{ text: 'Shipped Date', datafield: 'ShippedDate', width: 30, cellsformat: 'D' },
{ text: 'Freight', datafield: 'Freight', width: 30, cellsformat: 'F2', cellsalign: 'right' },
{ text: 'Ship Address', datafield: 'ShipAddress', width: 50 },
{ text: 'Ship City', datafield: 'ShipCity', width: 100 },
{ text: 'Ship Country', datafield: 'ShipCountry'}
]
});
$("#button").jqxButton({ theme: theme });
$("#button").click(function () {
$("#jqxgrid").jqxGrid('autoresizecolumns');
return false;
});
});
</script>
</head>
<body class='default'>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left; width:80%;">
<div id="jqxgrid">
</div>
<div style="margin-top: 30px;">
<input id="button" type="button" value="Auto Resize Columns" />
</div>
</div>
</body>
</html>
```
Am I doing something wrong? Someone Help me out. Thanks in advance.

Regards,
Aravind
January 28, 2013 at 10:33 am Auto-Resize Column Error #14253

aravindtrue
Member

This is the error thrown from the js,

Uncaught TypeError: Cannot call method ‘toString’ of undefined jqxgrid.columnsresize.js:68

Regards,
Aravind MS

January 28, 2013 at 10:41 am Auto-Resize Column Error #14254

Peter Stoev
Keymaster

Hi aravindtrue,

1. Which version of jQWidgets do you use?
2. Which browser do you use?
3. Which version of jQuery framework do you use?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 28, 2013 at 10:52 am Auto-Resize Column Error #14260

aravindtrue
Member

1. jQWidgets v2.6.0
2.
In Chrome 21.0,
Uncaught TypeError: Cannot call method ‘toString’ of undefined jqxgrid.columnsresize.js:68

In FF 15.0.1
TypeError: column.cellsrenderer(row, column, text) is undefined
text = column.cellsrenderer(row, column, text).toString();

In Safari 5.1
Error

3. jQuery v1.8.2

Regards,
Aravind MS

January 28, 2013 at 11:00 am Auto-Resize Column Error #14261

Peter Stoev
Keymaster

Hi Aravind MS,

As far as I can see, the issue is raised from the fact that your custom rendering returns nothing.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 28, 2013 at 11:15 am Auto-Resize Column Error #14262

aravindtrue
Member

Ohh Yeahh, It doesn’t have a return type. But I’m simply keeping a return type like the below,

cellsrenderer: function(row, column, value){
console.log(row);
return row;
}

When page load the console logs, 1,2,3,4,5,6,…….199
At the same time when I click the button the console logs,

Object {
Freight: 68.66
ShipAddress: “Av. Copacabana, 267”
ShipCity: “Rio de Janeiro”
ShipCountry: “Brazil”
ShipName: “Ricardo Adocicados”
ShippedDate: Fri Mar 07 1997 05:30:00 GMT+0530 (India Standard Time)
uid: 199
}

This changes the character of the row, so the action am doing

for example,
var sample = { 0: {}, 1: {}, 2{} }
cellsrenderer: function(row, column, value){
return sample[row][‘somedata’];
}

This is throwing me an error, is there any way to handle this?

Regards,
Aravind

January 28, 2013 at 3:08 pm Auto-Resize Column Error #14271

Peter Stoev
Keymaster

Hi Aravind,

If the cellsrenderer returns null or undefined, the resize function will throw an exception when it tries to resize that column. You should either use a valid “cellsrenderer” function or manually set the column’s width.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 29, 2013 at 6:29 am Auto-Resize Column Error #14283

aravindtrue
Member

Hi Peter,

The cellsrenderer function is valid. I am consoling the “row” from cellsrenderer, when the page loads for the first time, it consoles the row numbers such as 0,1,2,3,4…..199. At the same time when resize the columns, the cellsrenderer function is triggered again and in that case it consoles an object. Please have a look at the following code,

This example shows how to auto-resize the grid columns.

$(document).ready(function () {
var theme = getTheme();
var url = “../sampledata/orders.xml”;
// prepare the data
var source =
{
datatype: “xml”,
datafields: [
{ name: ‘ShippedDate’, map: ‘m\\:properties>d\\:ShippedDate’, type: ‘date’ },
{ name: ‘Freight’, map: ‘m\\:properties>d\\:Freight’, type: ‘float’ },
{ name: ‘ShipName’, map: ‘m\\:properties>d\\:ShipName’, type: ‘string’ },
{ name: ‘ShipAddress’, map: ‘m\\:properties>d\\:ShipAddress’, type: ‘string’ },
{ name: ‘ShipCity’, map: ‘m\\:properties>d\\:ShipCity’, type: ‘string’ },
{ name: ‘ShipCountry’, map: ‘m\\:properties>d\\:ShipCountry’, type: ‘string’ }
],
root: “entry”,
record: “content”,
id: ‘m\\:properties>d\\:OrderID’,
url: url
};

var dataAdapter = new $.jqx.dataAdapter(source);

$(“#jqxgrid”).jqxGrid(
{
width: ‘100%’,
source: source,
theme: theme,
columns: [
{ text: ‘Ship Name’, datafield: ‘ShipName’, width: 50, cellsrenderer: function(row, column, value){
console.log(row);
console.log(typeof row); //first time the page loads it is number and once we click the button the type object. why does this changes the behaviour?
return row; //has valid return type
}
},
{ text: ‘Shipped Date’, datafield: ‘ShippedDate’, width: 30, cellsformat: ‘D’ },
{ text: ‘Freight’, datafield: ‘Freight’, width: 30, cellsformat: ‘F2’, cellsalign: ‘right’ },
{ text: ‘Ship Address’, datafield: ‘ShipAddress’, width: 50 },
{ text: ‘Ship City’, datafield: ‘ShipCity’, width: 100 },
{ text: ‘Ship Country’, datafield: ‘ShipCountry’}
]
});
$(“#button”).jqxButton({ theme: theme });
$(“#button”).click(function () {
$(“#jqxgrid”).jqxGrid(‘autoresizecolumns’);
return false;
});
});

January 29, 2013 at 7:40 am Auto-Resize Column Error #14284

Peter Stoev
Keymaster

Hi aravindtrue,

The row in the cellsrenderer is a number when a cell is rendered. The Grid’s source property should point to a dataAdapter instance, not to a source object. We will investigate the reported behavior with the Row as Object instead of as Number when the auto-resize method is called.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 29, 2013 at 9:48 am Auto-Resize Column Error #14292

aravindtrue
Member

Yeahh, though I provide the dataAdapter instance, It is not working.

Anyways Thanks a lot for the response.

Regards,
Aravind MS

August 16, 2016 at 1:04 pm Auto-Resize Column Error #86583

fresher
Participant

Hi ,

I have been using auroresizeColumns in binding complete event and getting an unCaught exception

uncaught TypeError: Cannot read property ‘length’ of undefined in jqxall.js

using version 4.0+

$(“jqxGrid”).on(‘bindingcomplete’, function (event) {
alert(“Binding is completed”);
$(“jqxGrid”).jqxGrid(‘autoresizecolumns’);
});

August 16, 2016 at 1:22 pm Auto-Resize Column Error #86588

Peter Stoev
Keymaster

Please, use the current version of jQWidgets. Here’s a code with jqx-all.js: http://jsfiddle.net/adgLfqdq/. I would also suggest checking your selector because the jQuery selector should be by ID or by Class Name, but yours is by name only.

Best Regards,
Peter Stoev

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

Posts

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

You must be logged in to reply to this topic.