Example
Source
Run as server control
Nested grids can be created with the
addNestedGrid
method to create a powerful drill-down capability
Include the Javascript library file
<script src="../dbnetgrid.js"></script>
Styles
tr.nestedLevel1 td.treeContainer { background-color:#bbff66; padding:5px; } tr.nestedLevel1 tr.evenRow { background-color:#bbff66; } tr.nestedLevel2 td.treeContainer { background-color:#ffdd44; padding:5px; } tr.nestedLevel2 tr.evenRow { background-color:#ffdd44; }
Client-side script
window.onload = initGrid var dbnetgrid1 ////////////////////////////////////////////////////////////////////////////////////////////// function initGrid() ////////////////////////////////////////////////////////////////////////////////////////////// { dbnetgrid1 = new DbNetGrid( "dbnetgrid1" ) with ( dbnetgrid1 ) { headings = ["Customer Name","Address","City","Phone","Fax"] selectPart = ["companyname","address","city","phone","fax"] fromPart = "customers" primaryKeyColumn = "customerid" connectionString = "samples" pageSize = 10 outputMode = true addNestedGrid( configureOrdersGrid, "customerid" ) nestedColumnColour = "white" loadData() } } ////////////////////////////////////////////////////////////////////////////////////////////// function configureOrdersGrid( parentGrid ) ////////////////////////////////////////////////////////////////////////////////////////////// { with (parentGrid.childGrid) { // You can manually configure the filter like this // fixedFilterPart = "customerid = @customerid" // queryParameters["customerid"] = parentRow.id displayToolbar = false fromPart = "orders" headings = ["Order Id", "Order Date","Required Date","Shipped Date"] selectPart = ["orderid", "orderdate","requireddate","shippeddate"] addNestedGrid( configureOrderDetailsGrid, "orderid" ) primaryKeyColumn = "orderid" loadData() } } ////////////////////////////////////////////////////////////////////////////////////////////// function configureOrderDetailsGrid( parentGrid ) ////////////////////////////////////////////////////////////////////////////////////////////// { with (parentGrid.childGrid) { displayToolbar = false fromPart = "[order details] inner join products on [order details].productid = products.productid" headings = ["Product","Unit Price","Quantity", "Discount"] selectPart = ["productname", "[order details].unitprice", "quantity", "discount"] loadData() } }
HTML
<div id=dbnetgrid1></div>