jQWidgets Forums

Tagged: grid, jqxgrid, jqxwindow, windows

This topic contains 8 replies, has 3 voices, and was last updated by yllsuarez 10 years, 3 months ago.

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

Author

Scrolling a Windows Posts

February 4, 2015 at 10:33 pm Scrolling a Windows #66547

yllsuarez

Participant

Hello, there is some property that allow scroll a jqxWindows ?

February 5, 2015 at 8:32 am Scrolling a Windows #66591

Nadezhda

Participant

Hello yllsuarez,

There is no such property, but if you want to scroll the content the scrollbars will appear automatically when the content is bigger than window.

Best Regards,
Nadezhda

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

February 5, 2015 at 9:39 am Scrolling a Windows #66593

koeppels

Participant

You could use jQuery .animate function:

jQuery('#scrollableDIV').animate({scrollTop: jQuery("#ID_scroll_target").offset().top - app.offset().top - 40},'slow');

That thing should scroll a #scrollableDIV content to an element inside this div with the ID #ID_scroll_target.

February 5, 2015 at 4:19 pm Scrolling a Windows #66635

yllsuarez

Participant

Thanks for take me on count.

I put a Grid inside a jqxWindows, when the grid is showed the first time work great.

But, the second time grid show values but i can not select any row, looks like freezed.

Also if the Grid is largest in Height the Windows not show the Scrooll.

Regards

February 6, 2015 at 7:45 am Scrolling a Windows #66678

Nadezhda

Participant

Hi yllsuarez,

Please, provide us with a code sample we can test to determine the source of the issue.

Best Regards,
Nadezhda

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

February 6, 2015 at 9:21 pm Scrolling a Windows #66718

yllsuarez

Participant

I am defining the jqWindow in the ready() function as follow:
$(“#popupWindow”).jqxWindow({ width: 600, height: 400, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01 });

So, the popupWindow is called through this function:
function ShowRowDetails(typeTask, dataRecord) {
BuildReportedGrid( typeTask, dataRecord);
$(“#popupWindow”).jqxWindow(‘show’);
}

In BuildReportedGrid I populated a grid, that, as I said before the first show the real data, after that never refresh or repaint the jqWindows.

February 9, 2015 at 8:44 am Scrolling a Windows #66751

Nadezhda

Participant

Hi yllsuarez,

Do you use jqxGrid in jqxWindow or jqxGrid with jqxWindow and jqxGrid? If you are using jqxGrid in jqxWindow, please find the following example which shows how to implement jqxGrid in jqxWindow.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.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/jqxwindow.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.edit.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                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 < 100; 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"
                };

                $("#jqxwindow ").jqxWindow({ height: 190, width: 350, theme: 'summer', isModal: true });

                var dataAdapter = new $.jqx.dataAdapter(source, {
                    loadComplete: function (data) { },
                    loadError: function (xhr, status, error) { }
                });
                $("#jqxgrid").jqxGrid(
                {
                    source: dataAdapter,
                    editable: false,
                    enablemousewheel: false,
                    autoheight: true,
                    columns: [
                      { 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' }
                    ]
                });
            });
        </script>
        <div id='jqxwindow'>
            <div>jqxGrid in jqxWindow</div>
            <div>
                <div id="jqxgrid"></div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

February 9, 2015 at 10:28 am Scrolling a Windows #66757

Nadezhda

Participant

Hi yllsuarez,

You should use ‘initContent’ function to initialize the grid in the window.

initContent: function() {
    // initialize the grid here (with empty data if initial data is not known)
    $("#jqxgrid").jqxGrid(
    {
        source: dataAdapter,
        editable: false,
        enablemousewheel: false,
        autoheight: true,
        columns: [
            { 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' }
        ]
    });
}

Best Regards,
Nadezhda

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

February 9, 2015 at 4:34 pm Scrolling a Windows #66776

yllsuarez

Participant

Thanks Nadezhda.

When I start using an Adapter, all became clear.

Author

Posts

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

You must be logged in to reply to this topic.