AJAX

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
AJAX
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.

Sunday, August 10, 2008PrintSubscribe
Presenting Multiple Views of the Same Data

Ability to see multiple views of the same data is an invaluable tool for the end users of your applications. It provides increased productive due the reduced time spent while searching for data.

Let's generate a Data Aquarium Framework application from the Northwind database and research the multiple view presentation capabilities of the framework. If you run the application and select Customers option from the drop down at top of the page then the following view of customers is displayed.

image

At the right side of the blue tool bar above the grid you can see the orange view selector that shows Customers in it. You can expand the list of views to provide alternative presentation of data without any coding.

Suppose you want to display phone and fax information on screen and don't really care if the customer ID is available. Open the ~/Controllers/Customers.xml data controller descriptor file in Visual Studio 2008 and add the following markup in the views section:

    <view id="grid2" type="Grid" commandId="command1" label="Phone/Fax">
      <headerText>List of customers with phone and fax. </headerText>
      <dataFields>
        <dataField fieldName="CompanyName" columns="40" />
        <dataField fieldName="Phone" columns="24" />
        <dataField fieldName="Fax" columns="24" />
        <dataField fieldName="Country" columns="15" />
        <dataField fieldName="ContactName" columns="30" />
        <dataField fieldName="ContactTitle" columns="30" />
      </dataFields>
    </view>

This is how the data will be presented if you refresh the page and select the name of the new view in the view selector. Notice that each view maintains its own sorting, adaptive filtering, and current page when you switch from one view to another.

image

You may also provide an alternative query to produce data displayed in the view. Imagine that you want to have a quick way to list all customers from United States of America. You will need to define the following command in commands section of the data controller:

    <command id="command2" type="Text">
      <text>
        <![CDATA[
select
    "Customers"."CustomerID" "CustomerID"
    ,"Customers"."CompanyName" "CompanyName"
    ,"Customers"."ContactName" "ContactName"
    ,"Customers"."ContactTitle" "ContactTitle"
    ,"Customers"."Address" "Address"
    ,"Customers"."City" "City"
    ,"Customers"."Region" "Region"
    ,"Customers"."PostalCode" "PostalCode"
    ,"Customers"."Country" "Country"
    ,"Customers"."Phone" "Phone"
    ,"Customers"."Fax" "Fax"
from "dbo"."Customers" "Customers"
where
  "Customers"."Country"='USA'
]]>
      </text>
    </command>

Also add the following view in the views section:

    <view id="grid3" type="Grid" commandId="command2" label="USA Customers">
      <headerText>List of customers from United States of America. </headerText>
      <dataFields>
        <dataField fieldName="CompanyName" columns="40" />
        <dataField fieldName="ContactName" columns="30" />
        <dataField fieldName="ContactTitle" columns="30" />
        <dataField fieldName="Address" />
        <dataField fieldName="City" columns="15" />
        <dataField fieldName="Region" columns="15" />
        <dataField fieldName="PostalCode" columns="10" />
        <dataField fieldName="Phone" columns="24" />
      </dataFields>
    </view>

View grid3 is referring to command2 in the commandId attribute of the view element.

The following presentation will be available to application users from now on. Independent sorting, paging, and current page are automatically maintained for this view as well.

image

Notice that all views are instantly available in any data lookups that are referring to Customers data controller. Verify that by navigating to the orders screen. Select any order and edit the record. Click on the Customer Company Name link and try selecting the views that we have defined.

image

Data Aquarium Framework provides unparalleled ease and flexibility in defining custom presentation views of your data.