Friday, March 30, 2012

Auto Select in Data Views

Complex master/detail pages in Code On Time web applications are hiding detail records until a specific master record is selected.

For example, this is the initial state of the Suppliers page in the Northwind sample. This page is capable of rendering a list of suppliers with their respective products. If a master supplier is not selected then the Products child data view is not visible.

The initial state of the master/detail page 'Suppliers' without a selected master record.

Users can click on a link in the first column to activate the Suppliers form view. This will result in the linked products displayed at the bottom of the page below the form.

You can configure an application data view to simulate a click on a link in the first column of the first row as soon as a page loads in the web browser.

Start web application generator, select the project name, and activate the Project Designer.

Select Suppliers / container1 / view1 in Project Explorer.

Page data view selected in the Project Explorer

Enable property “Auto Select First Row” under Presentation section of the data view properties and click OK to save the changes.

Data view property 'Auto Select First Row' in the Project Designer

Click Browse on the tool bar and navigate to the Suppliers page. The very first row in the master view of suppliers will be selected. Products from the selected supplier are displayed beneath the form view.

Property 'Auto Select First Row' causes automatic execution of the first action in the action group with the 'Grid' scope.

Setting the Auto Select First Row property to True causes automatic execution of the first action in the action group with the “Grid” scope.

The default configuration of this action group in shown next. As you can see the first row will be selected in the form view editForm1 if a user clicks on a link in the first column. The same effect is caused by Auto Select First Row property when page loads in the web browser.

Action group with scope 'Grid' expanded in Project Explorer

Right-click action group ag1 and select Show All Actions option.

Context menu of the action group in Project Explorer

Select the action group ag2 in Project Designer and click Up on the tool bar.

Changing the order of actions in the action group

The hierarchy of nodes in Project Explorer will change. Action a2 with command name Edit is now the first action in the action group ag1 with the scope of “Grid”. Note that this action does not have a view specified as the command argument.

Modified action group in Project Explorer

Click Browse button on the tool bar of Project Designer and navigate to the Suppliers page once more. The first row is selected and presented in edit mode.

'Edit' action executed without an argument on a page with the master data view that has its property  'Auto Select First Row' set to 'True'

No comments:

You can find more about Code OnTime Generator, Data Aquarium Framework, and other great products here.


© 2010 Code OnTime LLC. Intelligent code generation software for ASP.NET. Visit us at http://codeontime.com