Resizing of grid in splitter

[Peter SlothParticipant]

Hi all

I am trying to adopt the look and feel of TFS 2012 web access, ie. with a grid at the top and a preview panel at the bottom of the page. I use a horizontal splitter to devide the two. When a row is selected, the details of the row is automatically shown in the preview panel. All this works as it should. The problem is when the user resizes the two areas by dragging the splitter bar. In this case I want the grid to resize (it’s height to be precise) as well, so that it constantly fits/fills out the top area.
How can this be achieved?

thanks

//Peter

[Peter StoevKeymaster]

Hi,

For your purpose, I suppose that using Percentages for Width and Height of the Grid would be the best option. Please, take a look at this sample: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/autosize.htm. It illustrates how to set the Grid’s size in percentages. In the sample the width and height are set to “50%”, but in your scenario, I think they should be “100%”.

Best Regards,
Peter Stoev

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

[Peter SlothParticipant]

Hi

thanks for the quick reply. It doesn’t seem to work, however. I have modified one of the existing demo pages (see below)

What am I doing wrong here?

thanks

//Peter

VQ test page

$(document).ready(function () {
var theme = getDemoTheme();
theme = ‘metro’;

// Create jqxTree
$(‘#jqxTree’).jqxTree({ theme: theme, height: ‘100%’, width: ‘100%’ });

$(‘#mainSplitter’).jqxSplitter({ theme: theme, width: ‘100%’, height: ‘100%’, panels: [{ size: ‘20%’ }, { size: ‘80%’ }] });
$(‘#rightSplitter’).jqxSplitter({ theme: theme, height: ‘100%’, orientation: ‘horizontal’, panels: [{ size: ‘80%’, collapsible: false }, { size: ‘20%’ }] });

/* ==================== */

// 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”
];

var available =
[
“true”, “false”, “false”, “false”, “false”, “true”, “false”, “false”, “false”, “false”, “false”, “false”
];

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;
row["available"] = available[productindex];
row["summary"] = "” + “First name: ” + “” + row[“firstname”] + “” + “Last name: ” + “” + row[“lastname”] + “”;

data[i] = row;
}

var source =
{
localdata: data,
datatype: “array”,
datafields:
[
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘available’, type: ‘bool’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘price’, type: ‘number’ },
{ name: ‘total’, type: ‘number’ },
{ name: ‘summary’, type: ‘string’ }
]
};

var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid(
{
source: dataAdapter,
width: ‘100%’,
height: ‘100%’,
altrows: true,
theme: theme,
columns: [
{ text: ‘Name’, dataField: ‘firstname’, width: 100 },
{ text: ‘Last Name’, dataField: ‘lastname’, width: 100 },
{ text: ‘Product’, editable: false, dataField: ‘productname’, width: 180 },
{ text: ‘Available’, editable: false, datafield: ‘available’, threestatecheckbox: true, columntype: ‘checkbox’, width: 70 },
{ 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’ }
]
});

/* ==================== */

$(“#jqxgrid”).on(‘rowselect’, function (event) {
var summary = event.args.row.summary;
$(“#PreviewPanel”).html(“

” + summary + “

“);
});

});

div#ContentPanel
{
padding: 4px;
overflow: hidden;
}

a:visited, a:hover, a:active
{
color: inherit;
}

html, body
{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}

Mail

Calendar

Contacts

Inbox (3)

jQWidgets

Admin

Corporate

Finance

Other

Personal

Deleted Items (10)

Today

Last Week

Last Month

Notes

Settings

Favorites

Top Panel

Grid Toolbar

[Peter SlothParticipant]

