Example
Source
Run as client-side object
DbNetCombo
can be used to provide en effective high-level filtering method for
DbNetGrid
. In this example
DbNetCombo
is used to drill-down through the customer data to select a customer for which
DbNetGrid
displays the orders.
Country
City
Customer
Register the component libraries
<%@ Register TagPrefix="Combo" Namespace="DbNetLink.Web.UI" Assembly="DbNetLink.DbNetCombo" %> <%@ Register TagPrefix="Grid" Namespace="DbNetLink.Web.UI" Assembly="DbNetLink.DbNetGrid" %>
Server Control
<form id="Form1" name="Form1" method="post" runat="server"> <table border=1 borderColor=silver style='border-collapse:collapse' cellpadding=10> <tr> <td style="background-color:whitesmoke"> <table cellpadding=0 cellspacing=0> <tr> <td class="label">Country</td> <td> </td> <td class="label">City</td> <td> </td> <td class="label">Customer</td> </tr> <tr> <td> <Combo:DbNetCombo id="country" runat="server" Sql="select distinct country from customers where country is not null order by country" ConnectionString="suite" NoLoad="true" > <LinkedCombos> <Combo:LinkedCombo ComboId="city" ParameterName="country"></Combo:LinkedCombo> </LinkedCombos> </Combo:DbNetCombo> </td> <td> </td> <td> <Combo:DbNetCombo id="city" runat="server" Sql="select distinct city from customers where country = @country order by city" ConnectionString="suite" > <LinkedCombos> <Combo:LinkedCombo ComboId="customer" ParameterName="city"></Combo:LinkedCombo> </LinkedCombos> </Combo:DbNetCombo> </td> <td> </td> <td> <Combo:DbNetCombo id="customer" runat="server" Sql="select customerid, companyname, address, city, postalcode, country from customers where city = @city order by companyname" ConnectionString="suite" OnChange = "refreshOrderGrid" > </Combo:DbNetCombo> </td> </td> </table> </td> </tr> <tr> <td> <Grid:DbNetGrid id="orders" runat="server" FromPart="orders" ConnectionString="suite" PrimaryKeyColumn = "orderid" ForeignKeyColumn = "customerid" SelectPart = "orderid, employeeid, orderdate, requireddate, shippeddate, freight" Headings = "Order #, Taken By, Date Ordered, Date Required, Date Shipped, Freight Charge" NoLoad="true" > <GridColumnLookups> <Grid:GridColumnLookup ColumnName="employeeid" ForeignKeyColumn="employeeid" ForeignDescriptionColumn="lastname + ', ' + firstname" ForeignTable="employees"></Grid:GridColumnLookup> </GridColumnLookups> <GridColumnProperties> <Grid:ColumnProperty ColumnName="freight" Property="format" Value="n"></Grid:ColumnProperty> </GridColumnProperties> <NestedGrid id="orderDetails" runat="server" FromPart="[order details] inner join products on [order details].productid = products.productid" ForeignKeyColumn = "orderid" SelectPart = "productname, [order details].unitprice, quantity, discount" Headings = "Product,Unit Price,Quantity, Discount" DisplayToolbar="false" > </NestedGrid> </Grid:DbNetGrid> </td> </tr> </table> </form>
Client-side script
window.onload = initialise ////////////////////////////////////////////////////////////////////////////////////////////// function initialise() ////////////////////////////////////////////////////////////////////////////////////////////// { window.DbNetComboArray["country"].load() } ////////////////////////////////////////////////////////////////////////////////////////////// function refreshOrderGrid() ////////////////////////////////////////////////////////////////////////////////////////////// { with ( window.DbNetGridArray["orders"] ) { fixedFilterPart = "customerid = '" + window.DbNetComboArray["customer"].value + "'" loadData() } }
Styles
td.label { font-weight:bold; }