jQWidgets Forums

This topic contains 5 replies, has 2 voices, and was last updated by SS 12 years, 11 months ago.

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

Author

jqxGrid Column Count Posts

June 13, 2012 at 7:23 am jqxGrid Column Count #4875

Member

hi,
To get column count I am using : var ColCount = $(“#Grid”).jqxGrid(‘columns’);

I am facing problem while traversing the columns of grid,if i set column property of any column to hidden, i don’t get the correct column count.

COL1
COL2
COL3
COL4
——– Count is 4 (Correct)

COL1<—- Hidden
COL2
COL3
COL4
——– Count is 3 (Incorrect)

Is this the correct way ? or please share any workaround for that?

Thanks.

June 13, 2012 at 7:39 am jqxGrid Column Count #4876

Peter Stoev

Keymaster

Hi SS,

Your code does not return the count of the Grid columns. To return the columns count use this:

var count = $("#jqxgrid").jqxGrid('columns').records.length;

The code below returns 6 as a result.

<!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.7.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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.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="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            // 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"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                columns: [
                  { text: 'First Name', hidden: true, 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', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
                ]
            });
            alert($("#jqxgrid").jqxGrid('columns').records.length);
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 13, 2012 at 7:50 am jqxGrid Column Count #4877

Member

Thanks a lot Peter for prompt answer

June 13, 2012 at 10:42 am jqxGrid Column Count #4892

Member

Hi,

The code still returns 5 as column count. it is excluding hidden column

Thanks.

June 13, 2012 at 10:58 am jqxGrid Column Count #4895

Peter Stoev

Keymaster

Hi SS,

The alert displays 6 on my side. The test is with jQWidgets 2.2. If you have a different scenario which demonstrates a different behavior, please feel free to post it here or to send it to support@jqwidgets.com

Here’s the result from the code I posted here:

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 13, 2012 at 11:11 am jqxGrid Column Count #4897

Member

It resolved by using version 2.2 … i guess it was due to version mismatch, i was using 2.0.
Thanks a lot Peter, sorry for the inconvenience.

Author

Posts

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

You must be logged in to reply to this topic.