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.

XtraGrid - Binding a Grid to Data

In this lesson, our main goal is to show you how to bind XtraGrid to data. Thus, I’m going to create an extremely simple application that has a single form with Grid Control bound to an access database.

1.       First, let’s drop a Grid Control onto a new form.

2.       And make it fill the entire form’s area.

3.       Now we need to create a data source and bind it to the grid.

4.       These actions can be done at once by the Grid’s smart tag.

5.       I click the “Add Project Data Source…” link to start the “Data Source Configuration Wizard”.

6.       The first step is to choose a data source type and it is “Database” in our case.

7.       Hence, I leave the default option and proceed to the next page to choose a data connection.

8.       I get to create a new connection here.

9.       All I have to do is to locate the desired database file on the disk . . . and I’m done!

10.   In the last step, I’ll choose the data table that will supply data to the grid.

11.   The “Customers” table will do nicely in this lesson.

12.   I’ll specify a meaningful name for the DataSet . . .

13.   . . . and click Finish.

14.   The wizard has been completed . . . AND . . . as you can see, I have not only created the Data Source, but also bound it to the grid.

15.   We can see that the grid has automatically retrieved all the fields from the bound table and created columns for them.

16.   Since I don’t need to display all the columns, I’ll invoke the Grid’s Designer to remove some of them.

17.   I’ll switch to the columns page, select the columns I wish to remove, and delete them with a single click.

18.   You see that the corresponding field names are now bold, indicating that there are no columns bound to them.

19.   To create a column bound to a particular field, you can simply drag an item from the Fields ListBox, to the Columns ListBox.

20.   Now I’m done with column customization, so I’ll close the designer.

21.   Finally, I can run the application to see the result.

22.   A Grid Control, filled with data from the bound Data Table.