Master/Detail

Labels
AJAX(112) App Studio(7) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(177) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(183) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
Master/Detail
Sunday, August 17, 2008PrintSubscribe
Features of Master/Detail Presentation

Excellent master/detail support in Data Aquarium Framework comes with some great premium features, which typically require a lot of custom coding of high complexity.

Simple Markup

The standout feature is the simplicity of page definitions.

Consider a web form that displays customers and their orders. A considerable amount of markup is required to define a page like that if you are using standard ASP.NET components, such as GridView, DetailsView, and ObjectDataSource.

Here is a page fragment in a Data Aquarium Framework application that displays customers and orders:

    <!-- presentation of customers -->
    <div id="Customers" runat="server">
    </div>
    <aquarium:DataViewExtender ID="CustomersExtender" runat="server" TargetControlID="Customers"
        Controller="Customers" PageSize="3" />
    <!-- presentation of orders -->
    <div id="Orders" runat="server">
    </div>
    <aquarium:DataViewExtender ID="OrdersExtender" runat="server" TargetControlID="Orders"
        Controller="Orders" PageSize="3" FilterSource="CustomersExtender" FilterFields="CustomerID" />

A couple of div elements and a couple of DataViewExtender components is all what is needed to render user interface like the one you can see live here.

This is an example of the discussed master/detail screen. It shows Customers, Orders, and Order Details.

AJAX and server components of Data Aquarium Framework implement a centralized declarative user interface programming model. Your typical ASP.NET application is likely based on a page-centric model. Standard ASP.NET application pages host components such as GridView and DetailsView with their columns and fields predefined. The framework is relying on reusable data controller descriptors to get the metadata required to rendered user interface presentation. Follow the link to see a sample data controller.

The centralized definition of user interface elements allows unmatched flexibility in user interface development. The same views defined once in a data controller can be referred in dozens of pages. These views are displayed automatically in dynamic lookups without any coding.

You can connect data controller views in all sorts of ways without writing any code. Simply set the FilterSource and FilterFields properties of detail DataViewExtender components to create complex master/detail relationships on a web form. Use the technique shown in the sample markup above.

Properties FilterSource and FilterFields are used to construct efficient dynamic SQL statements that are executed by your database server. Data Aquarium Framework packages the results of the queries into arrays of values and delivers them to the client components running on a page. AJAX components of the framework will render an HTML markup and replace fragments of the page to provide smooth user experience.

Load-on-Demand

Try the sample tabbed presentation of tables in the Data Aquarium Framework application created from the Northwind database.

image

When you open the sample page for first time Categories and Products are dynamically loaded from the server and displayed. The act of opening a page is causing the server to render the tabbed user interface with Ajax Control Toolkit components TabContainer and TabPanel that you are seeing on the screen shot. The Web.DataView AJAX components of Data Aquarium Framework are embedded in the tabs. These components are making two additional requests to get just enough data to present customers and orders on the form.

There are many more tabs with Web.DataView component instances matched to the rest of the Northwind database tables and connected in master/detail fashion. If all of them were executing data retrieval requests at the same time then that would have created dozens of additional server interactions. Many of this requests could be totally without purpose since an application user is likely not to look at all of them.

Click on the Customers tab and notice that the customer data has been requested on-demand and displayed shortly after you have click on the tab.

image

Data Aquarium Framework components automatically determine the exact amount of data that is needed to present in the user interface views that are actually visible to a user. Physical data retrieval happens when you select a tab and bring invisible views in focus.

Automatic Hiding of Filter Fields

If you change the markup of DataViewExtender components by removing FilterSource and FilterFields properties then the runtime screen will look similar to the one below if you select the first customer and sort orders by customer company name.

image

Notice that the orders section is displaying a customer company name for each order. This is great if both views are completely independent but is not desirable if you have a master / detail presentation. All displayed orders are related to the same selected customer in that case. A repeated customer name on each order line takes up the valuable real estate of the page and should be eliminated.

Restore the FilterSource and FilterFields properties on OrdersExtender and notice that orders view automatically hides the customer company name without any extra coding.

image

If you were to link orders to employees then the employee last name column would disappear.

Primary Key Inheritance

Navigate to the sample application and try to add a new product in any category. First select a category. Sort products by name and then click on New menu option on the action bar of the products view. Click on New Products menu item. Enter A new product and press OK button.

image

The following view will be presented next.

image