ooops, that didn’t seem to work. Trying again using a code-block

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>VQ test page</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css">
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.metro.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.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">
        $(document).ready(function () {
            var theme = getDemoTheme();
            theme = 'metro';
            // Create jqxTree
            $('#jqxTree').jqxTree({ theme: theme, height: '100%', width: '100%' });
            $('#mainSplitter').jqxSplitter({ theme: theme, width: '100%', height: '100%', panels: [{ size: '20%' }, { size: '80%' }] });
            $('#rightSplitter').jqxSplitter({ theme: theme, height: '100%', orientation: 'horizontal', panels: [{ size: '80%', collapsible: false }, { size: '20%' }] });
            /* ==================== */
            // 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"
            ];
            var available =
            [
                "true", "false", "false", "false", "false", "true", "false", "false", "false", "false", "false", "false"
            ];
            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;
                row["available"] = available[productindex];
                row["summary"] = "<table><tr><td><b>" + "First name: " + "</b></td><td style='width=100%'>" + row["firstname"] + "</td></tr><tr><td><b>" + "Last name: " + "</b></td><td style='width=100%'>" + row["lastname"] + "</td></tr></table >";
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'total', type: 'number' },
                    { name: 'summary', type: 'string' }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                width: '100%',
                height: '100%',
                altrows: true,
                theme: theme,
                columns: [
                  { text: 'Name', dataField: 'firstname', width: 100 },
                  { text: 'Last Name', dataField: 'lastname', width: 100 },
                  { text: 'Product', editable: false, dataField: 'productname', width: 180 },
                  { text: 'Available', editable: false, datafield: 'available', threestatecheckbox: true, columntype: 'checkbox', width: 70 },
                  { 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' }
                ]
            });
            
            /* ==================== */
            
            $("#jqxgrid").on('rowselect', function (event) {
                var summary = event.args.row.summary;
                $("#PreviewPanel").html("<div style='margin: 10px;'>" + summary + "</div>");
            });
        });
    </script>
    <style type="text/css">
        div#ContentPanel
        {
            padding: 4px;
            overflow: hidden;
        }
        a:visited, a:hover, a:active
        {
            color: inherit;
        }
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>
</head>
<body class='default'>
    <div id="mainSplitter">
        <div>
            <div style="border: none;" id='jqxTree'>
                <ul>
                    <li id="Mail" item-expanded='true'>
                        <img style='float: left; margin-right: 5px;' src='../../images/mailIcon.png'><span
                            item-title="true">Mail</span>
                        <ul>
                            <li id="Calendar" item-expanded='true'>
                                <img style='float: left; margin-right: 5px;' src='../../images/calendarIcon.png'><span
                                    item-title="true">Calendar</span> </li>
                            <li id="Contacts">
                                <img style='float: left; margin-right: 5px;' src='../../images/contactsIcon.png'><span
                                    item-title="true"><a style="text-decoration: none;" href="vq.htm?module=contacts">Contacts</a></span> </li>
                            <li id="Inbox">
                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png'><span
                                    item-title="true"> <span><b>Inbox</b></span><span style='color: Blue'> (3)</span></span>
                                <ul>
                                    <li id="jQWidgets">
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png'><span
                                            item-title="true">jQWidgets</span>
                                        <ul>
                                            <li id="Admin">
                                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png'><span
                                                    item-title="true">Admin</span> </li>
                                            <li id="Corporate">
                                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png'><span
                                                    item-title="true">Corporate</span> </li>
                                            <li id="Finance">
                                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png'><span
                                                    item-title="true">Finance</span> </li>
                                            <li id="Other">
                                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png'><span
                                                    item-title="true">Other</span> </li>
                                        </ul>
                                    </li>
                                    <li id="Personal">
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png'><span
                                            item-title="true">Personal</span> </li>
                                </ul>
                            </li>
                            <li id="Deleted Items" item-expanded='true'>
                                <img style='float: left; margin-right: 5px;' src='../../images/recycle.png'><span
                                    item-title="true"> <span>Deleted Items</span><span style='color: Blue;'> (10)</span></span>
                                <ul>
                                    <li id="Today">
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png'><span
                                            item-title="true">Today</span> </li>
                                    <li id="Last Week">
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png'><span
                                            item-title="true">Last Week</span> </li>
                                    <li id="Last Month">
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png'><span
                                            item-title="true">Last Month</span> </li>
                                </ul>
                                <li id="Notes">
                                    <img style='float: left; margin-right: 5px;' src='../../images/notesIcon.png'><span
                                        item-title="true">Notes</span> </li>
                            <li id="Settings">
                                <img style='float: left; margin-right: 5px;' src='../../images/settings.png'><span
                                    item-title="true">Settings</span> </li>
                            <li id="Favorites">
                                <img style='float: left; margin-right: 5px;' src='../../images/favorites.png'><span
                                    item-title="true">Favorites</span> </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div>
            <div id="rightSplitter">
                <div id="ContentPanel">
                    <div style="height: 30px;width: 100%; background-color: lightgreen">Top Panel</div>    
                    <div style="height: 30px;width: 100%; background-color: lightsalmon; margin-bottom: 5px;">Grid Toolbar</div>    
                    <div id='jqxWidget'>
                        <div id="jqxgrid">
                        </div>
                    </div>
                </div>
                <div id="PreviewPanel">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

[Peter StoevKeymaster]

Hi Peter,

As far as I understood from your code, you want to have a Panel with 2 header DIV tags with 30px height each and a Grid which will take the rest of the available area. That could be achieved by adding additional CSS styles because the two DIV tags will take 60px and the Grid will take 100% of the whole which is 100% + 60px of the Panel’s height. The good news are that there is a CSS setting that may help here – box-sizing: border-box in combination with top-padding and height in percentages will enable us to make the Grid to take only the rest of the available area. Below is the modification of your code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>VQ test page</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css">
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.metro.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.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">
        $(document).ready(function () {
            var theme = getDemoTheme();
            theme = 'metro';
            // Create jqxTree
            $('#jqxTree').jqxTree({ theme: theme, height: '100%', width: '100%' });
            $('#mainSplitter').jqxSplitter({ theme: theme, width: '100%', height: '100%', panels: [{ size: '20%' }, { size: '80%' }] });
            $('#rightSplitter').jqxSplitter({ theme: theme, height: '100%', orientation: 'horizontal', panels: [{ size: '80%', collapsible: false }, { size: '20%' }] });
            /* ==================== */
            // 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"
            ];
            var available =
            [
                "true", "false", "false", "false", "false", "true", "false", "false", "false", "false", "false", "false"
            ];
            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;
                row["available"] = available[productindex];
                row["summary"] = "<table><tr><td><b>" + "First name: " + "</b></td><td style='width=100%'>" + row["firstname"] + "</td></tr><tr><td><b>" + "Last name: " + "</b></td><td style='width=100%'>" + row["lastname"] + "</td></tr></table >";
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'total', type: 'number' },
                    { name: 'summary', type: 'string' }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                width: '100%',
                height: '100%',
                altrows: true,
                theme: theme,
                columns: [
                  { text: 'Name', dataField: 'firstname', width: 100 },
                  { text: 'Last Name', dataField: 'lastname', width: 100 },
                  { text: 'Product', editable: false, dataField: 'productname', width: 180 },
                  { text: 'Available', editable: false, datafield: 'available', threestatecheckbox: true, columntype: 'checkbox', width: 70 },
                  { 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' }
                ]
            });
            /* ==================== */
            $("#jqxgrid").on('rowselect', function (event) {
                var summary = event.args.row.summary;
                $("#PreviewPanel").html("<div style='margin: 10px;'>" + summary + "</div>");
            });
        });
    </script>
    <style type="text/css">
        div#ContentPanel
        {
            overflow: hidden;
        }
        a:visited, a:hover, a:active
        {
            color: inherit;
        }
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>
</head>
<body class='default'>
    <div id="mainSplitter">
        <div>
            <div style="border: none;" id='jqxTree'>
                <ul>
                    <li id="Mail" item-expanded='true'>
                        <img style='float: left; margin-right: 5px;' src='../../images/mailIcon.png'><span
                            item-title="true">Mail</span>
                        <ul>
                            <li id="Calendar" item-expanded='true'>
                                <img style='float: left; margin-right: 5px;' src='../../images/calendarIcon.png'><span
                                    item-title="true">Calendar</span> </li>
                            <li id="Contacts">
                                <img style='float: left; margin-right: 5px;' src='../../images/contactsIcon.png'><span
                                    item-title="true"><a style="text-decoration: none;" href="vq.htm?module=contacts">Contacts</a></span> </li>
                            <li id="Inbox">
                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png'><span
                                    item-title="true"> <span><b>Inbox</b></span><span style='color: Blue'> (3)</span></span>
                                <ul>
                                    <li id="jQWidgets">
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png'><span
                                            item-title="true">jQWidgets</span>
                                        <ul>
                                            <li id="Admin">
                                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png'><span
                                                    item-title="true">Admin</span> </li>
                                            <li id="Corporate">
                                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png'><span
                                                    item-title="true">Corporate</span> </li>
                                            <li id="Finance">
                                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png'><span
                                                    item-title="true">Finance</span> </li>
                                            <li id="Other">
                                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png'><span
                                                    item-title="true">Other</span> </li>
                                        </ul>
                                    </li>
                                    <li id="Personal">
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png'><span
                                            item-title="true">Personal</span> </li>
                                </ul>
                            </li>
                            <li id="Deleted Items" item-expanded='true'>
                                <img style='float: left; margin-right: 5px;' src='../../images/recycle.png'><span
                                    item-title="true"> <span>Deleted Items</span><span style='color: Blue;'> (10)</span></span>
                                <ul>
                                    <li id="Today">
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png'><span
                                            item-title="true">Today</span> </li>
                                    <li id="Last Week">
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png'><span
                                            item-title="true">Last Week</span> </li>
                                    <li id="Last Month">
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png'><span
                                            item-title="true">Last Month</span> </li>
                                </ul>
                                <li id="Notes">
                                    <img style='float: left; margin-right: 5px;' src='../../images/notesIcon.png'><span
                                        item-title="true">Notes</span> </li>
                            <li id="Settings">
                                <img style='float: left; margin-right: 5px;' src='../../images/settings.png'><span
                                    item-title="true">Settings</span> </li>
                            <li id="Favorites">
                                <img style='float: left; margin-right: 5px;' src='../../images/favorites.png'><span
                                    item-title="true">Favorites</span> </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div>
            <div id="rightSplitter">
                <div  id="ContentPanel">
                    <div style="position: absolute; height: 30px;width: 100%; background-color: lightgreen">Top Panel</div>    
                    <div style="position: absolute; top: 30px; height: 30px;width: 100%; background-color: lightsalmon; margin-bottom: 5px;">Grid Toolbar</div>    
                    <div style="position: absolute; box-sizing: border-box; -moz-box-sizing: border-box; padding-top: 60px; width: 100%; height: 100%;">
                        <div id="jqxgrid"></div>
                    </div>
                </div>
                <div id="PreviewPanel">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Hope this helps you.

Best Regards,
Peter Stoev

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

[Peter SlothParticipant]

Hi Peter

It works perfectly! Thanks a lot.

Bests
Peter Sloth

[Author]

Posts