jQuery UI Widgets Forums Grid Resize with Splitter, Grid and NavigationBar

Tagged: 

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

Viewing 1 post (of 1 total)
  • Author

  • 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>
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.