Classic Master-Details Layout

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(8) OAuth Scopes(1) OAuth2(11) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(10) PKCE(2) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(180) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(80) 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
Sunday, May 9, 2010PrintSubscribe
Classic Master-Details Layout

New page layout is now available to subscribers. Numerous enhancements to client-side JavaScript library have allowed us to implement a smooth AJAX-enabled layout of master-detail data pages with intelligent scrolling management.

Classic master-detail layout will place master view at the top of the page and all children at the bottom of the page. Each child will be placed on a dedicated tab so that only master and one child data views are visible at any time. The details of the selected master record are automatically displayed on the side bar and stay visible even if the page is scrolled.

You can see the live demo of the new layout at http://dev.codeontime.com/demo/websitefactory6.

Here is the screenshot of the Classic layout with master grid and child tabs. The master grid in the screenshot presents a list of customers. The child tabs provide access to customer orders, customer demographic data, and order details. Users can click on any master row and see detail records of the active tab displayed in an instant.

image

Child tabs intelligently delay loading of the content. The records are retrieved from the database only when a tab is visible. One master and a dozen of child tabs will execute only two web calls to create the page content.

If a link in the first column in any row is selected then a parent record is displayed with the child records refreshed accordingly.

image

You can enable the new layout on the Layout page of the Web Site Factory project wizard. This layout has now become the default layout of the new projects.

image

The enhancements have also affected the Stacked page layout and any custom page layouts with more than one data view container  on a page. The pages will refresh smoothly and will intelligently manage page scrolling and resizing.