The new product is automatically linked to selected master category without any coding. The primary key field values of selected master record are automatically copied to the detail record foreign key fields when the detail record is inserted into database.

This feature is automatically enabled when you set a master/detail connection via FilterSource and FilterFields properties of DataViewExtender. You can create custom action handlers to provide additional data processing before and after the SQL command.

Support For Standard Data Components

There will be times when you need to write some highly custom master/detail web forms and would rather rely on standard ASP.NET components to do so. Data Aquarium Framework provides ControllerDataSource data source component that works great with standard components or any other commercial library that you own.

Generate an application based on Data Aquarium project , open the generated code in Visual Studio 2008 or Visual Web Developer Express 2008 and and create a new page StandardMD.aspx based on the MasterPage.master in the web site root. Enter the following markup:

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="StandardMD.aspx.cs" Inherits="StandardMD" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Header1Placeholder" runat="Server">
    Standard Master/Detail
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Header2Placeholder" runat="Server">
    Northwind
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="BodyPlaceholder" runat="Server">
    <aquarium:ControllerDataSource ID="CustomersCDS" runat="server" DataController="Customers">
    </aquarium:ControllerDataSource>
    <asp:GridView ID="Customers" runat="server" DataSourceID="CustomersCDS" AllowPaging="true"
        AllowSorting="true" AutoGenerateDeleteButton="true" AutoGenerateEditButton="true"
        AutoGenerateSelectButton="true" DataKeyNames="CustomerID">
    </asp:GridView>
    <aquarium:ControllerDataSource ID="OrdersCDS" runat="server" DataController="Orders">
        <FilterParameters>
            <asp:ControlParameter Name="CustomerID" ControlID="Customers" PropertyName="SelectedValue" />
        </FilterParameters>
    </aquarium:ControllerDataSource>
    <asp:GridView ID="Orders" runat="server" DataSourceID="OrdersCDS" AllowPaging="true"
        AllowSorting="true" AutoGenerateDeleteButton="true" AutoGenerateEditButton="true"
        AutoGenerateSelectButton="true" DataKeyNames="OrderID">
    </asp:GridView>
</asp:Content>

The only unusual code here is the presence of ControllerDataSource instances. The standard GridView components on the page are bound to the data sources via DataSourceID property. Data source OrdersCDS is set to behave as a detail of the Customers grid view and will filter data whenever a customer is selected on the page. If you run the page and select a customer then the following user interface will be presented.

image

Nothing really fancy. But if you do look closer then you will notice that you can page and sort your records. You can edit, and delete anything on the page. The orders grid is automatically refreshed when a customer is selected.

In fact, you can have thousands of records in both grids and they will work extremely fast thanks to the on-demand data retrieval built into Data Aquarium Framework. Only the data that needs to be presented on the page is actually retrieved from the database. The exact same code is being executed on the sever in response to requests by client-side AJAX components when they need to displays data. That sort of functionality is hard to accomplish unless you resort to use ObjectDataSource components and write custom business objects to support them.

With a little bit of editing you can have this page look like the one below.

image

To speed up customization select the data source instances of this sample page and execute Refresh Schema command in the smart tag options of each data source. This will automatically create fields for your grid views.

Remember that ControllerDataSource is working with any standard or custom components that are compatible with ASP.NET data binding architecture.

Conclusion

Data Aquarium Framework provides significant productivity features to developers building master / detail web forms. Modern AJAX-based user interface components of the framework will automatically handle many complicated issues that are commonly encountered by application developers. Standard ASP.NET web forms are supported as well via ControllerDataSource component.

Saturday, August 16, 2008PrintSubscribe
Master/Detail in One Page

Most applications require a master/detail presentation of data on a form. This presentation styles has been perfected in desktop applicati0ns, but is still a difficult task in a web application. Data Aquarium Framework makes presenting master/detail data easy.

Let's set a master detail presentation in application that was generated from Northwind database. The sample application created by Code OnTime Generator already includes a master/detail demo page that presents and links all your tables simultaneously. Here is a screen shot:

MasterDetail

We will create a brand new page and link together Customers, Orders, and Order Details.

Start by generating a new Data Aquarium Framework project. Open the generated project in Visual Studio 2008 or Visual Web Developer Express 2008 and add a new web form OrderManager.aspx to the root of the site. Make sure to select a master page when you are adding this new form to the project.

