jQuery UI Widgets Forums Grid Help in setting the property ‘autoresizecolumns’

This topic contains 4 replies, has 2 voices, and was last updated by  dominicthoppil 10 years, 8 months ago.

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

  • dominicthoppil
    Participant

    Hi

    I enabled server side paging and virtual mode in my grid. I didn’t set any width to the columns . In ‘bindingcomplete’ and ‘ready:’ events, i set $(‘#jqxgrid’).jqxGrid(‘autoresizecolumns’); Initially it was working fine as expected. But if i double click on a column re size or reordered any of the column, the entire columns will be rendered with no width (i can’t read either column name or data). Is there any workaround for this ? I need to keep the autoresize to true in all time.

    Regards
    Dominic


    Dimitar
    Participant

    Hello Dominic,

    Our suggestion is to disable resizing of columns (you want them to be auto-resized after all) and call autoresizecolumns on the columnreordered event. Here is an example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.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/jqxmenu.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.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsreorder.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"
    ];
    // generate sample data.
    var generatedata = function (startindex, endindex) {
    var data = {};
    for (var i = startindex; i < endindex; 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["id"] = i;
    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;
    }
    return data;
    }
    var source =
    {
    datatype: "array",
    localdata: {},
    totalrecords: 1000000
    };
    // load virtual data.
    var rendergridrows = function (params) {
    var data = generatedata(params.startindex, params.endindex);
    return data;
    }
    var dataAdapter = new $.jqx.dataAdapter(source);
    $("#jqxgrid").jqxGrid(
    {
    source: dataAdapter,
    theme: theme,
    virtualmode: true,
    rendergridrows: rendergridrows,
    columnsresize: true,
    columnsreorder: true,
    columns: [
    { text: 'Id', datafield: 'id', width: 100 },
    { text: 'First Name', datafield: 'firstname', width: 100 },
    { text: 'Last Name', datafield: 'lastname', width: 100 },
    { text: 'Product', datafield: 'productname', width: 180 },
    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
    { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
    { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
    ],
    ready: function () {
    $("#jqxgrid").jqxGrid('autoresizecolumns');
    }
    });
    $("#jqxgrid").on('columnreordered', function (event) {
    $("#jqxgrid").jqxGrid('autoresizecolumns');
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div id="jqxgrid">
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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


    dominicthoppil
    Participant

    Dear Dimitar

    Thank you for your reply.

    Unfortunately the solution didn’t work for me. As you said i disabled columnresize (columnsresize: false). If i change the order of the column, the width will be lost and also in grouping. In your example, you have set the width for your columns, but in my case i didn’t set the width to my column. I set only three properties to the columns, i.e dataField,editable and text.

    My binding part as follows.

       function LoadGrid(source) {
    var dataadapter = new $.jqx.dataAdapter(source, {
    loadError: function (xhr, status, error) {
    DisplayError(xhr, '#divError');
    }});
    var theme = getDemoTheme();
    $("#jqxgrid").jqxGrid({
    source: dataadapter,
    width: $("#jqxgrid").parent().width(),
    height: $("#jqxgrid").parent().height(),
    pageable: true,
    virtualmode: true,
    filterable: true,
    theme: theme,
    columnsresize: false,
    showfilterrow: true,
    groupable: true,
    sortable: true,
    columnsreorder: true,
    rendergridrows: function () {
    return dataadapter.records;
    },
    ready: function () {
    $('#jqxgrid').jqxGrid('autoresizecolumns');
    },
    columns: dataLoader.gridColumns, //my columns will be in the object dataLoader.gridColumns.
    });
    $("#jqxgrid").on('columnreordered', function (event) {
    $("#jqxgrid").jqxGrid('autoresizecolumns');
    });
    }

    Any hints?

    Regards
    Dominic


    Dimitar
    Participant

    Hi Dominic,

    Please make sure you are using the latest version of jQWidgets (3.0.2).

    Best Regards,
    Dimitar

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


    dominicthoppil
    Participant

    Dear Dimitar

    Thank you for your quick response. Now we are using v2.9.2. I will try with the version V3.0.2.

    Regards
    Dominic

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

You must be logged in to reply to this topic.