Working with DataBlocks (Part 6 of 6)

DataBlocks are a powerful concept in Vidyano in that they help to solve common data oriented tasks such as querying. In this part of the tutorial we will add a new page that will allow us to search for products.

Adding the product management module

1. Right-click the AdventureWorksDemo.Module project and select Add -> Vidyano Module...
2. Select the AdventureWorksDataContext from the model list and click Finish.

Add a new page

1. Open the ProductManagement.mod file by double-clicking it in the AdventureWorksDemo.Module project.
2. Click Pages on the left, and click the + Button at the top to create a new Page.
3. Name the page Overview and click Next.
4. Select the DockPanel and pick the one With Top.

   
   Figure 25 : DockPanel With Top

5. Click Finish.

Adding the DataBlock

1. Click Data Blocks on the left, and click the + Button at the top to create a new Data Block.
2. Select the Product entity, since we will be searching for products.
3. Set the name to ProductsByName and the scope to Overview.

   
   Figure 26 : The Add Data Block dialog

4. Leave Fetch Size blank and Auto Execute Query selected, then click Finish.

Configuring the Data Block

1. On the Data Block designer page, change the name of the first property from Text to Name.

   
   Figure 27 : The Data Block designer page

2. Click the View Code button on the toolbar in the properties section.


Figure 28 : View Code button

3. In the Overview constructor, where it says “Initialization code goes here”, write the query. Update the constructor as follow:

public Overview()

 {

      this.InitializeComponent();

      ProductsByName.Query =  from p in Module.Context.Products

                              where p.Name.Contains(ProductsByName.Name)

                              select p;

 }

Note: Notice how the Name property we created in step a is now used as a parameter in the query.

Displaying the search box

1. Go back to the ProductManagement module designer.
2. Click on Pages, the Overview page is now visible again.
3. Click on the button 1 on PART_1 to start the part generator.
4. From the Add Part for PART_1 dialog box, select the LookupTextBox.


Figure 29 : The available part generators

5. Select the Product entity, the ProductsByName data block and the Name property.


Figure 30 : Configuring the LookupTextBox

6. Uncheck the Show Popup checkbox and click Next.

Binding the search results

1. Go back to the ProductManagement module designer.
2. Click on the button 2 on PART_2 to start the part generator.
3. On the Add Part for PART_2 dialog, select the ListView (Grid) control.
4. Configure the ListView to display the Product entity and set the binding to Results (PART_1).


Figure 31 : The Add Data Block dialog

5. Select some properties from the left, as in the screenshot above and click Next.

Launching the application

1. Run the application by pressing CTRL+F5 or the Play button on the toolbar.
2. In the application, click the ProductManagement module.
3. Type Road in the textbox at the top and watch the products listed that contain Road in the name.


Figure 32 : The search results