jQuery UI Widgets Forums Grid Resizing of grid in splitter

Tagged: , ,

This topic contains 5 replies, has 2 voices, and was last updated by  Peter Sloth 11 years ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Resizing of grid in splitter #21928

    Peter Sloth
    Participant

    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

    Resizing of grid in splitter #21945

    Peter Stoev
    Keymaster

    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/

    Resizing of grid in splitter #21958

    Peter Sloth
    Participant

    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

    Resizing of grid in splitter #21959

    Peter Sloth
    Participant

    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>
    Resizing of grid in splitter #21964

    Peter Stoev
    Keymaster

    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/

    Resizing of grid in splitter #21971

    Peter Sloth
    Participant

    Hi Peter

    It works perfectly! Thanks a lot.

    Bests
    Peter Sloth

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

You must be logged in to reply to this topic.