jQWidgets Forums

Tagged: grid horizontal scrolling filters

This topic contains 5 replies, has 2 voices, and was last updated by shimmoril 13 years ago.

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

Author

Horizontal Scrolling & Filters Posts

July 24, 2012 at 1:38 pm Horizontal Scrolling & Filters #6294

Participant

I have a grid with a horizontal scrollbar. If I apply a filter to a column on the far right that doesn’t return any results, I do longer have a horizontal scrollbar and cannot remove the filter.

Is there a workaround for this issue, or can you provide an ETA for a fix?

July 24, 2012 at 2:29 pm Horizontal Scrolling & Filters #6299

Peter Stoev

Keymaster

Hi shimmoril,

I can’t reproduce the reported behavior on my side. Please, provide a sample code which reproduces the reported issue.

Here’s my sample code:

<!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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var data = generatedata(500);
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            var addfilter = function () {
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 1;
                filtervalue = 1;
                filtercondition = 'less_than';
                var filter1 = filtergroup.createfilter('numericfilter', filtervalue, filtercondition);
                filtergroup.addfilter(filter_or_operator, filter1);
                // add the filters.
                $("#jqxgrid").jqxGrid('addfilter', 'price', filtergroup);
                // apply the filters.
                $("#jqxgrid").jqxGrid('applyfilters');
            }
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: source,
                theme: theme,
                filterable: true,
                sortable: true,
                columnsresize: true,
                ready: function () {
                    addfilter();
                },
                autoshowfiltericon: true,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 300 },
                  { text: 'Last Name', datafield: 'lastname', width: 300 },
                  { text: 'Product', datafield: 'productname', width: 280 },
                  { text: 'Order Date', datafield: 'date', width: 100, cellsformat: 'd' },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 24, 2012 at 3:46 pm Horizontal Scrolling & Filters #6303

shimmoril

Participant

It’s because you don’t have autoheight: true in your example. If I turn autoheight off, I am able to retain the horizontal scrollbar, but we do not want to be showing (potentially) hundreds of blank rows if a filter returns nothing.

July 25, 2012 at 9:28 pm Horizontal Scrolling & Filters #6335

shimmoril

Participant

Do you have any updates in regards to this issue?

July 26, 2012 at 3:28 am Horizontal Scrolling & Filters #6337

Peter Stoev

Keymaster

Hi shimmoril,

No, because we can’t reproduce it. With or without autoheight, I am able to see the horizontal scrollbar with 0 or more records and with applied filter or without filter. I am able to move the scrollbar and remove the filter. if there is.

Here’s a code with autoheight = true and also Paging is enabled.

<!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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var data = generatedata(50);
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            var addfilter = function () {
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 1;
                filtervalue = 1;
                filtercondition = 'less_than';
                var filter1 = filtergroup.createfilter('numericfilter', filtervalue, filtercondition);
                filtergroup.addfilter(filter_or_operator, filter1);
                // add the filters.
                $("#jqxgrid").jqxGrid('addfilter', 'price', filtergroup);
                // apply the filters.
                $("#jqxgrid").jqxGrid('applyfilters');
            }
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: source,
                theme: theme,
                filterable: true,
                sortable: true,
                autoheight: true,
                columnsresize: true,
                pageable: true,
                ready: function () {
                    addfilter();
                },
                autoshowfiltericon: true,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 300 },
                  { text: 'Last Name', datafield: 'lastname', width: 300 },
                  { text: 'Product', datafield: 'productname', width: 280 },
                  { text: 'Order Date', datafield: 'date', width: 100, cellsformat: 'd' },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

If you have an issue on your side, send us a sample so we can test it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 26, 2012 at 2:27 pm Horizontal Scrolling & Filters #6375

shimmoril

Participant

Here is my grid code:
$("#reportGrid").jqxGrid ({ width: 775, source: dataAdapter, theme: theme, altrows: true, autoheight: true, columnsresize: true, selectionmode: 'none', sortable: true, filterable: true, groupable: true, groupsexpandedbydefault: true, pageable: true, virtualmode: true, rendergridrows: rendergridrows, pagesize: 25, pagesizeoptions: ['25', '50', '100', '200', '400'], columns: [ {text: 'EmployeeID', datafield: 'EmployeeID', width: 100}, {text: 'Name', datafield: 'Learner', width: 170},, {text: 'Course', datafield: 'Course', width: 170}, {text: 'Assigned', datafield: 'Assigned', width: 95, cellsformat: 'dd-MMM-yyyy'}, {text: 'Started', datafield: 'Started', width: 95, cellsformat: 'dd-MMM-yyyy'}, {text: 'Completed', datafield: 'Completed', width: 95, cellsformat: 'dd-MMM-yyyy'}, });

I’ve gone line by line and removed the options you didn’t have in your example and then added them back in one-by-one. Enabling grouping is what caused the horizontal scrollbar to disappear for me.

Author

Posts

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

You must be logged in to reply to this topic.