Resize with Splitter, Grid and NavigationBar - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 0 replies, has 1 voice, and was last updated by DaveB 11 years, 9 months ago.

Viewing 1 post (of 1 total)

Author

Resize with Splitter, Grid and NavigationBar Posts

June 6, 2013 at 2:47 pm Resize with Splitter, Grid and NavigationBar #22714

DaveB

Participant

Hi Peter,

I have been fighting with trying to get the height to resize properly when using the Navigation Bar and Grid together with a Splitter control. If I set the grids height to 100% it ends up flattened at the top of the form and when I set the navigation bars height to 100% it goes below the screen instead of sizing to the height of the screen. It appears you solved a similar problem for someone else at the link below using the box-sizing: border-box in combination with top-padding and height in percentages, but I have not been able to figure out how to get that working in may case.

http://www.jqwidgets.com/community/topic/resizing-of-grid-in-splitter/

I’ve provided an example below of the issue I am facing. I have the grids at a fixed height in this example because they are not visible when I set them to a percent. I just want the heights of the grids to re-size as the window re-sizes. Oddly enough, this is only an issue with the heights, if I try to do the widths with percentages it works fine.

Dave

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- OLD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

	"http://www.w3.org/TR/html4/loose.dtd">

-->

<html lang="en">

  <head>

<!-- Enable IE8 Standards mode -->

	<meta http-equiv="X-UA-Compatible" content="IE=8; text/html;charset=utf-8" />

    <title>Store Line</title>

        <link rel="stylesheet" type="text/css" href="styles/im.css" media="screen"/>

<style>

