git.infodrom.org Git - infodrom/rico3/blob - examples/asp/3grids.asp

   1 <%@ LANGUAGE="VBSCRIPT" %>\r
   2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\r
   3 <html>\r
   4 <head>\r
   5 <title>Rico LiveGrid-3 Grid Example</title>\r
   6 \r
   7 <!-- #INCLUDE FILE = "../../plugins/asp/LoadRicoClient.asp" -->\r
   8 <%\r
   9 Dim RicoClient\r
  10 set RicoClient = new LoadRicoClient\r
  11 RicoClient.SetRicoClientParentPath "../../ricoClient/"\r
  12 RicoClient.CheckQueryString   ' just for demo\r
  13 RicoClient.CreateLinks\r
  14 set RicoClient = Nothing\r
  15 %>\r
  16 \r
  17 <%\r
  18 session.contents("customergrid")="select CustomerID,CompanyName,ContactName,Address,City,Region,PostalCode,Country,Phone,Fax from customers order by CustomerID"\r
  19 session.contents("ordergrid")="select CustomerID,OrderID,ShipName,ShipCity,ShipCountry,OrderDate,ShippedDate from orders order by OrderID"\r
  20 session.contents("detailgrid")="select OrderID,p.ProductName,QuantityPerUnit,od.UnitPrice,Quantity,od.UnitPrice*Quantity as Total,Discount,od.UnitPrice*Quantity*(1.0-Discount) as NetPrice from order_details od left join products p on od.ProductID=p.ProductID order by od.ProductID"\r
  21 %>\r
  22 \r
  23 <link href="../demo.css" type="text/css" rel="stylesheet" />\r
  24 <script type="text/javascript">\r
  25 var customerGrid, orderGrid, detailGrid;\r
  26 \r
  27 Rico.onLoad( function() {\r
  28 \r
  29   var opts = {  prefetchBuffer: false,\r
  30                 columnSpecs   : [{canSort:false,visible:false},,,,,{type:'date'},{type:'date'}],\r
  31                 canFilterDefault: false,\r
  32                 dblclick      : Rico.eventHandle(window,'orderDrillDown'),\r
  33                 menuEvent     : 'contextmenu',\r
  34                 highlightElem : 'menuRow',\r
  35                 visibleRows   : 'parent'\r
  36              };\r
  37   orderGrid=new Rico.LiveGrid ('ordergrid', new Rico.Buffer.AjaxSQL('ricoQuery.asp'), opts);\r
  38   orderGrid.menu=new Rico.GridMenu();\r
  39 \r
  40   var opts = {  prefetchBuffer: false,\r
  41                 columnSpecs   : [{canSort:false,visible:false},,,'specDollar','specQty','specDollar','specPercent','specDollar'],\r
  42                 canFilterDefault: false,\r
  43                 menuEvent     : 'contextmenu',\r
  44                 highlightElem : 'menuRow',\r
  45                 visibleRows   : 'parent'\r
  46              };\r
  47   detailGrid=new Rico.LiveGrid ('detailgrid', new Rico.Buffer.AjaxSQL('ricoQuery.asp'), opts);\r
  48   detailGrid.menu=new Rico.GridMenu();\r
  49 \r
  50   var opts = {  prefetchBuffer: true,\r
  51                 frozenColumns : 2,\r
  52                 dblclick      : Rico.eventHandle(window,'customerDrillDown'),\r
  53                 menuEvent     : 'contextmenu',\r
  54                 highlightElem : 'menuRow',\r
  55                 visibleRows   : 'parent'\r
  56              };\r
  57   customerGrid=new Rico.LiveGrid ('customergrid', new Rico.Buffer.AjaxSQL('ricoQuery.asp'), opts);\r
  58   customerGrid.menu=new Rico.GridMenu();\r
  59 });\r
  60 \r
  61 function MeasureLayout() {\r
  62   var c=Rico.select('div.gridcontainer');\r
  63   var msg='';\r
  64   for (var i=0; i < c.length; i++)\r
  65     msg+='Container'+i+': offsetHeight='+c[i].offsetHeight+'  scrollHeight='+c[i].scrollHeight+'\n';\r
  66   alert(msg);\r
  67 }\r
  68 \r
  69 function customerDrillDown(e) {\r
  70   var cell=Rico.eventElement(e);\r
  71   cell=Rico.getParentByTagName(cell,'div','ricoLG_cell');\r
  72   if (!cell) return;\r
  73   Rico.eventStop(e);\r
  74   var winIdx=customerGrid.winCellIndex(cell);\r
  75   var dataIdx=customerGrid.datasetIndex(cell);\r
  76   if (!dataIdx.onBlankRow) {\r
  77     customerGrid.highlight(winIdx);\r
  78     var custid=customerGrid.columns[0].getValue(winIdx.row);\r
  79     Rico.$("order_caption").innerHTML='Orders for '+custid;\r
  80     Rico.$("detail_caption").innerHTML="";\r
  81     orderGrid.columns[0].setSystemFilter("EQ",custid);\r
  82     detailGrid.resetContents();\r
  83   }\r
  84   return false;\r
  85 }\r
  86 \r
  87 function orderDrillDown(e) {\r
  88   var cell=Rico.eventElement(e);\r
  89   cell=Rico.getParentByTagName(cell,'div','ricoLG_cell');\r
  90   if (!cell) return;\r
  91   Rico.eventStop(e);\r
  92   var winIdx=orderGrid.winCellIndex(cell);\r
  93   var dataIdx=orderGrid.datasetIndex(cell);\r
  94   if (!dataIdx.onBlankRow) {\r
  95     orderGrid.highlight(winIdx);\r
  96     var orderid=orderGrid.columns[1].getValue(winIdx.row);\r
  97     Rico.$("detail_caption").innerHTML='Order #'+orderid;\r
  98     detailGrid.columns[0].setSystemFilter("EQ",orderid);\r
  99   }\r
 100   return false;\r
 101 }\r
 102 \r
 103 function detailDataMenu(objCell,onBlankRow) {\r
 104   return !onBlankRow;\r
 105 }\r
 106 \r
 107 </script>\r
 108 \r
 109 <style type="text/css">\r
 110  html, body {\r
 111     height:96%;\r
 112     margin: 0px;\r
 113     padding: 0px;\r
 114     border: none;\r
 115  }\r
 116 \r
 117 \r
 118 .gridcontainer {\r
 119   margin-left:5px;\r
 120   width:70%;\r
 121   overflow:visible;\r
 122   float: left;\r
 123   font-size: 8pt !important;\r
 124 }\r
 125 \r
 126 #explanation {\r
 127   overflow:auto;\r
 128   height:99%;\r
 129   width:25%;\r
 130   font-size:8pt;\r
 131   font-family:Verdana, Arial, Helvetica, sans-serif;\r
 132   float: left;\r
 133   padding: 5px;\r
 134 }\r
 135 \r
 136 div.ricoLG_cell {\r
 137   font-size: 8pt;\r
 138   height: 12px;\r
 139   white-space: nowrap;\r
 140 }\r
 141 </style>\r
 142 \r
 143 </head>\r
 144 \r
 145 <body>\r
 146 <div id='explanation'>\r
 147 Base Library: \r
 148 <script type='text/javascript'>\r
 149 document.write(Rico.Lib+' '+Rico.LibVersion);\r
 150 </script>\r
 151 <hr>\r
 152 <p>Unlike the other examples, grid menus are activated in this example\r
 153 by <strong>right-clicking</strong> on a grid (ctrl-click in Opera, Konqueror, or Safari). \r
 154 <p>To filter: right-click \r
 155 on the value that you would like to use as the basis for filtering, \r
 156 then select the desired filtering method from the pop-up menu.\r
 157 <p>Right-click anywhere in a column to see sort, hide, and show options.\r
 158 <p><strong>Double-click</strong> on a row to see all orders for that customer.\r
 159 Double-click on an order to see the line items for that order.\r
 160 <p>Drag the edge of a column heading to resize a column.\r
 161 <!--\r
 162 <p><button onclick='MeasureLayout();'>Measure Grid Containers</button>\r
 163 -->\r
 164 </div>\r
 165 \r
 166 <div class='gridcontainer' style='height:39%'>\r
 167 \r
 168 <p class="ricoBookmark"><span class='ricoCaption'>Customers</span>\r
 169 <span id="customergrid_bookmark"></span>\r
 170 </p>\r
 171 <table id="customergrid">\r
 172 <colgroup>\r
 173 <col style='width:60px;' >\r
 174 <col style='width:150px;' >\r
 175 <col style='width:115px;'>\r
 176 <col style='width:130px;' >\r
 177 <col style='width:90px;' >\r
 178 <col style='width:60px;' >\r
 179 <col style='width:90px;' >\r
 180 <col style='width:100px;'>\r
 181 <col style='width:115px;'>\r
 182 <col style='width:115px;'>\r
 183 </colgroup>\r
 184   <tr>\r
 185           <th>Cust ID</th>\r
 186           <th>Company</th>\r
 187           <th>Contact</th>\r
 188           <th>Address</th>\r
 189           <th>City</th>\r
 190           <th>Region</th>\r
 191           <th>Postal Code</th>\r
 192           <th>Country</th>\r
 193           <th>Phone</th>\r
 194           <th>Fax</th>\r
 195   </tr>\r
 196 </table>\r
 197 \r
 198 </div>\r
 199 <div class='gridcontainer' style='height:30%'>\r
 200 \r
 201 <p class="ricoBookmark"><span id="order_caption" class='ricoCaption'></span>\r
 202 <span id="ordergrid_bookmark">&nbsp;</span>\r
 203 </p>\r
 204 <table id="ordergrid">\r
 205 <colgroup>\r
 206 <col style='width:60px;'  >\r
 207 <col style='width:60px;' >\r
 208 <col style='width:150px;'>\r
 209 <col style='width:80px;' >\r
 210 <col style='width:90px;' >\r
 211 <col style='width:100px;'>\r
 212 <col style='width:100px;'>\r
 213 </colgroup>\r
 214   <tr>\r
 215           <th>Customer#</th>\r
 216           <th>Order#</th>\r
 217           <th>Ship Name</th>\r
 218           <th>Ship City</th>\r
 219           <th>Ship Country</th>\r
 220           <th>Order Date</th>\r
 221           <th>Ship Date</th>\r
 222   </tr>\r
 223 </table>\r
 224 \r
 225 </div>\r
 226 <div class='gridcontainer' style='height:30%'>\r
 227 \r
 228 <p class="ricoBookmark"><span id="detail_caption" class='ricoCaption'></span>\r
 229 <span id="detailgrid_bookmark">&nbsp;</span>\r
 230 </p>\r
 231 <table id="detailgrid">\r
 232 <colgroup>\r
 233 <col style='width:60px;'  >\r
 234 <col style='width:150px;'>\r
 235 <col style='width:125px;'>\r
 236 <col style='width:80px;' >\r
 237 <col style='width:50px;' >\r
 238 <col style='width:80px;' >\r
 239 <col style='width:80px;' >\r
 240 <col style='width:90px;' >\r
 241 </colgroup>\r
 242   <tr>\r
 243           <th>Order #</th>\r
 244           <th>Description</th>\r
 245           <th>Unit Quantity</th>\r
 246           <th>Unit Price</th>\r
 247           <th>Qty</th>\r
 248           <th>Total</th>\r
 249           <th>Discount</th>\r
 250           <th>Net Price</th>\r
 251   </tr>\r
 252 </table>\r
 253 \r
 254 </div>\r
 255 \r
 256 </body>\r
 257 </html>\r