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.

4 comments:

ninest123 said...

louis vuitton outlet, sac longchamp, ralph lauren pas cher, replica watches, louboutin outlet, louboutin shoes, christian louboutin outlet, prada outlet, ugg boots, longchamp pas cher, tiffany and co, louis vuitton, louboutin, air jordan pas cher, tory burch outlet, cheap oakley sunglasses, nike outlet, polo ralph lauren outlet, ray ban sunglasses, polo ralph lauren outlet, louis vuitton outlet, nike air max, replica watches, louis vuitton, air max, longchamp outlet, michael kors, oakley sunglasses, chanel handbags, nike free, nike roshe run, oakley sunglasses, burberry, tiffany jewelry, ray ban sunglasses, kate spade outlet, prada handbags, oakley sunglasses, nike air max, louis vuitton, louboutin pas cher, uggs on sale, ray ban sunglasses, oakley sunglasses, longchamp, jordan shoes, gucci outlet, ugg boots, nike free, longchamp outlet

ninest123 said...

vanessa bruno, coach outlet, nike free run uk, michael kors, michael kors outlet, coach outlet, replica handbags, new balance pas cher, michael kors outlet, hollister pas cher, michael kors, converse pas cher, nike air max, tn pas cher, ray ban pas cher, michael kors, abercrombie and fitch, lululemon, ralph lauren uk, vans pas cher, michael kors, michael kors outlet, mulberry, nike air max, kate spade handbags, nike air max, hermes, ugg boots, hollister, nike roshe, lacoste pas cher, oakley pas cher, nike blazer, ugg boots, true religion jeans, michael kors outlet, sac guess, air force, true religion outlet, hogan, ray ban uk, coach purses, timberland, north face, burberry, michael kors outlet, true religion jeans, burberry outlet online, north face, true religion jeans

ninest123 said...

lancel, celine handbags, jimmy choo shoes, bottega veneta, nike roshe, asics running shoes, gucci, giuseppe zanotti, nike huarache, mcm handbags, herve leger, hollister, hollister, new balance, ray ban, p90x workout, soccer shoes, babyliss, longchamp, mac cosmetics, nike trainers, chi flat iron, mont blanc, vans, vans shoes, ghd, iphone cases, nike air max, hollister, ferragamo shoes, ralph lauren, louboutin, nike air max, beats by dre, valentino shoes, converse outlet, lululemon, north face outlet, instyler, soccer jerseys, birkin bag, insanity workout, baseball bats, north face outlet, abercrombie and fitch, timberland boots, reebok shoes, nfl jerseys, oakley, wedding dresses

ninest123 said...

hollister, louis vuitton, canada goose outlet, moncler, pandora jewelry, swarovski, louis vuitton, bottes ugg, coach outlet, moncler, supra shoes, montre pas cher, moncler, ugg,uggs,uggs canada, ugg,ugg australia,ugg italia, canada goose, links of london, pandora jewelry, karen millen, doudoune canada goose, juicy couture outlet, moncler, pandora charms, marc jacobs, swarovski crystal, moncler, ugg pas cher, thomas sabo, louis vuitton, moncler outlet, moncler, canada goose, canada goose uk, canada goose outlet, ugg boots uk, juicy couture outlet, wedding dresses, moncler, canada goose, toms shoes, louis vuitton, replica watches, sac louis vuitton pas cher, pandora charms, canada goose