.appNameHeader{font-size:27px; color: #336699; font-weight:bold; margin-top: 1.5mm; font-family: Arial, Helvetica; text-align:center;}

.pageHeader { FONT-SIZE: 18px; COLOR: #336699; margin-top: 1.5mm; FONT-FAMILY: arial, helvetica; TEXT-ALIGN:center; }

.data { FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #ffffff; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: none }

.text1 { FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: verdana; TEXT-DECORATION: none }

.text2 { FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: none }

.text3 { FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: none }

.text4 { FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #000000; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: none }

.text5 { FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: none }

.underlinedRedText { COLOR: #ff0000; TEXT-DECORATION: underline; }

.successText { FONT-SIZE: 12px; FONT-FAMILY: arial, helvetica, sans-serif; FONT-WEIGHT: bold; COLOR: green; }

.errorText { FONT-SIZE: 12px; FONT-FAMILY: arial, helvetica, sans-serif; FONT-WEIGHT: bold; COLOR: red; }

.errorText2 { FONT-SIZE: 10px; FONT-FAMILY: verdana, arial, helvetica, sans-serif; COLOR: #FF0000;  TEXT-DECORATION: none; }

.oddRow { BACKGROUND: #eeeeee; }

.evenRow { BACKGROUND: #cccccc; }

.noDataRow { BACKGROUND: #ffffff; COLOR: red }

.highlightRow { BACKGROUND: #ffff99; CURSOR: hand}

body

    margin: 0;

    padding: 0;

    background-color: #999999;

    margin-top: 0px;

    margin-bottom: 0px;

input

    FONT-SIZE: 11px;

    COLOR: #000000;

    FONT-FAMILY: verdana, arial, helvetica, sans-serif;

textarea

    FONT-SIZE: 11px;

    COLOR: #000000;

    FONT-FAMILY: verdana, arial, helvetica, sans-serif;

select

    FONT-WEIGHT: normal;

    FONT-SIZE: 11px;

    COLOR: #000000;

    FONT-FAMILY: arial, helvetica, sans-serif;

    TEXT-DECORATION: none

/*.dataBackground*/

.dataBkgColor

    BACKGROUND-COLOR: #cccccc

/*.headerCell*/

.labelCell

    PADDING: 0px, 4px;

    FONT-SIZE: 11px;

    FONT-FAMILY: arial, helvetica, sans-serif;

    FONT-WEIGHT: bold;

    COLOR: white;

    BACKGROUND-COLOR: #336699;

    TEXT-ALIGN: right;

.navlist { PADDING: 5px 0 5px 0; MARGIN-LEFT: 0; BORDER-BOTTOM: 1px solid #545555; BACKGROUND: #cccccc; font: bold 11px verdana, sans-serif; VERTICAL-ALIGN: middle;}

.navlist li { LIST-STYLE: none; MARGIN: 0; DISPLAY: inline; WIDTH: 100%px; }

.navlist li a, .navlist li a.normal { PADDING:4px 0.7em 4px 0.7em; MARGIN-LEFT: -4; BORDER:1px solid #545555; BACKGROUND-IMAGE: url("../images/up_but.gif"); TEXT-DECORATION: none; VERTICAL-ALIGN: middle; FONT-WEIGHT:bold; FONT-SIZE:11px; COLOR:#707070; FONT-FAMILY: arial, helvetica, sans-serif; BORDER-LEFT: none; }

.navlist li a:hover { TEXT-DECORATION: underline; FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #000000; }

.navlist li a.current { PADDING: 4px 0.7em 4px 0.7em; BACKGROUND-IMAGE: url("../images/dwn_but.gif"); BORDER-BOTTOM: 1px solid #FFFFFF; VERTICAL-ALIGN: middle; FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #009900; FONT-FAMILY: arial, helvetica, sans-serif; TEXT-DECORATION: none; BORDER-LEFT: none; }

div.dataResultsTable th

    BACKGROUND-COLOR: #336699;

    COLOR: #ffffff;

    LINE-HEIGHT: 12px;

    FONT-FAMILY: arial, helvetica, sans-serif;

    FONT-WEIGHT: bold;

    FONT-SIZE: 11px;

    TEXT-ALIGN:left;

    WHITE-SPACE: nowrap;

    /* MARGIN: 0px 0px 0 0; */

div.dataResultsTable td

    /*BACKGROUND:#ffffff;*/

    PADDING: 1px 4px 1px 4px;

    FONT-WEIGHT: normal;

    FONT-SIZE: 11px;

    COLOR: #000000;

    FONT-FAMILY: verdana, arial, helvetica, sans-serif;

    TEXT-DECORATION: none;

    LINE-HEIGHT: 15px;

div.dataResultsTable

    WIDTH: 100%;

    HEIGHT: 200px;

    /*	BORDER: 0px solid #ccc; */

    /*  BACKGROUND:#f2f2f2; */

    PADDING: 0px;

    OVERFLOW-X: auto;

    OVERFLOW-Y: scroll;

.app-screen { WIDTH: 99%; VERTICAL-ALIGN: top; FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #696969; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: none }

.appnav-left-top    { BACKGROUND-IMAGE: url('../images/nav/left_top.gif') }

.appnav-left-middle { BACKGROUND-IMAGE: url('../images/nav/left_middle.gif') }

.appnav-left-blue   { BACKGROUND-IMAGE: url('../images/appnav/leftblue.gif') }

.appnav-right-top    { BACKGROUND-IMAGE: url('../images/nav/right_top.gif') }

.appnav-right-middle { BACKGROUND-IMAGE: url('../images/nav/right_middle.gif') }

.app-container { TEXT-ALIGN: center; }

.app-container table { MARGIN-LEFT: auto; MARGIN-RIGHT: auto; }

.appnav-topnav { FONT-SIZE: 10px; COLOR: #666666; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: none; TEXT-ALIGN: center; WHITE-SPACE:nowrap}

.appnav-topnav:link { FONT-SIZE: 10px; COLOR: #666666; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: none; TEXT-ALIGN: center; WHITE-SPACE:nowrap}

.appnav-topnav:visited { FONT-SIZE: 10px; COLOR: #666666; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: none; TEXT-ALIGN: center; WHITE-SPACE:nowrap}

.appnav-topnav:hover { FONT-SIZE: 10px; COLOR: #666666; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: underline; TEXT-ALIGN: center; WHITE-SPACE:nowrap}

.appnav-topnav-selected { BACKGROUND-COLOR: #333366; FONT-SIZE: 10px; COLOR: #FFFFFF; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: none; TEXT-ALIGN: center; WHITE-SPACE:nowrap}

.appnav-subnav { BACKGROUND-COLOR: #c0c0c0; FONT-WEIGHT: bold; FONT-SIZE: 9px; LINE-HEIGHT: 9px; COLOR: #003366; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: none; TEXT-ALIGN: center; WHITE-SPACE:nowrap}

.appnav-subnav a:link { FONT-WEIGHT: bold; FONT-SIZE: 9px; LINE-HEIGHT: 9px; COLOR: #003366; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: none; TEXT-ALIGN: center; WHITE-SPACE:nowrap}

.appnav-subnav a:visited { FONT-WEIGHT: bold; FONT-SIZE: 9px; LINE-HEIGHT: 9px; COLOR: #003366; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: none; TEXT-ALIGN: center; WHITE-SPACE:nowrap}

.appnav-subnav a:hover { FONT-WEIGHT: bold; FONT-SIZE: 9px; LINE-HEIGHT: 9px; COLOR: #336699; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: underline; TEXT-ALIGN: center; WHITE-SPACE:nowrap}

.appnav-subnav-selected { BACKGROUND-COLOR:white; FONT-WEIGHT: bold; FONT-SIZE: 9px; LINE-HEIGHT: 9px; COLOR: #003366; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: none; TEXT-ALIGN: center; WHITE-SPACE:nowrap}

.appnav-altnav  { FONT-SIZE: 10px; COLOR: #99CCFF; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: none}

.appnav-altnav:link { FONT-SIZE: 10px; COLOR: #99CCFF; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: none}

.appnav-altnav:visited { FONT-SIZE: 10px; COLOR: #99CCFF; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: none}

.appnav-altnav:hover { FONT-SIZE: 10px; COLOR: #ffffff; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: underline}

.appnav-txt-white { FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #ffffff; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: none; WHITE-SPACE:nowrap}

.appnav-blend {  WIDTH:100%; BACKGROUND: #336699 url('../images/appnav/blend.gif'); BACKGROUND-REPEAT: repeat-x; }

.appnav-footer { HEIGHT: 26px; TEXT-ALIGN: center; FONT-WEIGHT: normal; FONT-SIZE: 9px; COLOR: #ffffff; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: none}

.mode {FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #99CCFF; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: none}

.username {FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #FFD700; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: none}

.nav-disabled { FONT-WEIGHT: bold; FONT-SIZE: 9px; LINE-HEIGHT: 9px; COLOR: #003366; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: none}

.nav-noaccess { FONT-WEIGHT: bold; FONT-SIZE: 9px; LINE-HEIGHT: 9px; COLOR: white; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: none}

</style>

        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />

        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />

        <link rel="shortcut icon" type="image/ico" href="favicon.ico"/>

	    <link rel="image_src" href="favicon.ico" />

        <link rel="apple-touch-icon" href="favicon.ico"/>

	<style>

       .jqx-widget{font-family: Arial,Verdana,sans-serif; font-size: 12px;}

       .jqx-widget-content {font-family: Arial,Verdana,sans-serif; font-size: 12px;}

    </style>

    <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/jqxbuttons.js"></script>

    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>

    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>

    <script type="text/javascript" src="../../jqwidgets/jqxnavigationbar.js"></script>

  <script type="text/javascript">

   var currentStoreId, currentLineNum;

    $(document).ready(function ()

        var theme = "energyblue";

          $("#jqxFrameSplitter").jqxSplitter({ theme: 'energyblue', width: '100%', height: 800, panels: [{ size: 260, min: '10%' }, {min: '40%', size: '80%'}]  });

   	      // Create jqxNavigationBar

   	      $("#jqxOutlookBar").jqxNavigationBar({ width: 'auto', height: '95%', theme: 'energyblue', expandMode: 'multiple', expandedIndexes: [0,1,2, 3],  });

   	      $('#jqxFrameSplitter').on('resize', function (event)

                                         $('#jqxFrameSplitter').jqxSplitter('refresh');

});

	    //var storeDataAdapter = getDataAdapter();

        // initialize jqxGrid

        $("#jqxOrderCompletedDDB").jqxDropDownButton({ width: 350, height: 25, theme: theme, autoOpen: true });

        $("#jqxOrderCompletedGrid").jqxGrid(

            width: 350,

            //source: storeDataAdapter,

            theme: theme,

	        rowsheight: 20,

	        columnsheight: 20,

            filterable: true,

            showfilterrow: true,

            columnsmenu: false,

            columnsresize: true,

            columns: [

              { text: 'Store', columntype: 'textbox', datafield: 'storeId', width: 90, hidden: true, filtertype: 'textbox' },

              { text: 'Name', datafield: 'storeNm', columntype: 'textbox', width: 250, filtertype: 'textbox' },

              { text: 'Line Number', columntype: 'dropdownlist', datafield: 'prdctnLnNum', width: 80, filtertype: 'textbox' },

});

        $("#jqxOrderCompletedGrid").on('rowselect', function (event) {

          if (event.args)

});

	    //ARGS (gridIdStr, addBool, refreshBool, searchBool, saveBool, exportBool) {

	    renderStatusBar("#jqxInOrderCompletedGrid", false, true, false, true, true);

        $("#jqxInOrderCompletedGrid").on('cellvaluechanged', function (event)

        		    //var column = args.datafield;

        		    var row = args.rowindex;

        			// @param row index.

        			// @param column datafield.

        			// @param cell value

        			$("#jqxInOrderCompletedGrid").jqxGrid('setcellvalue', row, "isModified", "Y");

        		    //var value = args.newvalue;

        		    //var oldvalue = args.oldvalue;

});

	    createGrid("#jqxNotInOrderCompletedGrid");

	    createGrid("#jqxInOrderCompletedGrid");

	    $("#jqxInOrderCompletedGrid").jqxGrid('editable', 'true');

	    $("#jqxInOrderCompletedGrid").jqxGrid('editmode', 'click');

	    $("#jqxNotInOrderCompletedGrid").jqxGrid('selectionmode', 'multiplerowsextended');

	    function createGrid(gridId)

            // 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);

		    $(gridId).jqxGrid(

		        width: '100%',

		        height: '95%',

		        source: dataAdapter,

		        theme: theme,

		        editable: false,

		        columnsresize: true,

		        rowsheight: 20,

		        columnsheight: 20,

		        theme: 'energyblue',

		        columnsreorder: true,

		        sortable: false,

		        columnsmenu: false,

		        selectionmode: 'singlerow',

		        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' }

});

});

    function renderStatusBar(gridIdStr, addBool, refreshBool, searchBool, saveBool, exportBool)

    	 $(gridIdStr).jqxGrid({ renderstatusbar: function(statusbar)

             // appends buttons to the status bar.

             var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");

             var addButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='./images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Add</span></div>");

             var refreshButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='./images/refresh.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Reload</span></div>");

             var searchButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='./images/search.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Find</span></div>");

             var saveButton   = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='./images/save.gif'/>  <span style='margin-left: 4px; position: relative; top: -3px;'>Save</span></div>");

             var excelExport   = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='./images/excel_icon_sm2.gif'/>  <span style='margin-left: 4px; position: relative; top: -3px;'>Export</span></div>");

                 if(addBool)

                    container.append(addButton);

                    addButton.jqxButton({ theme: 'energyblue', width: 60, height: 20 });

                    // add new row.

                addButton.click(function (event)

                    var newRowIndex = $(gridIdStr).jqxGrid('getdatainformation').rowscount;

                     //var datarow = generatedata(1);

                    var value = $(gridIdStr).jqxGrid('addrow', null, {});

			      	$(gridIdStr).jqxGrid('selectrow', newRowIndex);

			      	$(gridIdStr).jqxGrid('ensurerowvisible', newRowIndex);

                    // IF YOU WISH TO SET DEFAULT VALUES AFTER A NEW ROW IS INSERTED ADD A postAddRow(value) method in your JSP

                    if(typeof postAddRow == 'function')

                    {postAddRow(newRowIndex);}

});

             if(refreshBool)

                container.append(refreshButton);

                refreshButton.jqxButton({ theme: 'energyblue', width: 65, height: 20 });

                // refresh grid data.

                refreshButton.click(function (event)

                    $(gridIdStr).jqxGrid("updatebounddata");

                    if(typeof refreshData == 'function')

                    {refreshData();}

});

             if(searchBool)

                container.append(searchButton);

                searchButton.jqxButton({ theme: 'energyblue', width: 50, height: 20 });

                // refresh grid data.

                searchButton.click(function (event)

                   // YOUR JSP MUST IMPLEMENT THIS METHOD IF searchBool=true

                  search();

                  /**********************************************************

                    // search for a record.

                    searchButton.click(function (event) {

                    var offset = $("#jqxgrid").offset();

                    $("#jqxwindow").jqxWindow('open');

                    $("#jqxwindow").jqxWindow('move', offset.left + 30, offset.top + 30);

                   **********************************************************/

});

             if(saveBool)

                container.append(saveButton);

                saveButton.jqxButton({ theme: 'energyblue', width: 50, height: 20 });

                // refresh grid data.

                saveButton.click(function (event)

                 // YOUR JSP MUST IMPLEMENT THIS METHOD IF saveBool=true

                  save();

});

             if(exportBool)

                container.append(excelExport);

                excelExport.jqxButton({ theme: 'energyblue', width: 60, height: 20 });

                // refresh grid data.

                excelExport.click(function (event)

});

             statusbar.append(container);

});

        $(gridIdStr).jqxGrid({ showstatusbar: true});

		</script>

  </head>

  <body class="energyblue">

  <div id="header">

<div align="center">

<table width="100%" height="99%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">

	<tr>

		<td>

			<!-- Start Top Level Menu -->

	 		<!-- Start User Info and Logout link -->

	       <table border="0" cellspacing="0" cellpadding="0" class="appnav-blend" >

				<tr>

				  	<td style="width:99%">

						<table border="0" cellspacing="0" cellpadding="2" style="height:22px;float:right;">

							<tr valign="middle">

								<td class="data" align="left" valign="center" nowrap>Welcome: </td>

								<td class="mode" align="right" nowrap><span class="username">XXX</span></td>

                        		<td class="data" nowrap>| <a class="topnav" href="logout.do">Logout</a></td>

								<td><img src="images/spacer.gif" alt="" height="15" width="15"></td>

							</tr>

						</table>

					</td>

				</tr>

			</table>

       </td>

    </tr>

</table>

</div>

            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color:#ffffff">

                <tr>

                  <td class="appnav-left-middle"><img src="images/spacer.gif" alt="" height="15" width="15"></td>

                   <td><!--spacer column--><img src="images/spacer.gif" alt="" height="15" width="15"></td>

                   <td class="app-screen">

                       <table width="100%" border="0" cellspacing="0" cellpadding="0">

                           <tr>

                               <td valign="top" width="99%" align="center">

<br>

</div>

      <div id='jqxFrameSplitter' >

        <div id=outlookFrame>

           <table width=100%">

           <tr>

           <td align="center" style="background-color:#e0e9f5;">

             <img src="images/DT5_Large.png" height="250" width="250" alt="">

           </td></tr>

           <tr><td align="left">

           <div id='jqxOutlookBar'>

           	             <div>

           	                <div style='float: left;'><img alt='Mail' src='images/maintenance.png' /></div>

           	                <div style='margin-left: 4px; float: left;'>            Maintenance</div>

           	             </div>

		<div><ul>

           	                                <li><a href=''>Event</a></li>

           	                                <li><a href=''>TEST1</a></li>

           	                                <li><a href=''>TEST2</a></li>

           	                                <li><b>TEST3</b></li>

           	                                <li><a href=''>TEST4</a></li>

           	                                <li><a href=''>TEST5</a></li>

           	                                <li><a href=''>TEST6</a></li>

           	                                <li><a href=''>TEST7</a></li>

           	                                <li><a href=''>TEST8</a></li>

           	                                <li><a href=''>TEST9</a></li>

           	                                <li><a href=''>TEST11</a></li>

           	                                <li><a href=''>TEST12</a></li>

</ul></div>

           	             <div>

           	                <div style='float: left;'><img alt='Mail' src='images/report.png' /></div>

           	                <div style='margin-left: 4px; float: left;'>            Reporting</div>

           	             </div>

		<div><ul>

           	                                <li><a href=''>Event</a></li>

           	                                <li><a href=''>TEST1</a></li>

           	                                <li><a href=''>TEST2</a></li>

           	                                <li><b>TEST3</b></li>

           	                                <li><a href=''>TEST4</a></li>

           	                                <li><a href=''>TEST5</a></li>

           	                                <li><a href=''>TEST6</a></li>

           	                                <li><a href=''>TEST7</a></li>

           	                                <li><a href=''>TEST8</a></li>

           	                                <li><a href=''>TEST9</a></li>

           	                                <li><a href=''>TEST11</a></li>

           	                                <li><a href=''>TEST12</a></li>

</ul></div>

           	             <div>

           	                <div style='float: left;'><img alt='Mail' src='images/report.png' /></div>

           	                <div style='margin-left: 4px; float: left;'>            Reporting</div>

           	             </div>

		<div><ul>

           	                                <li><a href=''>Event</a></li>

           	                                <li><a href=''>TEST1</a></li>

           	                                <li><a href=''>TEST2</a></li>

           	                                <li><b>TEST3</b></li>

           	                                <li><a href=''>TEST4</a></li>

           	                                <li><a href=''>TEST5</a></li>

           	                                <li><a href=''>TEST6</a></li>

           	                                <li><a href=''>TEST7</a></li>

           	                                <li><a href=''>TEST8</a></li>

           	                                <li><a href=''>TEST9</a></li>

           	                                <li><a href=''>TEST11</a></li>

           	                                <li><a href=''>TEST12</a></li>

</ul></div>

           	             <div>

           	                <div style='float: left;'><img alt='Mail' src='images/report.png' /></div>

           	                <div style='margin-left: 4px; float: left;'>            Reporting</div>

           	             </div>

		<div><ul>

           	                                <li><a href=''>Event</a></li>

           	                                <li><a href=''>TEST1</a></li>

           	                                <li><a href=''>TEST2</a></li>

           	                                <li><b>TEST3</b></li>

           	                                <li><a href=''>TEST4</a></li>

           	                                <li><a href=''>TEST5</a></li>

           	                                <li><a href=''>TEST6</a></li>

           	                                <li><a href=''>TEST7</a></li>

           	                                <li><a href=''>TEST8</a></li>

           	                                <li><a href=''>TEST9</a></li>

           	                                <li><a href=''>TEST11</a></li>

           	                                <li><a href=''>TEST12</a></li>

</ul></div>

           </div>

           </td></tr>

           </table>

        </div>

        <div>

           <div id="body">

    <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/jqxgrid.js"></script>

    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>

    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>

    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>

    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsreorder.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/jqxdropdownbutton.js"></script>

    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>

    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>

    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>

    <script type="text/javascript" src="../../jqwidgets/jqxgrid.export.js"></script>

<table style="width:98%;height:20px;">

  <tr>

    <td style="width:99%;text-align:left;">

      <div style="width:100%;height:20px;"><strong id="resultCell"></strong><strong id="resultText" /></strong></div>

    </td>

  </tr>

</table>

<table style="width:500px;height:35px;float:left">

  <tr>

    <td style="width:5px;height:100%;" ></td>

    <td style="width:55px;height:25px;vertical-align:center;text-align:left;">Store Line:</td>

    <td style="width:250px;height:25px;vertical-align:top;">

        <div id="jqxOrderCompletedDDB">

            <div style="border: none;" id="jqxOrderCompletedGrid"></div>

        </div>

    </td>

    <td style="width:10px;text-align:left;vertical-align:top;">

    </td>

  </tr>

</table>

<img src="images/spacer.gif" alt="images/spacer.gif" height="5px" width="100%" border="0px" vspace="0px"></img>

<table style="width:870px;height:100%;table-layout:fixed;float:left">

  <COLGROUP>

    <COL width="5px">

    <COL width="320px">

    <COL width="50px" align="center">

    <COL width="500px">

    <COL width="50px" align="center">

    <COL width="auto">

  </COLGROUP>

  <tr>

    <td style="width:5px;height:100%;" ></td>

    <td style="height:100%;">

        <div id="jqxNotInOrderCompletedGrid"></div>

    </td>

    <td>

      <table style="table-layout:fixed;">

        <tr>

          <td style="height:5%; vertical-align:bottom;" >

              <img src="../../jqwidgets/styles/images/arrow_right.png" alt="../../jqwidgets/styles/images/arrow_right.png" height="32px" width="32px" border="0px" vspace="5px" onclick="moveRows('#jqxNotInOrderCompletedGrid', '#jqxInOrderCompletedGrid')"></img>

          </td>

        </tr>

        <tr>

          <td style="height:5%;vertical-align:top;">

              <img src="../../jqwidgets/styles/images/arrow_left.png" alt="../../jqwidgets/styles/images/arrow_left.png" height="32px" width="32px" border="0px" vspace="5px" onclick="moveRows('#jqxInOrderCompletedGrid', '#jqxNotInOrderCompletedGrid')"></img>

          </td>

        </tr>

      </table>

    </td>

    <td style="height:100%;">

        <div id="jqxInOrderCompletedGrid"></div>

    </td>

    <td>

      <table style="table-layout:fixed;">

        <tr>

          <td style="height:40px; vertical-align:bottom;" >

              <img src="../../jqwidgets/styles/images/arrow_top.png" alt="../../jqwidgets/styles/images/arrow_top.png" height="32px" width="32px" border="0px" vspace="5px" onclick="moveSelectedOrder('up')"></img>

          </td>

        </tr>

        <tr>

          <td style="height:40px;vertical-align:top;">

              <img src="../../jqwidgets/styles/images/arrow_bottom.png" alt="../../jqwidgets/styles/images/arrow_bottom.png" height="32px" width="32px" border="0px" vspace="5px" onclick="moveSelectedOrder('down')"></img>

          </td>

        </tr>

      </table>

    </td>

  </tr>

</table>

</div>

        </div>

    </div>

  <div id="footer">

        <table cellspacing="0" cellpadding="0" border="0" class="appnav-blend">

            <td valign="middle" width="50%" align="left" bgcolor="#336699" height="20" class="footertext" nowrap>&nbsp;&nbsp;&nbsp;v1.0.0</td>

            <td bgcolor="#336699" height="20" valign="middle" align="center" class="footertext" nowrap>

                &copy; 2013 Test. All Rights Reserved.

            </td>

            <td bgcolor="#336699" width="50%" height="20" valign="middle" align="right" nowrap>

                <img src="images/new_mail.gif"> <a class="whiteLink" href="mailto:test@test.com?subject=PMD - Feedback">Feedback</a>&nbsp;&nbsp;&nbsp;

            </td>

        </tr>

    </table>

    </div>

    </div>

  </body>

</html>

Author

Posts

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.