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                 saveColumnInfo: {width:true, filter:true, sort:true},\r
  56                 visibleRows   : 'parent'\r
  57              };\r
  58   customerGrid=new Rico.LiveGrid ('customergrid', new Rico.Buffer.AjaxSQL('ricoQuery.asp'), opts);\r
  59   customerGrid.menu=new Rico.GridMenu();\r
  60 });\r
  61 \r
  62 function MeasureLayout() {\r
  63   var c=Rico.select('div.gridcontainer');\r
  64   var msg='';\r
  65   for (var i=0; i < c.length; i++)\r
  66     msg+='Container'+i+': offsetHeight='+c[i].offsetHeight+'  scrollHeight='+c[i].scrollHeight+'\n';\r
  67   alert(msg);\r
  68 }\r
  69 \r
  70 function customerDrillDown(e) {\r
  71   var cell=Rico.eventElement(e);\r
  72   cell=Rico.getParentByTagName(cell,'div','ricoLG_cell');\r
  73   if (!cell) return;\r
  74   Rico.eventStop(e);\r
  75   var winIdx=customerGrid.winCellIndex(cell);\r
  76   var dataIdx=customerGrid.datasetIndex(cell);\r
  77   if (!dataIdx.onBlankRow) {\r
  78     customerGrid.highlight(winIdx);\r
  79     var custid=customerGrid.columns[0].getValue(winIdx.row);\r
  80     Rico.$("order_caption").innerHTML='Orders for '+custid;\r
  81     Rico.$("detail_caption").innerHTML="";\r
  82     orderGrid.columns[0].setSystemFilter("EQ",custid);\r
  83     detailGrid.resetContents();\r
  84   }\r
  85   return false;\r
  86 }\r
  87 \r
  88 function orderDrillDown(e) {\r
  89   var cell=Rico.eventElement(e);\r
  90   cell=Rico.getParentByTagName(cell,'div','ricoLG_cell');\r
  91   if (!cell) return;\r
  92   Rico.eventStop(e);\r
  93   var winIdx=orderGrid.winCellIndex(cell);\r
  94   var dataIdx=orderGrid.datasetIndex(cell);\r
  95   if (!dataIdx.onBlankRow) {\r
  96     orderGrid.highlight(winIdx);\r
  97     var orderid=orderGrid.columns[1].getValue(winIdx.row);\r
  98     Rico.$("detail_caption").innerHTML='Order #'+orderid;\r
  99     detailGrid.columns[0].setSystemFilter("EQ",orderid);\r
 100   }\r
 101   return false;\r
 102 }\r
 103 \r
 104 function detailDataMenu(objCell,onBlankRow) {\r
 105   return !onBlankRow;\r
 106 }\r
 107 \r
 108 </script>\r
 109 \r
 110 <style type="text/css">\r
 111  html, body {\r
 112     height:96%;\r
 113     margin: 0px;\r
 114     padding: 0px;\r
 115     border: none;\r
 116  }\r
 117 \r
 118 \r
 119 .gridcontainer {\r
 120   margin-left:5px;\r
 121   width:70%;\r
 122   overflow:visible;\r
 123   float: left;\r
 124   font-size: 8pt !important;\r
 125 }\r
 126 \r
 127 #explanation {\r
 128   overflow:auto;\r
 129   height:99%;\r
 130   width:25%;\r
 131   font-size:8pt;\r
 132   font-family:Verdana, Arial, Helvetica, sans-serif;\r
 133   float: left;\r
 134   padding: 5px;\r
 135 }\r
 136 \r
 137 div.ricoLG_cell {\r
 138   font-size: 8pt;\r
 139   height: 12px;\r
 140   white-space: nowrap;\r
 141 }\r
 142 </style>\r
 143 \r
 144 </head>\r
 145 \r
 146 <body>\r
 147 <div id='explanation'>\r
 148 Base Library: \r
 149 <script type='text/javascript'>\r
 150 document.write(Rico.Lib+' '+Rico.LibVersion);\r
 151 </script>\r
 152 <hr>\r
 153 <p>Unlike the other examples, grid menus are activated in this example\r
 154 by <strong>right-clicking</strong> on a grid (ctrl-click in Opera, Konqueror, or Safari). \r
 155 <p>To filter: right-click \r
 156 on the value that you would like to use as the basis for filtering, \r
 157 then select the desired filtering method from the pop-up menu.\r
 158 <p>Right-click anywhere in a column to see sort, hide, and show options.\r
 159 <p><strong>Double-click</strong> on a row to see all orders for that customer.\r
 160 Double-click on an order to see the line items for that order.\r
 161 <p>Drag the edge of a column heading to resize a column.\r
 162 <!--\r
 163 <p><button onclick='MeasureLayout();'>Measure Grid Containers</button>\r
 164 -->\r
 165 </div>\r
 166 \r
 167 <div class='gridcontainer' style='height:39%'>\r
 168 \r
 169 <p class="ricoBookmark"><span class='ricoCaption'>Customers</span>\r
 170 <span id="customergrid_bookmark"></span>\r
 171 </p>\r
 172 <table id="customergrid">\r
 173 <colgroup>\r
 174 <col style='width:60px;' >\r
 175 <col style='width:150px;' >\r
 176 <col style='width:115px;'>\r
 177 <col style='width:130px;' >\r
 178 <col style='width:90px;' >\r
 179 <col style='width:60px;' >\r
 180 <col style='width:90px;' >\r
 181 <col style='width:100px;'>\r
 182 <col style='width:115px;'>\r
 183 <col style='width:115px;'>\r
 184 </colgroup>\r
 185   <tr>\r
 186           <th>Cust ID</th>\r
 187           <th>Company</th>\r
 188           <th>Contact</th>\r
 189           <th>Address</th>\r
 190           <th>City</th>\r
 191           <th>Region</th>\r
 192           <th>Postal Code</th>\r
 193           <th>Country</th>\r
 194           <th>Phone</th>\r
 195           <th>Fax</th>\r
 196   </tr>\r
 197 </table>\r
 198 \r
 199 </div>\r
 200 <div class='gridcontainer' style='height:30%'>\r
 201 \r
 202 <p class="ricoBookmark"><span id="order_caption" class='ricoCaption'></span>\r
 203 <span id="ordergrid_bookmark">&nbsp;</span>\r
 204 </p>\r
 205 <table id="ordergrid">\r
 206 <colgroup>\r
 207 <col style='width:60px;'  >\r
 208 <col style='width:60px;' >\r
 209 <col style='width:150px;'>\r
 210 <col style='width:80px;' >\r
 211 <col style='width:90px;' >\r
 212 <col style='width:100px;'>\r
 213 <col style='width:100px;'>\r
 214 </colgroup>\r
 215   <tr>\r
 216           <th>Customer#</th>\r
 217           <th>Order#</th>\r
 218           <th>Ship Name</th>\r
 219           <th>Ship City</th>\r
 220           <th>Ship Country</th>\r
 221           <th>Order Date</th>\r
 222           <th>Ship Date</th>\r
 223   </tr>\r
 224 </table>\r
 225 \r
 226 </div>\r
 227 <div class='gridcontainer' style='height:30%'>\r
 228 \r
 229 <p class="ricoBookmark"><span id="detail_caption" class='ricoCaption'></span>\r
 230 <span id="detailgrid_bookmark">&nbsp;</span>\r
 231 </p>\r
 232 <table id="detailgrid">\r
 233 <colgroup>\r
 234 <col style='width:60px;'  >\r
 235 <col style='width:150px;'>\r
 236 <col style='width:125px;'>\r
 237 <col style='width:80px;' >\r
 238 <col style='width:50px;' >\r
 239 <col style='width:80px;' >\r
 240 <col style='width:80px;' >\r
 241 <col style='width:90px;' >\r
 242 </colgroup>\r
 243   <tr>\r
 244           <th>Order #</th>\r
 245           <th>Description</th>\r
 246           <th>Unit Quantity</th>\r
 247           <th>Unit Price</th>\r
 248           <th>Qty</th>\r
 249           <th>Total</th>\r
 250           <th>Discount</th>\r
 251           <th>Net Price</th>\r
 252   </tr>\r
 253 </table>\r
 254 \r
 255 </div>\r
 256 \r
 257 </body>\r
 258 </html>\r