1 <%@ LANGUAGE="VBSCRIPT" %>
\r
2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
\r
5 <title>Rico LiveGrid-3 Grid Example</title>
\r
7 <!-- #INCLUDE FILE = "../../plugins/asp/LoadRicoClient.asp" -->
\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
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
23 <link href="../demo.css" type="text/css" rel="stylesheet" />
\r
24 <script type="text/javascript">
\r
25 var customerGrid, orderGrid, detailGrid;
\r
27 Rico.onLoad( function() {
\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
37 orderGrid=new Rico.LiveGrid ('ordergrid', new Rico.Buffer.AjaxSQL('ricoQuery.asp'), opts);
\r
38 orderGrid.menu=new Rico.GridMenu();
\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
47 detailGrid=new Rico.LiveGrid ('detailgrid', new Rico.Buffer.AjaxSQL('ricoQuery.asp'), opts);
\r
48 detailGrid.menu=new Rico.GridMenu();
\r
50 var opts = { prefetchBuffer: true,
\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
58 customerGrid=new Rico.LiveGrid ('customergrid', new Rico.Buffer.AjaxSQL('ricoQuery.asp'), opts);
\r
59 customerGrid.menu=new Rico.GridMenu();
\r
62 function MeasureLayout() {
\r
63 var c=Rico.select('div.gridcontainer');
\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
70 function customerDrillDown(e) {
\r
71 var cell=Rico.eventElement(e);
\r
72 cell=Rico.getParentByTagName(cell,'div','ricoLG_cell');
\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
88 function orderDrillDown(e) {
\r
89 var cell=Rico.eventElement(e);
\r
90 cell=Rico.getParentByTagName(cell,'div','ricoLG_cell');
\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
104 function detailDataMenu(objCell,onBlankRow) {
\r
105 return !onBlankRow;
\r
110 <style type="text/css">
\r
124 font-size: 8pt !important;
\r
132 font-family:Verdana, Arial, Helvetica, sans-serif;
\r
140 white-space: nowrap;
\r
147 <div id='explanation'>
\r
149 <script type='text/javascript'>
\r
150 document.write(Rico.Lib+' '+Rico.LibVersion);
\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
163 <p><button onclick='MeasureLayout();'>Measure Grid Containers</button>
\r
167 <div class='gridcontainer' style='height:39%'>
\r
169 <p class="ricoBookmark"><span class='ricoCaption'>Customers</span>
\r
170 <span id="customergrid_bookmark"></span>
\r
172 <table id="customergrid">
\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
192 <th>Postal Code</th>
\r
200 <div class='gridcontainer' style='height:30%'>
\r
202 <p class="ricoBookmark"><span id="order_caption" class='ricoCaption'></span>
\r
203 <span id="ordergrid_bookmark"> </span>
\r
205 <table id="ordergrid">
\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
220 <th>Ship Country</th>
\r
221 <th>Order Date</th>
\r
227 <div class='gridcontainer' style='height:30%'>
\r
229 <p class="ricoBookmark"><span id="detail_caption" class='ricoCaption'></span>
\r
230 <span id="detailgrid_bookmark"> </span>
\r
232 <table id="detailgrid">
\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
245 <th>Description</th>
\r
246 <th>Unit Quantity</th>
\r
247 <th>Unit Price</th>
\r