scrollbar problem - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: column resize, Firefox, grid, jqxgrid, jqxwindow, scrollbar, window

This topic contains 4 replies, has 3 voices, and was last updated by Dimitar 8 years, 9 months ago.

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

Author

scrollbar problem Posts

January 24, 2013 at 7:29 am scrollbar problem #14130

Member

I have a small grid in my small popup window
the grid in my small windows may have some data that does not fit in the popup windw

here is the code

<div id="window" style="display:none">
					<div id="windowHeader">
		                    <span>
		                       Add more products
		                    </span>
		                </div>
		              <div style="overflow: hidden;" id="windowContent">
		              <div id="merchandiseGrid"></div>
		              </div>
				</div>

here is the window


 $('#window').jqxWindow({ showCollapseButton: true, maxHeight: 200, maxWidth: 350, minHeight: 200, minWidth: 350, height: 200, width: 350, theme:"darkblue" });

here is the grid


   $("#merchandiseGrid").jqxGrid(
				{
				    width: 320,
				    source: mDataAdapter,	   
				    columnsresize: true,
				    pageable: true,
				    theme:"fresh",									   
			        autoheight: false,
			        enableellipsis:true,
				    height:190,
				    columns: [
...

I want to get the grid with the scrollbar in the Fixed window.
when i tried this, I can see the scrollbar but when i tried to scroll bar, i got error : “TypeError cannot read property top of undefined”

January 24, 2013 at 9:32 am scrollbar problem #14140

Dimitar

Participant

Hello darkcloudbird,

We were not able to reproduce the reported issue. Please try the following similar example and share your feedback. Also make sure you use the latest version of jQWidgets (as of now, it is 2.6.1).

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This demo illustrates the basic functionality of the Grid plugin.
        The jQWidgets Grid plugin offers rich support for interacting with data, including
        paging, grouping and sorting. </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.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/jqxcheckbox.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.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var url = "../sampledata/products.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', width: 150 },
                  { text: 'Unit Price', datafield: 'UnitPrice', cellsalign: 'right', cellsformat: 'c2', width: 70 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued', width: 100 },
                ]
            });
            $("#jqxwindow ").jqxWindow({ showCollapseButton: true, maxHeight: 200, maxWidth: 350, minHeight: 200, minWidth: 350, height: 200, width: 350, autoOpen: false });
            $("#windowOpen").click(function () {
                $("#jqxwindow ").jqxWindow('open');
            });
        });
    </script>
</head>
<body class='default'>
    <button id="windowOpen">
        Open window</button>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id='jqxwindow'>
            <div>
                Header</div>
            <div>
                <div id="jqxgrid">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

January 25, 2013 at 8:30 am scrollbar problem #14193

darkcloudbird

Member

thanks for the reply,

it turns out that, if the both vertical and horizontal scrollbar appear, then the error, i made it wide enough so that the horizontal bar does not appear, then the error is gone.

Thanks

April 20, 2016 at 11:44 am scrollbar problem #83707

Natraj

Participant

I have a strange behaviour in firefox. When i load a html file containing jqxgrid in a popup container and resize the columns, Scroll bar appears. But when i scroll table header and body moves differently. It works fine in chrome. Kindly provide me a solution.

April 21, 2016 at 5:09 am scrollbar problem #83729

Dimitar

Participant

Hello Natraj,

Could you, please, provide us with a jsEditor example reproducing the issue? Please make sure you are using the latest version of jQWidgets (4.1.1), too.

Best Regards,
Dimitar

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.