jQuery UI Widgets Forums Grid grid autoresizecolumns with splitter events

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

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

  • 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>


    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/


    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,


    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.


    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/


    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.

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

You must be logged in to reply to this topic.