jQWidgets Forums

Tagged: grid

This topic contains 6 replies, has 2 voices, and was last updated by gurpal2000 11 years, 9 months ago.

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

Author

Absolute sizing of grid Posts

November 7, 2013 at 2:10 am Absolute sizing of grid #32109

gurpal2000

Member

Why doesn’t the following css work with my grid


{
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
}

I’m finding that width and height is interfering with the css. Idea above it make the grid responsive some what. I seem to get a default of 600×400 in an element defined as element.style { }.

In the grid, i’m not specifying a width/height. Also setting 100% for both isn’t quite accurate (as pointed out by folks in other threads).

thanks

November 7, 2013 at 5:25 am Absolute sizing of grid #32115

Peter Stoev

Keymaster

Hi gurpal2000,

Setting width and height is quite accurate and depends only on the browser’s rendering as it is the same as htmlElement.style.width = …., htmlElement.style.height = ….. We do not do something more special than synchronizing the width and height Grid properties with the HTML Element’s width and height CSS properties. In addition, the size of HTML Element depends also on the box-sizing model that you use on your page – content-box or border-box.

There is also no problem to position the Grid absolutely on your page.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from Array data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.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/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="../../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 < 200; 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: 670,
                source: dataAdapter,
                columnsresize: true,
                columns: [
                  { text: 'Name', dataField: 'firstname', width: 100 },
                  { text: 'Last Name', dataField: 'lastname', width: 100 },
                  { text: 'Product', editable: false, 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', minwidth: 100, cellsformat: 'c2' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div style="position: absolute; top: 100px; left: 100px;"
        id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 7, 2013 at 8:29 pm Absolute sizing of grid #32204

gurpal2000

Member

Hi there Peter,

In your example, if you add “bottom: 100px” to the div style it does not resize so that it’s 100px from the bottom of the body.

Compare it with this:

<div style="position: absolute; top: 100px; left: 100px; bottom: 100px; background: #ccc;">
    TEST AREA
</div>

The div resizes right?

There is no box model defined.

thanks

November 8, 2013 at 4:41 am Absolute sizing of grid #32217

Peter Stoev

Keymaster

Hi gurpal2000,

That is not related to jqxGrid. And in addition, a DIV with Fixed size will not be automatically resized when you resize the browse’s window. A DIV tag with percentage size would be and we have demos about Grid with percetange size, too – http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/autosize.htm

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 8, 2013 at 8:05 pm Absolute sizing of grid #32287

gurpal2000

Member

Hi Peter,

So how you create a grid that maintains 100px from the each body edge without using padding or margins or percentages?

thanks

November 8, 2013 at 8:50 pm Absolute sizing of grid #32293

Peter Stoev

Keymaster

Hi gurpal2000,

The demo that I sent you uses percentages. The Grid in the demo is with “50%” width and height.

Here’s how to position the Grid absolutely, set its width and height in percentages and keep 100px from the body edges:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this sample, the Grid's size is set in percentages. When you resize the browser's window, the Grid's Width and Height will be automatically adjusted. The "width" and "height" properties of jqxGrid in this sample are set to "50%"</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.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.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/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <style>
        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
        }
        #top, #bottom, #left, #right {
            background: #a5ebff;
            position: fixed;
        }
        #left, #right {
            top: 0;
            bottom: 0;
            width: 100px;
        }
        #left {
            left: 0;
        }
        #right {
            right: 0;
        }
        #top, #bottom {
            left: 0;
            right: 0;
            height: 100px;
        }
        #top {
            top: 0;
        }
        #bottom {
            bottom: 0;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = generatedata(500);
            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'name', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date' },
                    { name: 'quantity', type: 'number' }
                ],
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: '100%',
                height: '100%',
                source: dataAdapter,
                showfilterrow: true,
                filterable: true,
                selectionmode: 'multiplecellsextended',
                columns: [
                  { text: 'Name', columntype: 'textbox', datafield: 'name', width: '20%' },
                  {
                      text: 'Product', datafield: 'productname', width: '35%'
                  },
                  { text: 'Ship Date', datafield: 'date', filtertype: 'date', width: '30%', cellsalign: 'right', cellsformat: 'd' },
                  { text: 'Qty.', datafield: 'quantity', width: '15%', cellsalign: 'right' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="top"></div>
    <div id="bottom"></div>
    <div id="left"></div>
    <div id="right"></div>
    <div style="position: absolute; width: 100%; height: 100%; padding: 100px; box-sizing: border-box; -moz-box-sizing: border-box;">
        <div
            id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 14, 2013 at 7:44 pm Absolute sizing of grid #32664

gurpal2000

Member

Hi
I see i have not used your method before. I will try it out
thanks again

Author

Posts

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

You must be logged in to reply to this topic.