Feature: Drag and Drop Everywhere

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
Monday, August 6, 2012PrintSubscribe
Feature: Drag and Drop Everywhere

Everything in a Code On Time web application project can be configured with drag and drop and Cut/Copy/Paste with multiple selection. For example, master-detail pages can be quickly configured by dragging and dropping project configuration elements.

Start the Project Designer and create a new page called “Master Detail Page”.

New Page toolbar option in the Project Explorer of web application designer.

Drag the new page to the right side of the Home page and drop to have it moved.

Dropping Master Detail Page on the right side of Home page.      Master Detail Page placed after Home page in the Project Explorer.

While holding down Ctrl key, select Customers, Orders, OrderDetails data controllers and copy them to the clipboard.

Copy context menu option for three selected controllers in the Project Explorer.

Paste the controllers to the Master Detail Page.

Paste context menu option for a page node in the Project Explorer.      Master Detail Page with three new data views in individual containers after pasting.

Drag CustomerID data field node onto view1. The data view view2 will be configured to filter orders by the customer selected in view1 data view.

Dropping CustomerID data field from view2 to view1.      Data view 'view2' is now configured with a master-detail relationship with 'view1'. Records will be filtered according to the selected record in 'view1'.

Drag OrderID data field node onto view2. Data view view3 will be configured to filter order details by the order selected in view2 data view.

Dropping OrderID data field node onto view2.      View3 has been configured to filter order details by the selected order.

View the page in the browser.

View in Browser context menu option in the Project Explorer.

Select a customer, and a list of related orders will appear underneath. Select an order, and related order details will be displayed.

Master Detail Page configured with a three-level master-detail relationship.

Learn more about advanced configuration of master-detail pages.