jQWidgets Forums

jQuery UI Widgets Forums Grid Resize columns iframe problem

This topic contains 7 replies, has 2 voices, and was last updated by  david 11 years, 11 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • Resize columns iframe problem #25309

    david
    Member

    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?

    Resize columns iframe problem #25313

    Mariya
    Participant

    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,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com

    Resize columns iframe problem #25324

    david
    Member

    Hi 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

    Resize columns iframe problem #25326

    Mariya
    Participant

    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,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com

    Resize columns iframe problem #25327

    david
    Member

    It’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.

    Resize columns iframe problem #25332

    Mariya
    Participant

    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,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com

    Resize columns iframe problem #25333

    david
    Member

    Thanks, 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.

    Resize columns iframe problem #25359

    david
    Member

    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.

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

You must be logged in to reply to this topic.