How to: Validate Modified Rows

Assume that a Grid View contains two columns: "Units In Stock" and "Units On Order". A value in the first column must be more than the value of the second one. So we need to perform validation of a row when it is about to be saved to the data source. For this purpose, the ColumnView.ValidateRow event is handled.
If row fails validation, we set errors for the columns with coresponding descriptions using the ColumnView.SetColumnError method. The descriptions will be displayed when hovering over error icons.
The ColumnView.InvalidRowException event is handled in order to suppress displaying the default error message box.
The following screenshot shows a Grid View after a row fails validation.

C#

using DevExpress.XtraGrid.Views.Base;

using DevExpress.XtraGrid.Columns;

using DevExpress.XtraEditors.Controls;

private void gridView1_ValidateRow(object sender,

DevExpress.XtraGrid.Views.Base.ValidateRowEventArgs e) {

    GridView view = sender as GridView;

    GridColumn inStockCol = view.Columns["UnitsInStock"];

    GridColumn onOrderCol = view.Columns["UnitsOnOrder"];

    //Get the value of the first column

    Int16 inSt = (Int16)view.GetRowCellValue(e.RowHandle, inStockCol);

    //Get the value of the second column

    Int16 onOrd = (Int16)view.GetRowCellValue(e.RowHandle, onOrderCol);

    //Validity criterion

    if (inSt < onOrd) {

        e.Valid = false;

        //Set errors with specific descriptions for the columns

        view.SetColumnError(inStockCol, "The value must be greater than Units On Order");

        view.SetColumnError(onOrderCol, "The value must be less than Units In Stock");

    }

}

private void gridView1_InvalidRowException(object sender,

DevExpress.XtraGrid.Views.Base.InvalidRowExceptionEventArgs e) {

    //Suppress displaying the error message box

    e.ExceptionMode = ExceptionMode.NoAction;

}

VB

Imports DevExpress.XtraGrid.Views.Base

Imports DevExpress.XtraGrid.Columns

Imports DevExpress.XtraEditors.Controls

Private Sub GridView1_ValidateRow(ByVal sender As Object, _

ByVal e As DevExpress.XtraGrid.Views.Base.ValidateRowEventArgs) _

Handles GridView1.ValidateRow

    Dim view As GridView = CType(sender, GridView)

    Dim inStockCol As GridColumn = View.Columns("UnitsInStock")

    Dim onOrderCol As GridColumn = View.Columns("UnitsOnOrder")

    'Get the value of the first column

    Dim inSt As Int16 = CType(view.GetRowCellValue(e.RowHandle, UnitsInStock), Int16)

    'Get the value of the second column

    Dim onOrd As Int16 = CType(view.GetRowCellValue(e.RowHandle, UnitsOnOrder), Int16)

    'Validity criterion

    If inSt < onOrd Then

        e.Valid = False

        'Set errors with specific descriptions for the columns

        View.SetColumnError(inStockCol, "The value must be greater than Units On Order")

        View.SetColumnError(onOrderCol, "The value must be less than Units In Stock")

    End If

End Sub

Private Sub GridView1_InvalidRowException(ByVal sender As Object, _

ByVal e As DevExpress.XtraGrid.Views.Base.InvalidRowExceptionEventArgs) _

Handles GridView1.InvalidRowException

    'Suppress displaying the error message box

    e.ExceptionMode = ExceptionMode.NoAction

End Sub

Create a Static Report

To create a simple report, do the following.

• Create an Application and Add a Report
• Construct the Report
• Output the Report
• Get the Result

Create an Application and Add a Report

1.      Run Microsoft® Visual Studio® (2008 or 2010).

2.      Start a new project (CTRL+SHIFT+N), and create a new Windows Forms Application.

3.      On the Project menu, choose Add New Item... (or press CTRL+SHIFT+A) to invoke the Add New Item dialog.

In this dialog, choose the XtraReport Class v12.1 item and click Add. This will add a new blank report to your application.

Alternatively, you can choose the XtraReport Wizard v12.1 template, which invokes the Report Wizard that is intended for quick creation of classic reports.

Construct the Report

