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 - 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.