Help in setting the property 'autoresizecolumns' - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: auto, autoresizecolumns, column, grid, jqxgrid, mode, reorder, resize, virtual

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

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

Author

Help in setting the property ‘autoresizecolumns’ Posts

September 23, 2013 at 5:04 am Help in setting the property ‘autoresizecolumns’ #29337

Participant

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

September 23, 2013 at 5:56 am Help in setting the property ‘autoresizecolumns’ #29345

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/

September 23, 2013 at 12:20 pm Help in setting the property ‘autoresizecolumns’ #29381

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

September 23, 2013 at 12:37 pm Help in setting the property ‘autoresizecolumns’ #29382

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/

September 23, 2013 at 1:23 pm Help in setting the property ‘autoresizecolumns’ #29384

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

Author

Posts

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

You must be logged in to reply to this topic.