jQWidgets Forums

Tagged: angular grid, auto re-size height of grid, cursor, grid, jquery grid, jqxgrid, resize, resize grid, resize grid with the mouse

This topic contains 3 replies, has 2 voices, and was last updated by beyond8848 9 years, 1 month ago.

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

Author

does the jqxgird have the powerful function?please look inside. Posts

March 12, 2016 at 1:47 pm does the jqxgird have the powerful function?please look inside. #82391

beyond8848

Participant

Hello Expert,

We would like to implement the below scenario:
when we use mouse move to the bottom of jqxgrid , the move cursor will change to be with up-down arrow, then we can move mouse to change the height of jqxgrid automatically.

Thanks in advance.

Best Regards

March 13, 2016 at 9:18 am does the jqxgird have the powerful function?please look inside. #82397

beyond8848

Participant

typo, the mouse cursor would be changed to up-down arrow

March 14, 2016 at 11:44 am does the jqxgird have the powerful function?please look inside. #82429

Dimitar

Participant

Hello beyond8848,

There is no such a built-in functionality in jqxGrid. Nevertheless, it can be achieved with the following workaround:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <style type="text/css">
        html, body
        {
            height: 100%;
        }
    </style>
    <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/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/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            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, rowdata)
            {
                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: 850,
                height: 100,
                source: dataAdapter,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ],
                columngroups: [
                    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                ]
            });

            var flag = false;
            var clickedToResize = false;

            var resizeFeedback = $('<div style="width: 850px; height: 3px; background-color: #000000; position: absolute; display: none;"></div>').appendTo($('body'));

            $(document).mousemove(function (event)
            {
                if (clickedToResize === false)
                {
                    var gridOffset = $("#jqxgrid").offset();
                    if (event.pageX >= gridOffset.left &&
                    event.pageX <= gridOffset.left + $('#jqxgrid').width() &&
                    event.pageY >= gridOffset.top + $('#jqxgrid').height() - 5 &&
                    event.pageY <= gridOffset.top + $('#jqxgrid').height() + 5)
                    {
                        $('body').css('cursor', 'n-resize');
                        flag = true;
                    } else
                    {
                        $('body').css('cursor', 'auto');
                        flag = false;
                    }
                } else
                {
                    resizeFeedback.show();
                    resizeFeedback.offset({ top: event.pageY });
                }
            });

            $(document).mousedown(function (event)
            {
                if (flag === true)
                {
                    clickedToResize = true;
                }
            });

            $(document).mouseup(function (event)
            {
                if (clickedToResize === true)
                {
                    resizeFeedback.hide();
                    var gridTopOffset = $("#jqxgrid").offset().top;
                    var newHeight = Math.max(100, event.pageY - gridTopOffset);
                    $('#jqxgrid').jqxGrid({ height: newHeight });
                    clickedToResize = false;
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

March 16, 2016 at 11:45 am does the jqxgird have the powerful function?please look inside. #82524

beyond8848

Participant

it is awesome. thanks to Dimitar a lot for your help.

Author

Posts

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

You must be logged in to reply to this topic.