5.      Now the Visual Studio shows the designer for the newly created report (by default it is called XtraReport1; this name will be used in the current lesson). Note that this report is derived from the XtraReport class, which is the base class for all reports. You may find this behavior similar to the one introduced when you're creating a new form class, which is derived from the base System.Windows.Forms.Form class.

To proceed with report creation, open the Toolbox pane (by pressing CTRL+ALT+X), then select the XRLabel control in the DX.12.1: Report Controls tab and drop it onto the report's Detail Band.

6.      Double-click the created label to invoke its in-place editor, which allows you to input text. For example, type the classic Hello World! statement. Then use the XtraReports toolbar to adjust the label's color and font options.

7.      Now switch to the Preview tab via the Preview button at the bottom.

Also, if you want to see how this report will look as HTML, switch to the HTML View tab.

Output the Report

8.      Now switch to the Form1's designer and add three System.Windows.Forms.Button controls to it. Change their text to Preview, Print and Edit, appropriately.

9.      Write the following Click event handlers for these buttons.

C# VB

private void button1_Click(object sender, EventArgs e) {     // Create a report.      XtraReport1 report = new XtraReport1();       // Show the report's preview.      report.ShowPreview(); }   private void button2_Click(object sender, EventArgs e) {     // Create a report.      XtraReport1 report = new XtraReport1();       // Print the report.      report.Print(); }   private void button3_Click(object sender, EventArgs e) {     // Create a report.      XtraReport1 report = new XtraReport1();       // Open the report in the End-User Designer.      report.ShowDesigner(); }

10.  Alternatively, you can preview a report on an arbitrary form. To learn more on this, refer to How to: Show a Report's Preview on a Form.

Get the Result

Run the application. Click the Preview button to invoke the Preview window containing the created Hello World! report. To print the report, just click the Print button.

Identifying the Grid's Element Located Under the Mouse Cursor

The XtraGrid consists of many different visual elements. Column headers, summary footers, cells and row indicators to name a few. Sometimes, it is necessary to identify this visual elements based on the position of the mouse.

1.       For example, I have a sample project here with an XtraGrid on a form.

2.       I can use the grid view’s CalcHitInfo method to determine the grid’s visual element based on the passed-in coordinates.

3.       The CalcHitInfo will return a GridHitInfo structure containing all the hit information that I need.

4.       In particular, the GridHitInfo.HitTest enum will help me identify the exact element that the mouse is on.

5.       We can learn more about this enum by exploring it in the MouseMove event.

private void gridControl1_MouseMove(object sender, MouseEventArgs e) {

GridHitInfo hi = gridView1.CalcHitInfo(e.X, e.Y);

this.Text = hi.HitTest.ToString();

}

6.  Here, we simply display the value of the HitTest in the title.

7.  A common scenario for CalcHitInfo is determaning a data row from a double click event.

private void gridControl1_DoubleClick(object sender, EventArgs e) {

       GridHitInfo hi = gridView1.CalcHitInfo(

(sender as Control).PointToClient(Control.MousePosition));

       if (hi.RowHandle >= 0) {

XtraGrid_Demo.ContactsDataSet.CustomersRow dr =              

gridView1.GetDataRow(hi.RowHandle) as

XtraGrid_Demo.ContactsDataSet.CustomersRow;

              if (dr != null) {

                     MessageBox.Show(dr.FirstName);

              }

       }

    }

8.  We will request the GridHitInfo based on the current mouse position and use the grid view’s GetDataRow method to get the actual data row object, based on the hit info that we have.

9.  Now, I can run the application and double click on any row. I should see a MessageBox displaying a FirstName of my customer.

WinForms Grid - Add a New Item to the Grid's Popup Menu

In this video, you will learn how to add items to the popup menu that appears when right-clicking on the grid’s footer. We will use the gridView’s “ShowGridMenu” event to add a DevExpress MenuItem to the context menu.

1.       I’ll start with a WinForms application that has a Grid Control bound to the Orders Table of the NorthWind Sample Database.

2.       First, I need to enable the footer in order to be able to access its context menu at runtime.

3.       To do this, I run the Grid’s Designer and switch to the Feature Browser.

4.       I expand “Summary”, “Total Summary” and select “Footer”.

5.       On the right, I click on the “OptionsView.ShowFooter” link to make the grid’s footer visible.

6.       And I’m done.

7.       I close the designer and return to Visual Studio.

8.       I select the gridView and create a new handler for its “ShowGridMenu” event.

9.       This event is fired when the user right-clicks on the grid’s footer.

10.   Before adding any code to the event handler, I’m going to create a custom event handler that will be triggered when the new MenuItem is clicked.

private void MyMenuItem(object sender, System.EventArgs e) {

DevExpress.Utils.Menu.DXMenuItem Item =
                (DevExpress.Utils.Menu.DXMenuItem)sender;

      DevExpress.XtraGrid.Menu.GridViewFooterMenu menu =
                (DevExpress.XtraGrid.Menu.GridViewFooterMenu)Item.Tag;

      MessageBox.Show(menu.View.FocusedColumn.Caption);
}

11.   This will create a new messagebox, displaying the name of the selected column.

12.   Now, I’m going to add the following code to the event handler.

13.   This will add a new entry, “MyItem” in our case, and associate it with the “MyMenuItem” method I created earlier.

if(e.MenuType != DevExpress.XtraGrid.Views.Grid.GridMenuType.Summary)
     return;

DevExpress.XtraGrid.Menu.GridViewFooterMenu footerMenu =
          (DevExpress.XtraGrid.Menu.GridViewFooterMenu)e.Menu;

DevExpress.Utils.Menu.DXMenuItem menuItem = new
           DevExpress.Utils.Menu.DXMenuItem("MyItem",
           new EventHandler(MyMenuItem));

menuItem.Tag = e.Menu;

footerMenu.Items.Add(menuItem);

14.   And that’s it!

15.   I run the application to see the results.

16.   I right-click on the footer of the grid and the context menu now includes the new item.

17.   I click on it and the “MyMenuItem” event handler is invoked a creating a messagebox with the name of the currently selected column.

Thanks for watching and thank you for choosing DevExpress!

XtraGrid - Applying Filters

In this lesson, you will learn how to build and apply complex filter criteria using the “Filter Editor”. The XtraGrid provides the “Filter Editor” tool, which enables end-user to build complex filter criteria with an unlimited number of filter conditions combined by logical operators.

End-user can invoke the Filter Editor by using the “Edit Filter” button, which is displayed within the filter panel.

1.       The visibility of this panel is controlled by the “Show Filter Panel Mode” property.

2.       By default, the filter panel is shown when the filtering is applied to a view.

3.       Otherwise, it is hidden.

4.       I can set this property to “show always”, so that the filter panel can always be displayed at the bottom of the view.

5.       The availability of the filter editor is controlled by the “Allow Filter Editor” option.

6.       By default, this property is set to true, thus enabling the end-users to use the “Filter Editor”.

7.       So, now I can run the application to demonstrate how to work with the “Filter Editor”.

8.       I invoke it.

9.       A new empty condition has already been added to the filter criteria.

10.   I’m going to select orders made between the 20^th of May 1994, and 10^th of November 1994.

11.   First, I select the column for which the filter condition will be applied to. This is the “Order Date” column.

12.   In the operator drop-down, I select the “Is between” item.

13.   And finally, I can select the range of dates for the “Is between” operator.

14.   The editor used in these value boxes, by the way, is determined by the type of the editor which is assigned to the corresponding column.

15.   In this case, it’s a “Date/Time” editor, which drops down a calendar control, enabling the user to easily select dates.

16.   And I’m done!

17.   Now, I’m going to add a second condition, which selects the orders whose freight cost is more than $50.

18.   I apply this condition to the “Freight” column.

19.   I select the “Is greater than” operator, and then type in $50.

20.   The third condition I’m going to use, selects only those orders, where the shipping country is either USA, Brazil or Belgium.

21.   This condition is applied to the “Ship Country” column.

22.   I select the “Is any of” operator from the drop-down.

23.   Now, I need to add a list of the countries.

24.   I can start by selecting USA, and so I can add Brazil, and I can continue adding to the list now by adding Belgium.

25.   And I’m done!

26.   I apply this filter criteria to the view and close the filter editor.

27.   You can see that only those orders that match our criteria are displayed within the view.

28.   The filter criteria which is applied to the view is displayed within the filter panel at the bottom of the view.

XtraGrid - Introducing the Feature Browser

In this lesson, I’ll demonstrate how to use the Feature browser tool, which helps you easily customize the XtraGrid Control.

The Feature Browser provides a structured feature list with related settings. I’m going to demonstrate how to access and customize settings that relate to the view’s preview and filter features.

1.       I invoke the Feature Browser, and select Preview to access the settings that relate to the view’s preview feature.

2.       Selecting the Preview feature, results in the Property Grid being filtered, so that only the properties and events that relate to this feature are displayed.

3.       So, let’s enable the “Show Preview” option, to display row preview sections.

4.       Now, I need to specify the name of the field, whose values are displayed within preview sections.

5.       Let’s use the Phone field.

6.       Then, I access the settings that relate to the view’s filter feature, and enable the “Show Auto Filter Row” option, to allow data to be filtered by typing text within the row.

7.       And I’m done!

8.       I close the designer, and run the application.

9.       The row preview sections now display the customer’s phone number.

10.   The “Auto Filter” row, is displayed at the top of the view.

11.   I type text within the row, and a filter condition is automatically created based upon the value entered, and this is applied to the focused column.

XtraGrid - Embed Editors into Grid Cells

In this lesson, I’ll demonstrate how to assign the in-place editors supplied in the XtraEditors library to Grid Columns and Card fields.

1.       First, I’m going to assign editors to some card fields.

2.       To do this, I select the Card View, and in this case select the “Order Date” and the “Required Date” card fields.

3.       To select multiple card fields like this, I can use the shift key.

4.       Then, I’ll select the column edit property, and assign a “Date Edit” in-place editor.

5.       This editor enables date/time values to be edited using a drop-down calendar.

6.       The created in-place editor is represented by the repository item that stores the editor’s properties and event handlers.

7.       Using those settings, the repository item is capable of creating fully functional editors which are ready to be used to edit cell values.

8.       After the “Date Edit” repository item has been created, I can access its settings. For example, I can specify a range of available values.

9.       Now, I’ll select the “Advanced Banded Grid View” to assign in-place editor to the county and address columns.

10.   First, I select the “Country” column, modify the “ColumnEdit” property, and assign the “Combo Box Edit” to it.

11.   After the Combo Box Editor has been created, I can access its items collection and populate it with the countries that will be displayed within the drop-down.

12.   When assigning in-place editors to columns and card fields, the corresponding repository items are automatically added to the Grid Control’s internal repository.

13.   So, it’s also possible to create and customize the repository items and then assign them to grid columns.

14.   This is what I’m going to demonstrate.

15.   I run the designer, and switch to the “In-place Editor Repository” page.

16.   The repository items that I created before I listed here.

17.   Now, I’ll add a new repository item.

18.   Let it be the “Memo E X Edit”.

19.   Then, I switch to the columns page, and assign the “Memo E X Edit” I just created to the Address column.

20.   And I’m done.

21.   I close the designer, and run the project to see the result.

22.   I can click the cells, and the view automatically creates editors to enable me to edit cell values.

23.   The editors are created based on the settings of the corresponding repository items.

XtraGrid - Display Master-Detail Data

In this lesson, I’ll demonstrate how to use a Grid Control to present data in a Master-Detail format.

1.       First, I’m going to add a Detail Data Table to the Customers DataSet.

2.       To do this, I run the DataSet Configuration Wizard.

3.       Now, I’m going to select the Childs table for the Customers.

4.       Let it be the Orders Table.

5.       I choose the fields that I want to be retrieved,  . . . and click Finish.

6.       Notice that the detail buttons which I use to expand detailed views, are now displayed within the grid rows.

7.       This indicates that our Grid Control is ready to display Master-Detail data.

8.       By default, details will be represented by grid views.

9.       Now, I’ll show you how to change the view used to display detail data.

10.   For this purpose, first click the “Retrieve Details” button.

11.   The Grid Control creates a Master-Detail tree that corresponds to the structure of your data source.

12.   After the detail level has been created, we can associate a view with it.

13.   Let’s use a newly created Card View.

14.   After these steps are complete, I rebuild the solution.

15.   Finally, I need to supply the data to be displayed by the detail views.

16.   I drop the “Orders Table Adapter” onto the form.

17.   Then I can double-click the form, and write code within the form’s “Load” Event Handler to fill the dataset with the data provided by the “Orders Table Adapter”.
CODE:
ordersTableAdapter1.Fill(dsCustomers.Orders);

18.   And that’s all . . . I run the application to see the results.

19.   Expand the first master row.

20.   You can see that the detail data is now represented as cards.

21.   I can maximize the detail, so that it occupies the entire grid control’s window.

22.   Then, I can switch back to the main view.

The example shown in this lesson is the simplest Master-Detail structure you can display using the XtraGrid. You can have any number of nesting levels and any number of details at each level.

For additional information, please refer to the XtraGrid’s documentation.

XtraGrid - Customizing the Look & Feel

In this lesson, I’ll demonstrate how to customize the appearance of the XtraGrid Control. You will learn how to apply a pre-defined style scheme to a view, how to specify the view’s paint style, and how to modify the Grid’s overall look and feel.

1.       The Grid provides 44 pre-defined style schemes.

2.       To apply one of them, I run the designer for the grid and switch to the “Style Schemes” page.

3.       The Style Schemes are listed here.

4.       I select a style scheme, and the preview section displays a sample view with the selected scheme applied to it.

5.       I can also select the Paint Style.

6.       This specifies the manner in which Scroll Bars, Borders and Buttons are drawn for the view.

7.       So, I can experiment with different combinations and see how the appearance changes.

8.       For now, I’ll choose the “Pastel 1” scheme, and reset the Paint Style to Default.

9.       This means that the view’s appearance will now be controlled by the Grid Control.

10.   I apply the changes, and close the designer.

11.   Now, I’ll show you how to change the paint style at the grid level.

12.   I click the grid control link to access the grid settings.

13.   By default, all Developer Express controls read their “Look And Feel” settings from the centralized controller.

14.   To let the grid be in control of its own paint style, let’s disable the “Use Default Look And Feel” Option.

15.   Now, I can change the skin used to paint the grid control.

16.   You can see that all the changes are immediately reflected in the grid.

So, now you know the basics of customizing the XtraGrid Control’s appearance.

XtraGrid - Band and Column Customization

This lesson demonstrates the basics of working with banded Grid Views. I’ll show you to add and delete bands, customize band settings, and change the layout of bands and columns.

1.       First, let’s change the view type from GridView to “Advanced Banded Grid View”.

2.       You’ll see that all the columns are now under the default band.

3.       Let’s add one more band to break the columns up into two logical parts.

4.       For this purpose, we need to run the designer.

5.       You can add bands and specify their location at the same time by pressing the “Add New Band” button and dragging the mouse pointer to the desired band position.

6.       After you’ve added the band, you can click its header to access the band settings.

7.       In this example, we can use this feature to change the band caption.

8.       To rearrange columns between bands, I simply drag the desired columns and drop them where they are needed.

9.       Now I’m done with the layout customizations, so I’ll close the designer.

10.   The columns and bands layout can also be customized right on the form.

11.   Let’s drag columns one under another, so that the corresponding data cells are arranged to two rows.

12.   Let’s now make the grid a little bit more readable, by stretching the columns to fit the entire view.

13.   The Column’s “Auto Width View” option needs to be set to true for this particular purpose.

14.   Now we need to make the column headers in the second band, occupy two rows.

15.   To do this, we simply click the column headers (we could use the “Control” or “Shift” key to select multiple columns), and once selected, I set their “Auto Fill Down” property to true to make them stretch down automatically.

16.   Finally, let’s change the caption of the “Customer ID” column using the same approach.

17.   Now I’m done with banded column customizations, so let’s run the application to see the result.