jQWidgets Forums

Tagged: columnsheight, filterable, grid, hide rows, jqxgrid

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

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

Author

columnsheight hides some rows when filter Posts

December 3, 2014 at 9:10 am columnsheight hides some rows when filter #63698

Participant

columnsheight:’60px’, i have added this to increase header of grid. but when i filter it hide two rows behind that above headed.

December 3, 2014 at 9:57 am columnsheight hides some rows when filter #63701

sainish

Participant

when adding showfilter it hides rows behind

December 3, 2014 at 12:40 pm columnsheight hides some rows when filter #63713

Nadezhda

Participant

Hello sainish,

Please, try to add ‘autoheight’ property set to true. If this suggestion does not help you fix the issue, please provide us with sample code.

Best Regards,
Nadezhda

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

December 3, 2014 at 2:36 pm columnsheight hides some rows when filter #63727

sainish

Participant

below is the sample code. its not working. it hide one or two rows behind that filter header

$("#jqxgrid").jqxGrid(
                            {
                                width: '100%',
                                source: dataAdapter1,
                               columnsheight:50,
                                altrows: true,
                                editable: true,
                                editmode: 'click',
                                selectionmode: 'singlecell',
////                                virtualmode: true,
                                autoheight: true,
                                autorowheight: true,
                                sortable: true,
                                columnsresize: true,
                                showfilterrow: true,
                                filterable: true,
                                columns: columns
                            });

December 4, 2014 at 7:56 am columnsheight hides some rows when filter #63774

Nadezhda

Participant

Hi sainish,

Here is an example with the above jqxGrid properties and it works on our side. Please, make sure all your jQWidgets files are updated to version 3.6.0. If this does not help you, please provide us a full sample which we would be able to test.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.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.columnsresize.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // 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 < 10; 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,
                columnsheight:50,
                altrows: true,
                editable: true,
                editmode: 'click',
                selectionmode: 'singlecell',                
                autoheight: true,
                autorowheight: true,
                sortable: true,
                columnsresize: true,
                showfilterrow: false,
                filterable: true,
                columns: [
                  {
                      text: '#', sortable: false, filterable: false, editable: false,
                      groupable: false, draggable: false, resizable: false,
                      datafield: '', columntype: 'number', width: 50,
                      cellsrenderer: function (row, column, value) {
                          return "<div style='margin:4px;'>" + (value + 1) + "</div>";
                      }
                  },
                  { text: 'Name', datafield: 'firstname', width: 120 },
                  { text: 'Last Name', datafield: 'lastname', width: 120 },
                  { 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', cellsformat: 'c2' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

Author

Posts

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

You must be logged in to reply to this topic.