jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Resize columns iframe problem
Tagged: resize columns iframe problem
This topic contains 7 replies, has 2 voices, and was last updated by david 11 years, 11 months ago.
-
Author
-
I have a problem in my grid, because I can’t resize my columns with the mouse.
I am going to show your the way I create my grid because is a bit special
I have a jqxtab whose content is an iframe which content is loaded dinamically in this way:
<iframe id='frameMio1' width='99.9%' height='99.9%' src = 'about:blank'></iframe>
$('#frameMio1').contents().find("body").html(data);
Where data is the content of a php file:
<link rel="stylesheet" href="js/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="js/jqwidgets/styles/jqx.ui-redmond.css" type="text/css" />
<script type="text/javascript" src="views/js/Resellers.js"></script>
<div id='contenidoTab'>
<div>
<div id="gridReseller"></div>
</div>
</div>
In the reseller.js I have to code to tranform gridReseller into a grid.
The data to fill the grid is obtained by an ajax query, and the result is an array with the data and the structure:result = {
"data":[{"id":"144","idType":"1","_idType":"RESELLER","idFiscalDataType":"1","_idFiscalDataType":"Fisica","name":"pepitp cucu","email":"pep@fsd.com","main":"pep@fsd.com","firstName":"pepitp","lastName1":"cucu","lastName2":"cucu","document":"9988","idCompanyType":"0","businessName":"","companyName":"","code":"","_code":"","cif":"","nif":"9988","idPaymentType":"1","_idPaymentType":"CONTADO","RE":"0","idParentReseller":"1","_idParentReseller":"ONTINET","personPhone":[{"idPhone":"248","id":"144","number":"981133933","idType":"1","_idType":"PARTICULAR"}]},{"id":"142","idType":"1","_idType":"RESELLER","idFiscalDataType":"1","_idFiscalDataType":"Fisica","name":"leticia riestar","email":"leticia.lra@gmail.com","main":"leticia.lra@gmail.com","firstName":"leticia","lastName1":"riestar","lastName2":"ainsua","document":"454567","idCompanyType":"0","businessName":"","companyName":"","code":"","_code":"","cif":"","nif":"454567","idPaymentType":"1","_idPaymentType":"CONTADO","RE":"0","idParentReseller":"1","_idParentReseller":"ONTINET","personPhone":[{"idPhone":"246","id":"142","number":"981133933","idType":"1","_idType":"PARTICULAR"}]},{"id":"56","idType":"1","_idType":"RESELLER","idFiscalDataType":"1","_idFiscalDataType":"Fisica","name":"tamaraaaaaa riestraaaaa","email":"triestra@ontinet.com","main":"triestra@ontinet.com","firstName":"tamaraaaaaa","lastName1":"riestraaaaa","lastName2":"ainsua","document":"53301778","idCompanyType":"0","businessName":"","companyName":"","code":"","_code":"","cif":"","nif":"53301778","idPaymentType":"1","_idPaymentType":"CONTADO","RE":"0","idParentReseller":"1","_idParentReseller":"ONTINET","personPhone":[{"idPhone":"228","id":"56","number":"646916522","idType":"3","_idType":"MOVIL"},{"idPhone":"229","id":"56","number":"222","idType":"1","_idType":"PARTICULAR"}]},{"id":"1","idType":"2","_idType":"MAYORISTA","idFiscalDataType":"2","_idFiscalDataType":"Juridica","name":"ONTINET","email":"ontinet@on.es","main":"ontinet@on.es","firstName":"","lastName1":"","lastName2":"","document":"B96840467","idCompanyType":"6","businessName":"ONTINET","companyName":"ONTINET COM SL","code":"4741","_code":"Comercio al por menor de ordenadores, equipos perif\u00e9ricos y programas inform\u00e1ticos en establecimientos especializados","cif":"B96840467","nif":"","idPaymentType":"2","_idPaymentType":"RECIBO","RE":"0","idParentReseller":"1","_idParentReseller":"ONTINET","personPhone":[{"idPhone":"1","id":"1","number":"12123","idType":"1","_idType":"PARTICULAR"}]}],
"structure":[{"name":"id","type":"int"},{"name":"idType","type":"int"},{"name":"_idType","type":"varchar"},{"name":"idFiscalDataType","type":"int"},{"name":"_idFiscalDataType","type":"varchar"},{"name":"name","type":"varchar"},{"name":"email","type":"varchar"},{"name":"main","type":"varchar"},{"name":"firstName","type":"varchar"},{"name":"lastName1","type":"varchar"},{"name":"lastName2","type":"varchar"},{"name":"document","type":"varchar"},{"name":"idCompanyType","type":"bigint"},{"name":"businessName","type":"varchar"},{"name":"companyName","type":"varchar"},{"name":"code","type":"varchar"},{"name":"_code","type":"varchar"},{"name":"cif","type":"varchar"},{"name":"nif","type":"varchar"},{"name":"idPaymentType","type":"int"},{"name":"_idPaymentType","type":"varchar"},{"name":"RE","type":"tinyint"},{"name":"idParentReseller","type":"int"},{"name":"_idParentReseller","type":"varchar"}]
}
I use this information to construct the jqxgrid:
if (result['data']){
var data = result['data'];
}else{
data=[];
}
var structure = result['structure'];
var theme = 'ui-redmond';
var source ={
localdata: data,
datatype: "array",
async: false,
deleterow: function (rowid, commit) {
commit(true);
},
addrow: function (rowid, rowdata, position, commit) {
commit(true);
},
updaterow: function (rowid, newdata, commit) {
commit(true);
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
var structureColumns = formatStructure(structure);
$('#gridReseller').jqxGrid({
width: '100%',
source: dataAdapter,
theme: theme,
pageable: true,
autoheight: true,
filterable: false,
editable: false,
columnsresize: true,
selectionmode:'singlerow',
columns: structureColumns
});
function formatStructure(structure){
var structureColumns = new Array();
var j=0;
for (var i=0;i<structure.length; i++){
var columns = new Object();
columns['text']= structure[i].name;
columns['datafield']= structure[i].name;
columns['filtertype'] = parseFilterTypes(structure[i].type);
if (isApplicableCellFormat(structure[i].type=="int")){
columns['cellsformat'] = parseCellsFormat(structure[i].type);
}
columns['resizable']=true;
structureColumns[j] = columns;
j++;
}
return structureColumns;
}
After building my grid, I hide some columns. For example:
$('#gridReseller').jqxGrid('hidecolumn', 'idType');
$('#gridReseller').jqxGrid('hidecolumn', 'idFiscalDataType');
And autoresize them:
$('#gridReseller').jqxGrid('autoresizecolumns');
Everything works fine, only I can’t resize columns. Any idea?
Hi david,
Please provide the code where you add references for the Grid modules, because that is not clear from your post. And which version of the jqWidgets are you currently using?
Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comHi Mariya, thank you for yor quick answer.
I’m using 2.9.3 version, but I’ve tried with 2.6.1 before.
In reference of “provide the code where you add references for the Grid modules,” I don’t understand what are you asking for.
If your are asking for links to scripts, they are been loaded at main.php outside the iframe, but it works ok.
thanks
Hi david,
Resize columns will not work unless all of the JavaScript files are referenced correctly so please make sure that they are and especially jqxgrid.columnsresize.js.
Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comIt’s my content:
<html><head><title></title><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"><style><script src="js/jquery/jquery-1.8.3.min.js" type="text/javascript"><script src="js/jquery/jquery.i18n.js"><script src="js/jquery/jquery.i18n.messages.js"><script src="js/jquery/jquery.i18n.fallbacks.js"><script src="js/jquery/jquery.i18n.parser.js"><script src="js/jquery/jquery.i18n.emitter.js"><script src="js/jquery/jquery.i18n.language.js"><link type="application/l10n+json" href="views/js/i18n/sgo-en.json" hreflang="en" rel="localization"><link type="application/l10n+json" href="views/js/i18n/sgo-es.json" hreflang="es" rel="localization"><script src="js/require.js" type="text/javascript"><script src="js/ViewLoader.js" type="text/javascript"><script src="js/Constants.js" type="text/javascript"><script src="js/Utils.js" type="text/javascript"><script src="js/ConstructGrid.js" type="text/javascript"><script src="js/ConstructCombo.js" type="text/javascript"><script src="js/jqwidgets/jqxcore.js" type="text/javascript"><script src="js/jqwidgets/jqxinput.js" type="text/javascript"><script src="js/jqwidgets/jqxwindow.js" type="text/javascript"><script src="js/jqwidgets/jqxvalidator.js" type="text/javascript"><script src="js/jqwidgets/jqxbuttons.js" type="text/javascript"><script src="js/jqwidgets/jqxdockpanel.js" type="text/javascript"><script src="js/jqwidgets/jqxscrollbar.js" type="text/javascript"><script src="js/jqwidgets/jqxpanel.js" type="text/javascript"><script src="js/jqwidgets/jqxexpander.js" type="text/javascript"><script src="js/jqwidgets/jqxnavigationbar.js" type="text/javascript"><script src="js/jqwidgets/jqxtabs.js" type="text/javascript"><script src="js/jqwidgets/jqxsplitter.js" type="text/javascript"><script src="js/jqwidgets/jqxmenu.js" type="text/javascript"><script src="js/jqwidgets/jqxdata.js" type="text/javascript"><script src="js/jqwidgets/jqxgrid.js" type="text/javascript"><script src="js/jqwidgets/jqxgrid.selection.js" type="text/javascript"><script src="js/jqwidgets/jqxgrid.pager.js" type="text/javascript"><script src="js/jqwidgets/jqxgrid.sort.js" type="text/javascript"><script src="js/jqwidgets/jqxgrid.grouping.js" type="text/javascript"><script src="js/jqwidgets/jqxgrid.filter.js" type="text/javascript"><script src="js/jqwidgets/jqxgrid.edit.js" type="text/javascript"><script src="js/jqwidgets/jqxgrid.columnsresize.js" type="text/javascript"><script src="js/jqwidgets/jqxlistbox.js" type="text/javascript"><script src="js/jqwidgets/jqxdropdownlist.js" type="text/javascript"><script src="js/jqwidgets/jqxcombobox.js" type="text/javascript"><script src="js/jqwidgets/jqxcheckbox.js" type="text/javascript"><script src="js/jqwidgets/jqxradiobutton.js" type="text/javascript"><link type="text/css" href="js/jqwidgets/styles/jqx.base.css" rel="stylesheet"><link type="text/css" href="js/jqwidgets/styles/jqx.ui-redmond.css" rel="stylesheet"><script type="text/javascript"></head>
I’m debugging with Firebug and I can find all loaded.
I think It can’t be the problem, because it’s loaded with all the other scripts and the grid is done, loaded, doubleclick event works, etc.
I’ve tried to load again as head’s content of iframe with the same result.Hi david ,
Unfortunately, we are unable to reproduce the behavior that you report.
Below is our test sample:<!DOCTYPE html><html lang="en"><head> <title id='Description'>This example shows how to create a Grid from Array data.</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.1.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/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.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/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var 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 < 200; 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; } 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); $("#jqxgrid").jqxGrid( { width: '100%', source: dataAdapter, theme: theme, pageable: true, autoheight: true, filterable: false, editable: false, columnsresize: true, selectionmode: 'singlerow', columns: [ { text: 'Name', dataField: 'firstname'}, { text: 'Last Name', dataField: 'lastname' }, { text: 'Product', editable: false, 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' } ] }); }); </script></head><body class='default'> <div id="jqxgrid"> </div></body></html>
Make sure that all your JS code is in the jQuery’s document.ready function.
Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comThanks, but your test sample isn’t good for me.
It works, as “http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/hideshowcolumns.htm?classic” example works too. i’m trying to compare with it (because it has hidden columns and resize columns).
I’ll try to do a sample that you will use, with iframe (I don’t know why, but I think that it’s the key), tabs, and the others features.Best Regards,
David.Hi !!
I have changed the way that I’m working.
Instead of load the content getting by Ajax and writte it using: ‘ $(‘#frameMio1’).contents().find(“body”).html(data); ‘ as I’ve explained at the top of my post, I’m using $(‘#frameMio1’).attr(‘src’, url-to-get-data);
It seems change the way that works and now I can resize columns.
Thanks for all and I hope it can be useful to others,
David.
-
AuthorPosts
You must be logged in to reply to this topic.