Thursday, April 19, 2012

Provide a combobox with parameter values in XtraReports for LightSwitch

Problem

When using XtraReports for LightSwitch based on a filtered query, the default behavior for the XtraReports preview screen is to show a textbox in which you can type the value of the parameter. With Date values the XtraReports has a calendar dropdown, but for numeric or string data like identifiers or codes that refer to primary keys in lookup tables, we have to provide some code to build a combobox list to facilitate life for the user.

Prerequisites

This article is a follow-up on my article on how to create a 3 column report.

In this example a report preview screen LabelProductsByCategory was created based on a query qryProductsByCategory with a filter with one integer parameter (CategoryId)

image

The report preview screen uses a numeric up-down control to enter a category Id. Here the user would appreciate an combobox with a list of the names and not the id’s.

image

Solution

The solution I provide is based on the XtraReports tutorial Provide Custom Editors for Report Parameters. Some lines of coding are needed to replace the standard up-down box by a DevExpress ComboBoxEdit control. This control is installed together with the XtraReports controls.

Advantages of the ComboBoxEdit control

This control has properties that can be set improve the user experience, in particular:

  • ItemsSource – can be set to a List of objects
  • ValueMember – will contain the value of the column that contains the value we need for the parameter (in most cases it is an Id column)
  • DisplayMember – will contain the column value that show a human readable text (in most cases the name column)

The code in the example under step 3. will illustrate this.

Example

We need to add code in the preview screen to generate a local list object with values from the categories table that can be used by the ComboBoxEdit control.

  1. In the solution explorer right click on the report preview screen and select View Screen Code.
    image
  2. In the report preview screen code above the namespace,
    1. Add a reference to the DevExpress.Xpf libraries
      using DevExpress.Xpf.Editors;
      using DevExpress.Xpf.Printing;

  3. In the class LabelProductsbyCategory


    1. define a List object in the report preview screen class
    2. define a customize parameters event handler, in here the ComboBoxEdit will be created.
    3. add the address of the event handler to the report preview model
    4. In the Activated event populate the list with the categories entities.


      public partial class LabelProductsByCategory
      {
       
          // 1. define a list object
          List<object> categories;
       
          // 2. define a customize parameter event handler
          void model_CustomizeParameterEditors(object sender, CustomizeParameterEditorsEventArgs e)
          {
              if (e.Parameter.Name == "ProductCategoryID")
              {
                  var editor = new ComboBoxEdit();
                  editor.ItemsSource = categories;
                  editor.ValueMember = "ProductCategoryID";   // this is the column name with the value that will be used 
                  editor.DisplayMember = "Name";  // this is the column name with the text that will be displayed
                  e.Editor = editor;
                  e.BoundDataMember = "EditValue";
              }
          }
       
          public void CustomizeReportPreviewModel(DevExpress.Xpf.Printing.ReportPreviewModel model)
          {
               // 3. add the customize event handler to the model
              model.CustomizeParameterEditors += model_CustomizeParameterEditors;
          }
       
          // 
       
          partial void LabelProductsByCategory_Activated()
          {
              this.ReportTypeName = "LightSwitchApplication.LabelProductByCategory";
       
              // populate the List object
              categories = new List<object>();
              foreach (ProductCategory category in new DataWorkspace().AdventureWorksData.ProductCategories)
              {
                  categories.Add(category);
              }
          }
      }

  4. Save and debug.

    1. When we open the preview screen, click on the ComboBoxEdit control the list with 4 Categories opens.
      image
    2. Select an item, e.g. ‘Clothing’ and click ‘Submit’
      The report is shown with products that belong to the category ‘clothes’
      image

Conclusion


The XtraReports preview screen can be based on a filtered query, the parameters of which are presented automatically in a text box. With a little coding and a ComboBoxEdit control we can then make the selection of the parameter values user-friendlier.