Edit the page to make it look like this:

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="OrderManager.aspx.cs" Inherits="OrderManager" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Header1Placeholder" runat="Server">
    Order Manager
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Header2Placeholder" runat="Server">
    Northwind
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="BodyPlaceholder" runat="Server">
    <!-- presentation of customers -->
    <div id="Customers" runat="server" style="margin-bottom: 4px;">
    </div>
    <aquarium:DataViewExtender ID="CustomersExtender" runat="server" TargetControlID="Customers"
        Controller="Customers" PageSize="3" />
    <!-- presentation of orders -->
    <div id="Orders" runat="server" style="margin-bottom: 4px;">
    </div>
    <aquarium:DataViewExtender ID="OrdersExtender" runat="server" TargetControlID="Orders"
        Controller="Orders" PageSize="3" FilterSource="CustomersExtender" FilterFields="CustomerID" />
    <!-- presentation of order details -->
    <div id="OrderDetails" runat="server">
    </div>
    <aquarium:DataViewExtender ID="OrderDetailsExtender" runat="server" TargetControlID="OrderDetails"
        Controller="OrderDetails" PageSize="5" FilterSource="OrdersExtender" FilterFields="OrderID" />
</asp:Content>

Master/detail link is established between DataViewExtender components. Two properties are involved.

FilterSource property refers to the master view extender. For example, OrdersExtender is linked to CustomersExtender.

Property FilterFields identifies the fields in the data controller that will be filtered with values from the primary keys selected in the view of the master extender when rendered in a browser. The client java script component Web.DataView will try to match the fields of the detail view with selected key fields in the master by matching their names. Field CustomerID of the Orders view will easily match to the name of the primary key field in the Customers view. If the field names are different then the ordinal position of the fields in the filter is being used for matching.

You can set up unlimited number of the master detail links within the same page. No post backs are executed. The page section refreshing is smooth and the application behaves a lot like a desktop program. All views provide sorting and adaptive filtering. Filtering automatically recognizes master details links and reduces the number of available filter-by-example options.

Select FileView in Browser option in the menu of your development tool. The page will load the data and if you start interacting with the page the it may look like that.

OrderManager

The live version of this page is hosted here.

Select a company name and orders section will display relevant orders. Select an order and details of the order will show up. Select and edit an order and your screen may look like the one below. Notice that you can even add new lookup values for Employees, Shippers, and Products in place if the lookup values are not available without making a single page refresh or ever leaving the page.

OrderManagerEdit

Considering that minuscule amount of markup code that you actually have to write there is no other tool on the market that can do the same. Subscribe to the premium projects and generate your own application. Many more exciting features and code generator projects are coming up and will be released to premium project subscribers. Post your questions or request new feature on our forum.

Saturday, August 16, 2008PrintSubscribe
Database Lookups and Data Aquarium Framework Update

A new update includes the following features available in Data Aquarium Framework projects:

  • Ability to create lookup items in-place. This useful feature allows users of your applications to quickly add a lookup item if the item is not available yet. Let's say you are entering a new product and have typed in quite a lot of information on the New Product form just to discover that the supplier of the product has not been registered yet. In a typical web application you are in trouble - close your form and add the supplier first. Not so if your application has been created with Data Aquarium Framework. Simply click on the New Item icon next to the lookup to create and automatically select a new lookup item. You can see this feature in action here.

    Create New Lookup item feature in action.

  • A few issues with master/detail links with multiple data view extenders on the same page were resolved. Now a sample applicati0n that is being generated for Data Aquarium Framework project by Code OnTime Generator has been enhanced to create a spectacular master/detail demo page. See the live example here.

    MasterDetail

  • A new highlight and select feature has been integrated into the framework. Now you can simply click on any row in the grid views of the application to select it. This can be used as a simple visual reference by users. Users can click on any part of the row when selecting a record in a lookup view. This feature makes it easier to work with master/detail pages. Now you can quickly select a master row by clicking anywhere in a grid to get your details displayed. This feature simply issues a Select command without any arguments when you click on any column of a highlighted row in a grid view. Try this out in our live demo here.
  • Firefox 3.0 has been rendering action bar menu items that were hanging far under the bar. This bug has been fixed.

Database Lookups for ASP.NET and AJAX 3.5 project benefits from the bug fixes and java script component enhancements. The in-place creation of lookup items is available only in the full version of Database Lookups included with Data Aquarium Framework.