The One With
  • XtraVerticalGrid – Data Binding (Transcript)

    Download Transcript: PDF Word XPS


    In this lesson, I’m going to show you how to bind XtraVerticalGrid to an Access Database.

    1. First, let’s drop an XtraVerticalGrid Control onto a form, and make it fill the form.


    2. Now we need to create a data source and bind it to the VerticalGrid. Both actions can be done by the grid’s smart tag.

    3. I click the “Add Project Data Source” link to start the data source configuration wizard.

    4. I choose the data source type, which is “Database” in our case.

    5. Then I proceed to the next page to choose the data connection.

    6. You can create a new connection here. All you have to do is locate the desired database file on the disk.

    7. I’ll use an existing connection.

    8. In the last step, I’ll select the “Employees” data table which will supply data to our VerticalGrid.

    9. And I’m done with the data source configuration.

    10. The XtraVerticalGrid Control allows rows to be arranged into a tree.

    11. To customize the row layout, I run the designer.


    12. So, I’m going to logically divide all rows into two groups.

    13. The first group will contain the main information on employees, their first and last names, title, birth and hire dates.

    14. I create a “Category Row” and change its caption to “Employee”.

    15. Now, I’ll drag the desired rows onto it.

    16. The second group will contain address information.

    17. I add the second “Category Row”, let it be “Address”…

    18. …and drag the rows onto it.

    19. Since I don’t need to display the other rows, I delete them.

    20. I close the designer, and run the application to see the result.

    21. A VerticalGrid Control is filled with data from the bound data table.

  • XtraScheduler – Group Appointments by Resources (Transcript)

    Download Transcript: PDF Word XPS



    The purpose of this lesson is to show you how to group and select appointments by their resources.

    1. We’ll start from the simple application of Lesson 2.

    2. Looking at the Scheduler toolbox, we see three controls obviously intended for selecting resources.

    3. Let’s drop one of them, which is like the popup box, to the form and dock it to the top where it becomes bound to the Scheduler.

    4. To group appointments, I need to set the “Group Type” property of the “Scheduler Control”.

    5. I need to set it to ‘Resource’, since we’ll be displaying and grouping appointments by ‘Resource’.

    6. I also have to limit the number of resources which will be displayed on a page in a “Week View” to something like 3 – otherwise the display will become overcrowded.

    7. Then, I need to assign several values under the “Options View Resource Headers” branch of properties, for proper displaying of images and the captions of the resources.

    8. Now, I shall run the application.

    9. This is the group view of the scheduler.

    10. The appointments are grouped by resources. The Resources’ pictures and captions are displayed within the headers.

    11. Notice the “Resource Navigator” element. It is used for changing the number of resources per page and scrolling through them.

    12. I can also make resources invisible, by unchecking them in the popup “Check List Box”.

  • XtraScheduler - Binding To Data (Transcript)

    Download Transcript: PDF Word XPS



    The purpose of this lesson is to show you how to bind XtraScheduler to data.

    We’ll start from the simple application we created in Lesson 1.

    1. First, we need to create a data source and bind it to the scheduler.

    2. We’ll use the already present SchedulerStorage control, since it stores all data for appointments and resources.

    3. Expanding the Appointments property branch, I click the DataSource item…

    4. …and then the Add Project Data Source link to start the data source configuration wizard.

    5. The first step is to choose the data type, which is “Database” in our case.

    6. I’ll proceed to the connection string configuration to create a new connection.

    7. All I have to do is locate the desired MDB file on the disk.

    8. I am asked whether the database should be copied and added to the project. The answer is “No”.

    9. Then, I shall choose the data tables that will supply the data, and click “Finish”.

    10. Since I need data for the appointments, I select the CarScheduling table.

    11. The “Setup Appointment Storage” window pops up.

    12. The wizard has automatically mapped the standard appointment properties to the data fields. Make sure to check this manually, since incorrect mappings will cause problems later.


    13. And now I will manage the “Resources” storage section . . . assigning the data source and mapping the fields.

    14. Pay attention to the new components, which were created automatically after the data source creation and assignment.


    15. Let’s look at the CarsDBDataSet control. I select it in the tray and click the “Edit in DataSet Designer…” task.

    16. This is a place where you can edit relations and change the queries used to obtain the data.

    17. I do not have to write the code to populate the controls with data at run time. The Studio designer has already done it.

    18. Since my appointments belong to July of 2008, I must set the Start date for the scheduler accordingly, so that I can view them straightway, when the application runs.

    19. I can change the ActiveView to “Week” to display more appointments at a time.

    20. If I run the project now, the changes will be saved in the DataTable objects, but not in the database.

    21. I have to write some code myself for posting the data back to the database. The SchedulerStorage events should be handled for this purpose.

    22. When changes occur, I must resolve them back to the data source and accept the changes by my DataSet.


    23. I can assign the same procedure to handle events when appointments are deleted or inserted.

    24. Now, I’m done with customization.

    25. A Scheduler, bound to the database.

  • XtraGrid - Band and Column Customization (Transcript)

    Download Transcript: PDF Word XPS


    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 (Transcript)

    Download Transcript: PDF Word XPS


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

  • DevExpress Channel is growing

    Dear DXperiencers,

    In an effort to bring you as much educational material as possible, back on July 29 we launched the DevExpress Channel :).

    A portal site where we have been and are going to continue broadcasting technical and non-technical videos related to DevExpress products and technologies in general.

    You'll be happy to know that the Channel is growing :) So please welcome our newest member Amanda, and stay tuned for more more more and more videos.

    Watch the video:

    View the transcript: Word PDF XPS



  • Spell Checker : Advanced Features


    The second video in the XtraSpellChecker tutorial series shows you how to use certain advanced features such as CheckAsYouType.

  • Spell Checker : Getting Started

    In this video, Erica demonstrates how to add the spell checking capabilities to an application using the XtraSpellChecker library.

    Spell Checker 101: Getting Started



  • Silverlight and Data Access using XPO

    It used to be that in any thin client application that you build, you would spent most time worrying about how to bring your data to the client and then how to properly submit your changes back. These days, as the data access frameworks and the ORM solutions matured, you can actually afford to think about your application, your business logic etc... instead of constantly tinkering with the DA plumbing.

    Such challenges still exist, to a certain degree, for young platforms like Silverlight. But you'd be happy to know that XPO is making it to Silverlight. In fact, you can already find some bits in your v8.2 install :).

    I am going to show you how to use them... [If you are new to XPO I suggest reading more about it here and also check out Gary's Blog for some XPO related goodies...]

    Warning: These are pre-release preview bits for (DXperience 8.2.4) and are subject to change. 

    Developing an HTTP Data Layer

    To accomplish the flow illustrated above, we will need an IDataStore that will work over HTTP.

    public interface IDataStore {
    AutoCreateOption AutoCreateOption { get; }
    ModificationResult ModifyData(params ModificationStatement[] dmlStatements);
    SelectedData SelectData(params SelectStatement[] selects);
    UpdateSchemaResult UpdateSchema(bool dontCreateIfFirstTableNotExist, params DBTable[] tables);

    On the server side, we will expose it as a WCF Web Service.

    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    [ServiceContract(Namespace = "")]
    public class Gateway {
    static IDataStore s_dataStore;

    static Gateway() {
    s_dataStore = XpoDefault.GetConnectionProvider(
    MSSqlConnectionProvider.GetConnectionString("<COMPUTER_NAME>", "<DATABASE_NAME>"),

    public AutoCreateOption GetAutoCreateOption() {
    return s_dataStore.AutoCreateOption;

    public SelectedData SelectData(SelectStatement[] selects) {
    if (selects != null && selects.Length > 0 && selects[0].TableName == "XPObjectType") {
    return new SelectedData(new SelectStatementResult());
    return s_dataStore.SelectData(selects);

    public UpdateSchemaResult UpdateSchema(bool dontCreateIfFirstTableNotExist,
    DBTable[] tables) {
    return s_dataStore.UpdateSchema(dontCreateIfFirstTableNotExist, tables);

    public ModificationResult ModifyData(ModificationStatement[] statements) {
    return s_dataStore.ModifyData(statements);


    And on the client side we will create a wrapper for it.

    The contract:

    [ServiceContractAttribute(Namespace = "")]
    public interface IGateway {
    [OperationContractAttribute(AsyncPattern = true,
    Action = "urn:Gateway/GetAutoCreateOption", ReplyAction = "urn:Gateway/GetAutoCreateOptionResponse")]
    IAsyncResult BeginGetAutoCreateOption(AsyncCallback callback, object asyncState);
    AutoCreateOption EndGetAutoCreateOption(IAsyncResult result);

    [OperationContractAttribute(AsyncPattern = true,
    Action = "urn:Gateway/SelectData", ReplyAction = "urn:Gateway/SelectDataResponse")]
    IAsyncResult BeginSelectData(SelectStatement[] selects, AsyncCallback callback, object asyncState);
    SelectedData EndSelectData(IAsyncResult result);

    [OperationContract(AsyncPattern = true,
    Action = "urn:Gateway/UpdateSchema", ReplyAction = "urn:Gateway/UpdateSchemaResponse")]
    IAsyncResult BeginUpdateSchema(bool dontCreateIfFirstTableNotExist, DBTable[] tables, AsyncCallback callback, object asyncState);
    UpdateSchemaResult EndUpdateSchema(IAsyncResult result);

    [OperationContract(AsyncPattern = true,
    Action = "urn:Gateway/ModifyData", ReplyAction = "urn:Gateway/ModifyDataResponse")]
    IAsyncResult BeginModifyData(ModificationStatement[] statements, AsyncCallback callback, object asyncState);
    ModificationResult EndModifyData(IAsyncResult result);

    And the transport channel:

    public class Gateway : ClientBase<IGateway>, IGateway, IDataStore {
    #region IDataStore Members
    public SelectedData SelectData(params SelectStatement[] selects) {
    if (this._dispatcher.CheckAccess()) {
    throw new InvalidOperationException();

    var _ar = BeginSelectData(selects, null, null);

    if (!_ar.IsCompleted) {

    return EndSelectData(_ar);

    #region IGateway Memebers
    public IAsyncResult BeginSelectData(SelectStatement[] selects, AsyncCallback callback, object asyncState) {
    return base.Channel.BeginSelectData(selects, callback, asyncState);

    public SelectedData EndSelectData(IAsyncResult result) {
    return base.Channel.EndSelectData(result);

    #region ClientChannel
    private class ClientChannel : ChannelBase<IGateway>, IGateway {
    public IAsyncResult BeginSelectData(SelectStatement[] selects, AsyncCallback callback, object asyncState) {
    object[] _args = new object[1];
    _args[0] = selects;
    IAsyncResult _result = base.BeginInvoke("SelectData", _args, callback, asyncState);
    return _result;
    public SelectedData EndSelectData(IAsyncResult result) {
    object[] _args = new object[0];
    SelectedData _result = (SelectedData)base.EndInvoke("SelectData", _args, result);
    return _result;

    Full implementation of the Gateway proxy can be downloaded here: Gateway.cs


    Preparing your Silverlight Application

    In your Silverlight project add references to the following assemblies:

    • DevExpress.Data.v8.2.SL
    • DevExpress.Xpo.v8.2.SL
    • System.Xml.Serialization
    • System.ServiceModel

    Add the Gateway.cs and include a config. file for the gateway web service:

    <binding name="BasicHttpBinding_Gateway" maxBufferSize="65536"
    <security mode="None" />
    <endpoint address="http://localhost:50691/Gateway.svc" binding="basicHttpBinding"
    bindingConfiguration="BasicHttpBinding_Gateway" contract="DevExpress.Xpo.Xtras.IGateway"
    name="BasicHttpBinding_Gateway" />


    Working with Data

    Now that all the prop. work is out of the way, we can start executing some queries. Suppose you are building an auto showroom application and you want to retrieve all the BMWs from the table inventory.

    public class Inventory : PersistentBase {
    Guid _id;
    [Key(AutoGenerate = true)]
    public Guid ID {
    get { return _id; }
    set { SetPropertyValue("ID", ref _id, value); }

    string _make;
    public string Make {
    get { return _make; }
    set { SetPropertyValue("Make", ref _make, value); }

    string _model;
    public string Model {
    get { return _model; }
    set { SetPropertyValue("Model", ref _model, value); }

    public Inventory(Session session)
    : base(session) {

    UnitOfWork unitOfWork = new UnitOfWork(new SimpleDataLayer(_gateway));

    XPQuery<Inventory> inventory = new XPQuery<Inventory>(unitOfWork);
    var query = from t in inventory
    where t.Make == "BMW"
    select t;

    var list = query.ToList<Inventory>();

    // Do stuff with the list... bind it to a grid etc...


    Where _gateway is an instance of our DevExpress.Xpo.Xtras.Gateway : IDataStore initialized somewhere during startup or page load.

    Modifying or creating a new record is also done naturally via the Inventory class.

    using (UnitOfWork u = new UnitOfWork(new SimpleDataLayer(this._gateway))) {
    var o = new Inventory(u);
    o.Make = "Audi";

    One very important thing to remember here is that all operations that require a web service call need to be performed asynchronously. This is enforced by the Silverlight runtime [and it's good thing]. So always invoke your calls from a worker thread, for example:

    ThreadPool.QueueUserWorkItem(delegate(object state) {

    UnitOfWork unitOfWork = new UnitOfWork(new SimpleDataLayer(_gateway));

    XPQuery<Inventory> inventory = new XPQuery<Inventory>(unitOfWork);
    var query = from t in inventory
    where t.Make == "BMW"
    select t;

    var list = query.ToList<Inventory>();

    Dispatcher.BeginInvoke(() => {
    agDataGrid.DataSource = list;


    Download Sample Project



  • Custom Silverlight Controls: Creating a reusable MessageBox dialog. (Part III)

    We have created the basics for the MessageBox dialog in Part I and Part II. One thing that we realized is that there is no way to block on MessageBox.Show. The cleanest solution to get the dialog result is to make our call API "asynchronous".

    Something like this:

    public delegate void DialogCloseDelegate(
    object sender,
    DialogResult dialogResult);
    public static class MessageBox {
    public static void Show(string title, string text, DialogStyle dialogStyle,
    DialogCloseDelegate callback) {
    InternalShow(title, text, dialogStyle, callback);
    public class MessageBoxControl : ContentControl {
    DialogCloseDelegate _callback;

    public MessageBoxControl(Popup owner, DialogCloseDelegate callback)
    : this() {
    this._callback = callback;

    void DialogButtonClick(object sender, RoutedEventArgs e) {
    DialogButton button = sender as DialogButton;
    if (this._owner != null && button != null) {
    this._owner.IsOpen = false;
    if (_callback != null) {
    _callback(this, button.DialogResult);

    We can then use the MessageBox like so:

    private void Button_Click(object sender, RoutedEventArgs e) {
    MessageBox.Show("Title", "Hello World", DialogStyle.OkAndCancel,
    new DialogCloseDelegate(OnDialogClose));

    void OnDialogClose(object sender, DialogResult dialogResult) {
    MessageBox.Show("Dialog Result", dialogResult.ToString());
    What's Next?

    Since this is just demo code, a lot of things have been simplified. For example you might want to move the hard-coded "OK" and "Cancel" button contents out into properties. You could make the default template for the message box surface a little prettier, so that it has the look and feel of your application. Hopefully, this article will get you started.

    Download the Source Code



6 7 8 9 10 11
13 14 15

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at or call us at +1 (818) 844-3383


DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, Delphi, HTML5 or iOS & Android development. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2018 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners